Fix the Save buttons labelling and tooltip #43952
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
afercia
added
[Type] Bug
|
Size Change: +49 B (0%) Total Size: 1.28 MB
ℹ️ View Unchanged
|
afercia
force-pushed
the
fix/save-button-labelling-and-tooltip
branch
from
a457a2f to
a00343c
Compare
|
Note: turns out that setting the triggers a full re-rendering of the button. This makes the Maybe the test can be fixed but it would be great to avoid a full re-rendering in the first place. Some help would be very welcome. What triggers the re-rendering is a bit obscure to me. Update: |
|
To recap findings about the tooltip issue:
For now, I mitigated the problem by setting the prop I'll move the full re-rendering issue in a GitHub discussion. |
|
See open discussion at #44735 |
afercia
force-pushed
the
fix/save-button-labelling-and-tooltip
branch
from
0028b78 to
dbc9d3a
Compare
aristath
approved these changes
Nov 15, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #42819
What?
Post editor: based on the post saved state, the Save button aria-label may mismatch the button visible text and provide an incorrect information to assistive technology users. For example. when the post is saved, the visible text is 'Saved' but the aria-label is still 'Save draft'. Also, when the 'Show button text labels' preferences is enabled, the tooltip shows only the keyboard shortcut, which looks broken visually.
Site editor: the Save button does have an associated keyboard shortcut. However, the shortcut isn't exposed visually. For consistency, it should.
Why?
Mismatching visible text and aria-label are a serious accessibility problem, as they provide users with inconsistent information. Also, the tooltip should work consistently for all buttons and when there's a associated keyboard shortcut, they should display both the label and the shortcut.
How?
Post Editor save button:
labelprop so that the button tooltip works also when 'Show button text labels' is enabled.Site editor save button:
labelprop so that the save button tooltip works.shortcutprop to display the available keyboard shortcut within the tooltip.Testing Instructions
Post editor
Site editor
Screenshots or screencast
Post editor with 'Show button text labels' enabled, before:
Post editor with 'Show button text labels' enabled, after: