Add support for aria-pressed to determine which button is clicked in toggle buttons

[gndelia]

Describe the feature you'd like:

TL;DR

In a toggle of buttons, there's no way to determine which button is selected, other than checking CSS attributes (if background color is used as a distinction of which one is selected). If using aria-pressed (which should be used on its own to help browser and readers better interpret the semantic html), we could add it as an option of getByRole and detect the button selected.

Detailed explanation

My scenario is very simple: I have a toggle which is composed of 3 buttons - the user can only click one of these 3 at the time.

the (simplified) HTML looks like this

<div>
  <button><span>last 24 hs</span></button>
  <button><span>last 7 days</span></button>
  <button><span>last 30 days</span></button>
</div>

there's some logic to determine which one should be clicked by default. There's also some logic for making some of them disabled or enabled. The user notices which elements are selected by color (css)

From RTL POV, There are ways to determine if a button is disabled (there are properties for that).
For determine which element is selected, however, there's no current way to tell which element is selected, unless I query for having a specific css class / styling, which I don't like too much.

I read there's the aria-pressed role that fulfils exactly this functionality: adding it will help screen readers to identify which option is selected by default and which one is selected whenever I click other. That's great by its own, however, it does not help RTL to identify the element.

Quoting from the mdn docs

aria-pressed
Defines the button as a toggle button. The value of aria-pressed describes the state of the button. The values include aria-pressed="false" when a button is not currently pressed, aria-pressed="true" to indicate a button is currently pressed, and aria-pressed="mixed" if the button is considered to be partially pressed. If the attribute is omitted or set to its default value of aria-pressed="undefined", the element does not support being pressed.

and about the toggle buttons

A toggle button typically has two states: pressed and not pressed. A third mixed state is available for toggle buttons that control other elements, such as other toggle buttons or checkboxes, which do not all share the same value. Whether an element is a toggle button or not can be indicated with the aria-pressed attribute in addition to the button role (if the element is not already a native button element):

Suggested implementation:

Considering aria-pressed, the HTML would look like this

<div>
  <button aria-pressed="true"><span>last 24 hs</span></button>
  <button aria-pressed="false"><span>last 7 days</span></button>
  <button aria-pressed="false"><span>last 30 days</span></button>
</div>

That's ok on its own - it needs to be done. But for RTL, I thought an option for getByRole - just like selected and checked are now. That way, I could use the query like this

// gets the button that's selected
screen.getByRole('button', { pressed: true })

aria-selected can be true, false or mixed. Not sure how would I represent the mixed. Pressed should be only used for native button or perhaps elements with role="button"

Describe alternatives you've considered:

Keep testing by background color.

Teachability, Documentation, Adoption, Migration Strategy:

Not quite sure what to put here 😅

edit: Not sure if this should be here or in DOM testing library. I also had some doubts about opening this ticket due to #16

[ricardozv28]

I think this was addressed by testing-library/dom-testing-library#729 (v 7.22.0), lastest version of @testing-library/react(v 10.4.9) uses "@testing-library/dom": "^7.22.3"

Here is a small reproduction code of this functionality working properly: https://codesandbox.io/s/aria-press-ptfvo

[kentcdodds]

Thanks!

[gndelia]

awesome!! Thank you!