patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

Bug - Select - aria describedby doesn't work on non-typeahead variant

Open thatblindgeye opened this issue 3 years ago • 0 comments

Describe the problem Follow up to #7456 , see comment https://github.com/patternfly/patternfly-react/pull/7456#pullrequestreview-986640231

The aria-describedby attribute is being applied to the incorrect element on non-typeahead variants of the Select component. Right now it's being applied to the div element with class .pf-c-select when it should be applied to the SelectToggle component (similar to how the aria-labelledby attribute is applied), as that is what receives focus from VO.

How do you reproduce the problem?

  1. Go to the Select component page
  2. Copy+paste to replace an example's code with the code below
  3. Turn on Voice Over and navigate to the Select toggle and notice how the description doesn't get announced
    • You can also change aria-describedby to aria-labelledby and notice that this gets announced correctly, as well as checking the DOM in dev tools to see the difference in where each is being applied
Click to reveal code
import React from 'react';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import { Select, SelectOption, SelectVariant, SelectDirection, Checkbox, Divider } from '@patternfly/react-core';

class SingleSelectInput extends React.Component {
  constructor(props) {
    super(props);
    this.options = [
      <SelectOption key={0} value="Select a title" isPlaceholder />,
    ];
  }

  render() {
    const titleId = 'title-id-1';
    return (
      <div>
        <span id={titleId}>
          Title
        </span>
        <Select
          validated="success"
          variant={SelectVariant.single}
          aria-label="Select Input"
          aria-describedby={titleId}
        >
          {this.options}
        </Select>
      </div>
    );
  }
}

Expected behavior A clear and concise description of the expected behavior.

Is this issue blocking you? List the workaround if there is one.

Screenshots If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?

thatblindgeye avatar May 27 '22 16:05 thatblindgeye