Add accessible description of current Navigation block state #53469
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
getdave
added
[Focus] Accessibility (a11y)
|
Size Change: +149 B (0%) Total Size: 1.5 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 23c7e14e5eb89a9364ec8db3242cf1041e7076ad. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5830821196
|
alexstine
approved these changes
Aug 10, 2023
Thanks Alex. Now we have the approval on the general approach from the a11y front let's refine the technical implementation and get ready for merge. |
getdave
changed the title
scruffian
force-pushed
the
try/nav-block-accessible-description
branch
from
1c78cec
to
3a9f4bf
Compare
|
I pushed a commit to this to make AccessibleDescription a wrapping component. The advantage of this approach is that it makes the implementation simpler - the consumer only has to add the component - there's no need to add the additional props to connect them together. If this isn't a good idea feel free to revert my commit. |
getdave
commented
Aug 10, 2023
packages/block-library/src/navigation/edit/accessible-description.js
Outdated
Show resolved
Hide resolved
getdave
commented
Aug 10, 2023
packages/block-library/src/navigation/edit/accessible-description.js
Outdated
Show resolved
Hide resolved
Can't quite recall how it was before but thanks as what we have now seems fine. I moved it to utilise What do you think about merging this one? |
|
Did another accessibility check. Still looking good. 👍 |
|
@scruffian This one is ready "as is". I know I overwrote your changes but shall we just merge it and then you can follow up with your additional changes? I'm relatively relaxed either way. |
getdave
commented
Aug 11, 2023
Comment on lines
17
to
19
| if ( isPlaceholder ) { | ||
| return children; | ||
| } |
There was a problem hiding this comment.
I don't like that this component has to know about the concept of a placeholder.
getdave
commented
Aug 11, 2023
Comment on lines
677
to
682
| <AccessibleDescription | ||
| id={ accessibleDescriptionId } | ||
| content={ __( 'Unsaved Navigation Menu.' ) } | ||
| isPlaceholder={ isPlaceholder } | ||
| > | ||
| <TagName { ...blockProps }> |
There was a problem hiding this comment.
IMHO this change makes the code more complex and harder to reason about.
Questions I would ask as a developer seeing this for the first time:
- why is this
AccessibleDescriptioncomponent wrapping the main tag? - how does this work (I now need to dive into the code).
- why does the
AccessibleDescriptionneed to know aboutPlaceholder? - what is
accessibleDescriptionIdand why isn't it just part of theAccessibleDescription?
getdave
commented
Aug 11, 2023
There was a problem hiding this comment.
I think the last commit makes the code more complex and harder to reason about.
Whilst there is more verbosity in the original approach it is simpler and clearer and I think that outweighs any benefits derived from the approach in this latest commit.
My opinion is that we revert to the previous state, merge and then follow up if we feel this new approach still has merit.
scruffian
force-pushed
the
try/nav-block-accessible-description
branch
from
23c7e14
to
93e0f7f
Compare
|
Thanks for the review Dave. I have removed my commit, so I think this is good to go! |
scruffian
approved these changes
Aug 11, 2023
Thank you for being open to feedback. I appreciate it 🙇 |
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.
What?
Adds accessible description of current state of the Navigation block.
Closes #47020
Why?
Current accessible feedback is that the current state of the block is not easily perceivable.
How?
Adds a description indicating which Navigation Menu is currently being used.
Testing Instructions
Saved Menu state
Accessibilitypanel in devtools to check description reads "Navigation Menu: %%MENU_NAME%%".Unsaved Block State (no menu)
Accessibilitypanel in devtools to check description reads "Unsaved Navigation Menu".Testing Instructions for Keyboard
Screenshots or screencast