Skip to content

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

@thatblindgeye

Description

@thatblindgeye

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?

  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?

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions