microsoft / eslint-plugin-fluentui-jsx-a11y

ESLint rules for accessibility against FluentUI v9 components.
MIT License
26 stars 16 forks source link

Dropdown needs an accessible name #53

Closed aubreyquinn closed 8 months ago

aubreyquinn commented 8 months ago

The Dropdown menu needs a visual label and it needs to be linked via aria-labelledby e.g.

https://react.fluentui.dev/?path=/docs/components-dropdown--default

    <div className={styles.root}>
      <label id={comboId}>Best pet</label>
      <Dropdown
        aria-labelledby={comboId}
        multiselect={true}
        placeholder="Select an animal"
        {...props}
      >
        {options.map((option) => (
          <Option key={option} disabled={option === "Ferret"}>
            {option}
          </Option>
        ))}
      </Dropdown>
    </div>
shweta786 commented 8 months ago

Pull request