Re: aria-pressed

You do not need two buttons for this. A single toggle button would be OK.

You could have a button with a label of "Expand all" and use the 
aria-pressed attribute to toggle its state between "true" (pressed) and 
"false" (not pressed).

Or you could change the label of the button from "Expand all" to 
"Collapse all". In this case you should not use the aria-pressed 
attribute at all.

An example of the second technique can be found here:
https://inclusivedesignprinciples.org

If you want to keep both buttons then you can set aria-pressed="true" on 
the button that is pressed, and automatically set aria-pressed="false" 
on the other button. You do not need to use the disabled attribute.

An example of this technique can be found for the light/dark style 
switcher here:
https://tink.uk/



Léonie.


On 06/02/2021 01:36, sirisha gubba wrote:
> 
> Good evening,
> I have a question about aria-pressed attribute:
> Expand all and Collapse all buttons are used to control a set of 
> accordions state.
> When the Expand all button is selected then all accordions are expanded, 
> similarly, if the collapse all button is selected then all accordions 
> will be collapsed.
> The two buttons are contained inside an element with role="group".
> Is it fine to use an aria-pressed attribute on the expand all and 
> collapse all button and adding aria-disabled attribute on the button 
> that is in a pressed state?
> 
> image.png
> 
> Thank you all for your help.!!
> 

-- 
Director @TetraLogical
https://tetralogical.com/

Received on Saturday, 6 February 2021 11:30:20 UTC