-
Notifications
You must be signed in to change notification settings - Fork 379
Description
Describe the problem
Follow up to #7456 , see comment #7456 (review)
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?
Metadata
Metadata
Assignees
Labels
Type
Projects
Status