Toolbar button a11y

[Wagner3UB]

#5118

• Fixed the low contrast of the toolbar expand/collapse button and added a hover effect.
• Added an additional dynamic text for the expand button to properly indicate both open and closed states.

Screen.Recording.2025-10-15.at.12.07.20.mov

[pnicolli]

The label changes look good, if you could provide a screenshot of the style changes it would be awesome. Thanks!

[Wagner3UB]

The label changes look good, if you could provide a screenshot of the style changes it would be awesome. Thanks!

@pnicolli Done

[Wagner3UB]

@pnicolli Test passed

[pnicolli]

I think it's probably ok, I'm not fully convinced about having the visually-hidden class nested in there in the css code, it could as well be global but that could also cause breaking changes. I would love a couple more eyes from @plone/volto-team on this regard please.

[JeffersonBledsoe]

@Wagner3UB We should probably set 'aria-controls' on the button too and have its ID set as the toolbar to make it clear that the thing that is expanded isn't the button itself.

[wesleybl]

it could as well be global but that could also cause breaking changes.

@pnicolli I don't understand why you think this would be a breaking change. There's no visually-hidden class in Volto. I think since it's global, it could be reused. But isn't there already a class that does this?

There is also this PR #6356

Other interesting things to be added were pointed out

[pnicolli]

@JeffersonBledsoe actually I think you are right, nice catch!
@wesleybl adding any global class that can be a breaking change for users. If users have a different implementation of the same class we could break it. I'm ok with adding this since we are in v19 alpha but I would document this in the upgrade guide. Good pointing out that another PR exists, let's resurrect that, I'll leave a comment/review there!

[Wagner3UB]

@JeffersonBledsoe Thank you! I will manage to have that too.

@pnicolli @wesleybl The global insertion of this class was already discussed within the A11Y team, and we all agreed it was an excellent idea. I overlapped Jeff’s PR even though I was aware it already existed and was nearly complete, since I had been in contact with him and he mentioned he was having some difficulties deciding the best approach and location to define the variable in order to cover all possible cases.

[Wagner3UB]

@JeffersonBledsoe @pnicolli I added the aria-controls even though it may serve only a semantic purpose and not really as a functional instrument. The way I had implemented it before, using aria-live with translations to announce the states, mentioning the toolbar, and including aria-expanded, was already sufficient according to several sources I found. Still, I added it anyway to make sure accessibility testing tools would not flag its absence.

[pnicolli]

Still, I added it anyway to make sure accessibility testing tools would not flag its absence.

Makes perfect sense to me 👍

Let's maybe try to merge the other PR so we can then use the global class here.