Skip to content

USWDS - Bug: Banner has issues with accordion initialization #5179

@mejiaj

Description

@mejiaj

Describe the bug

Banner fails to initialize properly because:

  1. Component doesn't have its own init method.
  2. There's a requirement to USA accordion JS that's not called.

Steps to reproduce the bug

  1. Create a banner component in react
  2. Try to initialize based on react hooks example
// UsaBanner.jsx

import { useEffect } from "react";
import banner from "@uswds/uswds/js/usa-banner/";

function UsaBanner() {

useEffect(() => {
  const ref = document.body;
  // window.uswds
  // initialize
  banner.on(ref);

  return () => {
    banner.off();
  };
});

…component markup

Expected Behavior

Component should initialize in react without requiring uswds-init.

Screenshots

No response

System setup

  • USWDS version: 3.4.0

Additional context

Outdated notes

Affected components

  • Banner
  • Header
  • Modal

These components currently depend on usa-js-loading class from uswds-init.js. Users of dynamic frameworks will have unexpected results when trying to initialize.

For example, in the case of banner: the banner will appear expanded and won't toggle properly.

Code of Conduct

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions