patternfly-react
patternfly-react copied to clipboard
Bug - Select - aria describedby doesn't work on non-typeahead variant
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?
- Go to the Select component page
- Copy+paste to replace an example's code with the code below
- Turn on Voice Over and navigate to the Select toggle and notice how the description doesn't get announced
- You can also change
aria-describedbytoaria-labelledbyand 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
- You can also change
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?