Tools panel: Synced the visible label and accessible name - #68592

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

As mentioned in the issue, there is another accessibility concern: the aria-label is set as "Elements options" while the title of the popover is "Elements"

The required change needs to be made in this file. However, removing the word "options" raises an ESLint error (@wordpress/i18n-no-placeholders-only), which prohibits the use of translation functions with placeholders only.

I would love to hear your thoughts on how to approach this part of the issue

Hi @afercia ,

When you have a moment, Please review my PR .

Looking forward for the feedback.

When you have a moment, Please review my PR .

@im3dabasia thanks for raising this PR.
There's a few e2e tests and unit tests failing. As far as I can tell they all fail because of the accessible name change necause they use selectors to target the previous names such as:
'Show link'
'Show content'
'Drop cap' / 'Show drop cap'
'Appearance' / 'Show Appearance'
etc.

Once fixed, I guss the snapshots of the failing unit test should be regenerated. You can do that by passing the related flag when running the test, for example:

npm run test:unit -- --updateSnapshot --testPathPattern {test file path here starring with packages/}

From a design perspective, the Tools Panel is still unclear to me.
As an user, when the popover opens, I'm not sure I understand what I can do here. There's nothing, absolutely nothing, that visually tells me this settings are meant to toggle the visibility of the related settings in the main panel. The popover visibel title only says 'Elements' (and siilarly for other kind of settings). Instead, it should really explain the list of items below is to toggle the visibility of those settings.
Cc @WordPress/gutenberg-design

Thank you @afercia for your thoughtful feedback! I really appreciate you explaining the snapshot update process - I've learned something valuable today.

I agree with your design feedback about the Tools Panel's lack of clarity. For this PR though, I'm specifically focusing on addressing the accessibility issue where visible and accessible names don't match. I'll fix all the test failures caused by these name changes and regenerate the snapshots as you suggested.

The broader UX improvements can be addressed in a separate PR after reaching consensus with the design team.

Hey @afercia

I have fixed the failing test cases. When you get a chance please review my PR

Why do these need an aria-label when there is a visible text in the button?

Why do these need an aria-label when there is a visible text in the button?

I think you're right - we don't need an aria-label that is exactly the same as the displayed text.

However, we may need to do something about the resettable buttons, because the text "Reset" has the aria-hidden attribute applied to it, which means that screen readers won't read it.

Thanks for this one @im3dabasia 👍

From what I can see #84341 has already fixed the mismatch this PR targets.

#84341 puts the visible name first, for example "Line height, show" and "Line height, hide and reset". Default items read "Size, reset to default".

The name now starts with the visible text, so voice control users can say what they see. This PR conflicts on those same lines.

I'll close this one for now. If there's something further you think needs addressing, please feel free to re-open or submit a follow-up issue.