[Accessibility, DAP Violation] ariaLabel property unused on Carbon Dropdown for underlying button

What package(s) are you using?

• carbon-components
• carbon-components-react

Specifically (ish), carbon-components": “^10.6.1” and “carbon-components-react”: “^7.6.1”,

Detailed description

For reference see https://github.com/tektoncd/dashboard/issues/524 - looks like the ariaLabel property isn’t being picked up when added to the SideNavMenuItem component, e.g. with

          <SideNavMenuItem
            element={NamespacesDropdown}
            id="sidenav-namespace-dropdown"
            selectedItem={{
              id: namespace,
              text: namespace,
              ariaLabel: namespace
            }}
            showAllNamespaces
            onChange={this.selectNamespace}
          >

Is this issue related to a specific component?`

Yeah, SideBarNavItem I think

What did you expect to happen? What happened instead? What would you like to see changed?

ariaLabel should be passed to the underlying button

What browser are you working in?

Any browser, but I’m using Chrome with the inspector up

What version of the Carbon Design System are you using?

How do I check this?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Tekton Dashboard and Webhooks Extension, likely have a workaround

Steps to reproduce the issue

• Screenshots or code

Sandbox code (can’t figure out how to share, share button just links me to a new editor, forking never returns):

import { render } from "react-dom";
import { Dropdown } from "carbon-components-react";
import React from "react";

import {
  SideNav as CarbonSideNav,
  SideNavItems,
  SideNavMenu,
  SideNavMenuItem
} from "carbon-components-react";

const NamespacesDropdown = props => {
  return <Dropdown {...props} />;
};

const allNamespacesLabel = "All Namespaces";

NamespacesDropdown.defaultProps = {
  allNamespacesLabel,
  items: [],
  loading: false,
  label: "Select Namespace",
  ariaLabel: "Select Namespace",
  titleText: "Namespace",
  emptyText: "No Namespaces found",
  showAllNamespaces: false
};

const App = () => (
  <div>
    <CarbonSideNav
      isFixedNav
      expanded
      isChildOfHeader={false}
      aria-label="Side navigation"
    >
      <SideNavItems>
        <SideNavMenu defaultExpanded title="Tekton">
          <SideNavMenuItem element={NamespacesDropdown} />
        </SideNavMenu>
      </SideNavItems>
    </CarbonSideNav>
  </div>
);

render(<App />, document.getElementById("root"));

I expect “Select Namespace” to be used as the aria label on the button instead of Open Menu

Also you can see this is case for the Dropdown component itself just using

http://react.carbondesignsystem.com/?path=/story/dropdown--default

[abbeyhrt]

@a-roberts okay great! I’m going to close this for now but feel free to open it back up if the problem returns!

[a-roberts]

@abbeyhrt everything’s now fine for our dropdown actually, I looked in the node_modules folder and observed carbon components 10.6.1 and 7.6.1 of carbon-components-react.

Had a look through our source code (https://github.com/tektoncd/dashboard, it was the namespaces dropdown that was impacted) and don’t see any relevant changes, unless @AlanGreene knows of anything else that could have caused this.

Thanks if a fix was provided 😄