Not able to select an `optgroup` with getByRole

[runephilosof-abtion]

"@testing-library/dom": "^7.30.4",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",

Relevant code or config:

const App = () => (
  <select style={styles}>
    <optgroup label="foo">
      <option value="1">baz</option>
    </optgroup>
    <optgroup label="bar">
      <option value="2">baz</option>
    </optgroup>
  </select>
)

render(<App />, document.getElementById('root'))

screen.getByRole("group", { name: /bar/i })

What you did:

screen.getByRole("group", { name: /bar/i })

What happened:

TestingLibraryElementError: Unable to find an accessible element with the role "group" and name `/bar/i`

Here are the accessible roles:

  group:

  Name "":
  <optgroup
    label="foo"
  />

  Name "":
  <optgroup
    label="bar"
  />

Reproduction:

Just paste the above code into https://codesandbox.io/s/5z6x4r7n0p

Problem description:

It would be useful to be able to verify that a certain group is present.
It would also make it easier to select options within that group.

Suggested solution:

The name argument should match against the label attribute of optgroup.

[eps1lon]

Thanks for the report.

I didn't know the label attribute existed. I guess this is what would be considered an attribute in native markup that provides the name under 2D:

Otherwise, if the current node's native markup provides an attribute (e.g. title) or element (e.g. HTML label) that defines a text alternative, return that alternative in the form of a flat string as defined by the host language, unless the element is marked as presentational (role="presentation" or role="none").
-- https://www.w3.org/TR/accname-1.1/

Going to check some screen readers first and the browser a11y trees but I would agree with your interpretation intuitively.