search

ASU / asu-unity-stack

ASU Unity Design System
https://unity.web.asu.edu/
Other
11 stars 8 forks source link

Accessibility issues: Header component #1149

Closed daemon-node-byte closed 1 year ago

daemon-node-byte commented 1 year ago

Accessibility issues: Header component

Found a bug related to accessibility within the global Header component.

Issue caused by the bug

During accessibility compliance scan. A labeled "A" issue was found with "1.3.1 Info and Relationships"

Container element is empty Some roles are designed to contain other roles. This element has this type of role, but it doesn't contain any required-owned elements.

Reproducing the bug.

Importing @asu/component-header into an application and configuring the property HeaderProps.navTree value to be an empty array ([])

Proposed bug source

Header generates <ul> tag when there are no <li> to map as children.

file:<rootDir>/packages/component-header/src/components/HeaderMain/NavbarContainer/index.js

// lines 41 - 46
        <ul className="nav-list">
          {!!mobileNavTree?.length && isMobile
            ? mobileNavTree?.map((link, i) => renderItem(link, i))
            : navTree?.map((link, i) => renderItem(link, i))}
        </ul>

Proposed solution

Conditionally generate the parent element.

        {(mobileNavTree?.length > 0 || navTree?.length > 0) && (
          <ul className="nav-list">
            {!!mobileNavTree?.length && isMobile
              ? mobileNavTree?.map((link, i) => renderItem(link, i))
              : navTree?.map((link, i) => renderItem(link, i))}
          </ul>
        )}
mlsamuelson commented 1 year ago

We'll address this effort via https://asudev.jira.com/browse/UDS-1467 to keep with our team workflow and have visibility on our board. cc @davidornelas11