Add aria labels to box control component inputs/button #27727
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
talldan
added
[Type] Bug
|
Size Change: +21 B (0%) Total Size: 1.3 MB
ℹ️ View Unchanged
|
diegohaz
reviewed
Dec 31, 2020
There was a problem hiding this comment.
Checked this on VoiceOver and NVDA.
- The LinkedButton label is a great improvement because without it it's impossible to tell what the button is meant to do.
- The input label being the same as the region label I'm not so sure about. It's a bit repetitive, without really explaining what the control does: "padding region padding edit blank" on NVDA or "padding edit text padding region" on VoiceOver.
- The unit-changing select gets announced as "px popup button" which is a bit cryptic.
Maybe we could label the input/select combo with something like "add padding and choose unit type" instead? And perhaps this combo control could use a fieldset and legend instead of div soup with aria-labels 😛 (was this what you referred to in the issue when you mentioned using a fieldset, or was it for the multiple unit controls when the sides are unlinked? If so, I'm not sure it it's great practice to nest fieldsets, though technically it's correct HTML.)
| @@ -139,7 +139,10 @@ export default function BoxControl( { | |||
| </FlexItem> | |||
| { isLinked && ( | |||
| <FlexBlock> | |||
| <AllInputControl { ...inputControlProps } /> | |||
| <AllInputControl | |||
| aria-label={ __( 'Padding' ) } | |||
There was a problem hiding this comment.
We should use the label prop here instead of a hardcoded string. Not sure if we need to pass in the string where the component is being used, as it seems to already be getting the region label from somewhere.
There was a problem hiding this comment.
🤦 D'oh, of course I should use the label prop! Thanks for catching that, done in 4032b53.
True, though on Voiceover it only does this when the field is empty, when it has a value it reads something like '12, contents selected, padding, edit text'. I suppose a different label could be used, perhaps it should be 'All sides' to mirror that the individual sides are labelled 'top', 'bottom' etc.
Oh yes, missed that, it's from a separate component
Yep, that's what I was thinking too, one fieldset wrapper. For the 'unlink' button, maybe there should be a polite announcement when the button is clicked, something like 'Sides unlinked. Edit values for each side using the individual input fields.' |
tellthemachines
approved these changes
Jan 7, 2021
talldan
force-pushed
the
fix/box-control-missing-labels
branch
from
7dbba7d to
0041b77
Compare
whyisjake
pushed a commit
that referenced
this pull request
Jan 28, 2021
* Add aria labels to box control component * Use label prop * Add aria-label to UnitControl
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jan 28, 2021
These are backports coming for the 5.6.1 release. Summary of the following issues: * [#27970](WordPress/gutenberg#27970) - Fix editor crash when registering a block pattern without `categories` Backport to WP Minor Release [Feature] Inserter [Feature] Patterns [Type] Bug * [#27733](WordPress/gutenberg#27733) - [Embed block]: Add html and reusable support back Backport to WP Minor Release [Block] Embed [Type] Regression * [#27727](WordPress/gutenberg#27727) - Add aria labels to box control component inputs/button Backport to WP Minor Release [Feature] UI Components [Package] Components [Type] Bug [a11y] Labelling * [#27627](WordPress/gutenberg#27627) - HTML Block: Fix editor styles Backport to WP Minor Release [Block] HTML [Type] Regression * [#27526](WordPress/gutenberg#27526) - Core Data: Normalize `_fields` value for use in `stableKey` Backport to WP Minor Release [Package] Core data [Type] Bug * [#26705](WordPress/gutenberg#26705) - Fix: Font size picker does not correctly handles big font sizes. Backport to WP Minor Release [Type] Bug * [#26432](WordPress/gutenberg#26432) - Edit Site: prevent inserter overscroll Backport to WP Minor Release First-time Contributor [Feature] Full Site Editing [Type] Bug Packages updated: @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] Fixes #52391. Props gziolo, whyisjake. git-svn-id: https://develop.svn.wordpress.org/branches/5.6@50061 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jan 28, 2021
These are backports coming for the 5.6.1 release. Summary of the following issues: * [#27970](WordPress/gutenberg#27970) - Fix editor crash when registering a block pattern without `categories` Backport to WP Minor Release [Feature] Inserter [Feature] Patterns [Type] Bug * [#27733](WordPress/gutenberg#27733) - [Embed block]: Add html and reusable support back Backport to WP Minor Release [Block] Embed [Type] Regression * [#27727](WordPress/gutenberg#27727) - Add aria labels to box control component inputs/button Backport to WP Minor Release [Feature] UI Components [Package] Components [Type] Bug [a11y] Labelling * [#27627](WordPress/gutenberg#27627) - HTML Block: Fix editor styles Backport to WP Minor Release [Block] HTML [Type] Regression * [#27526](WordPress/gutenberg#27526) - Core Data: Normalize `_fields` value for use in `stableKey` Backport to WP Minor Release [Package] Core data [Type] Bug * [#26705](WordPress/gutenberg#26705) - Fix: Font size picker does not correctly handles big font sizes. Backport to WP Minor Release [Type] Bug * [#26432](WordPress/gutenberg#26432) - Edit Site: prevent inserter overscroll Backport to WP Minor Release First-time Contributor [Feature] Full Site Editing [Type] Bug Packages updated: @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] Fixes #52391. Props gziolo, whyisjake. Built from https://develop.svn.wordpress.org/branches/5.6@50061 git-svn-id: http://core.svn.wordpress.org/branches/5.6@49762 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott
pushed a commit
to gMagicScott/core.wordpress-mirror
that referenced
this pull request
Jan 28, 2021
These are backports coming for the 5.6.1 release. Summary of the following issues: * [#27970](WordPress/gutenberg#27970) - Fix editor crash when registering a block pattern without `categories` Backport to WP Minor Release [Feature] Inserter [Feature] Patterns [Type] Bug * [#27733](WordPress/gutenberg#27733) - [Embed block]: Add html and reusable support back Backport to WP Minor Release [Block] Embed [Type] Regression * [#27727](WordPress/gutenberg#27727) - Add aria labels to box control component inputs/button Backport to WP Minor Release [Feature] UI Components [Package] Components [Type] Bug [a11y] Labelling * [#27627](WordPress/gutenberg#27627) - HTML Block: Fix editor styles Backport to WP Minor Release [Block] HTML [Type] Regression * [#27526](WordPress/gutenberg#27526) - Core Data: Normalize `_fields` value for use in `stableKey` Backport to WP Minor Release [Package] Core data [Type] Bug * [#26705](WordPress/gutenberg#26705) - Fix: Font size picker does not correctly handles big font sizes. Backport to WP Minor Release [Type] Bug * [#26432](WordPress/gutenberg#26432) - Edit Site: prevent inserter overscroll Backport to WP Minor Release First-time Contributor [Feature] Full Site Editing [Type] Bug Packages updated: @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] Fixes #52391. Props gziolo, whyisjake. Built from https://develop.svn.wordpress.org/branches/5.6@50061 git-svn-id: https://core.svn.wordpress.org/branches/5.6@49762 1a063a9b-81f0-0310-95a4-ce76da25c4cd
|
This was shipped in 5.6.1, so removing the backport label: |
talldan
removed
the
Backport to WP Minor Release
VenusPR
added a commit
to VenusPR/Wordpress_Richard
that referenced
this pull request
Mar 9, 2023
These are backports coming for the 5.6.1 release. Summary of the following issues: * [#27970](WordPress/gutenberg#27970) - Fix editor crash when registering a block pattern without `categories` Backport to WP Minor Release [Feature] Inserter [Feature] Patterns [Type] Bug * [#27733](WordPress/gutenberg#27733) - [Embed block]: Add html and reusable support back Backport to WP Minor Release [Block] Embed [Type] Regression * [#27727](WordPress/gutenberg#27727) - Add aria labels to box control component inputs/button Backport to WP Minor Release [Feature] UI Components [Package] Components [Type] Bug [a11y] Labelling * [#27627](WordPress/gutenberg#27627) - HTML Block: Fix editor styles Backport to WP Minor Release [Block] HTML [Type] Regression * [#27526](WordPress/gutenberg#27526) - Core Data: Normalize `_fields` value for use in `stableKey` Backport to WP Minor Release [Package] Core data [Type] Bug * [#26705](WordPress/gutenberg#26705) - Fix: Font size picker does not correctly handles big font sizes. Backport to WP Minor Release [Type] Bug * [#26432](WordPress/gutenberg#26432) - Edit Site: prevent inserter overscroll Backport to WP Minor Release First-time Contributor [Feature] Full Site Editing [Type] Bug Packages updated: @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] @wordpress/[email protected] Fixes #52391. Props gziolo, whyisjake. Built from https://develop.svn.wordpress.org/branches/5.6@50061 git-svn-id: http://core.svn.wordpress.org/branches/5.6@49762 1a063a9b-81f0-0310-95a4-ce76da25c4cd
priethor
added
[Focus] Accessibility (a11y)
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.
Description
The BoxControl component that's used for applying padding to blocks didn't seem to have any labels on inputs or on the link/unlink button, making it difficult for screenreader users to use.
There are probably some further improvements that can be made on top of this (see #27728), but I think it'd be good to improve this component iteratively and ship these basic improvements as soon as possible.
(and I won't actually have time to work on this much more until 2021 😄 ).
How has this been tested?
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist: