Add screen reader instructions for navigating child blocks on block selection #39558
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
…te or add child blocks.
alexstine
added
[Type] Enhancement
|
Size Change: +278 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
talldan
reviewed
Mar 28, 2022
There was a problem hiding this comment.
Good idea to add these descriptions to improve usability.
I could see more descriptions being added here (like the block locking one I mentioned), so it could be worth moving the functionality to a React hook (useBlockAriaDescription( clientId )).
When I tested using Safari and Voiceover, it seemed like the description wasn't consistently announced. It did work on columns (as mentioned in the PR description), but not on group.
Comment on lines
128
to
134
| : sprintf( | ||
| // translators: 1: Block title to lowercase for better sentence structure. | ||
| __( | ||
| 'Press Tab followed by Enter to add a child block of the %s block.' | ||
| ), | ||
| blockTitle.toLowerCase() | ||
| ); |
There was a problem hiding this comment.
I think it's also worth checking if the block list is locked before adding this description, as that would make it impossible to add blocks.
I think the locked status is stored in the block list settings. There's a getTemplateLock selector which can return values like 'insert', 'all', or false. Generally a truthy value means insertion isn't possible.
Probably another description explaining the lock might be useful in this situation, as some users might be used to adding children to blocks like group and columns, and it'll be unexpected when they can't.
@Mamaduka is currently working on the locking functionality and might be interested in this.
There was a problem hiding this comment.
Seems like this feature isn't fully implemented yet but I did add a check for it.
| @@ -148,6 +169,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { | |||
| tabIndex: 0, | |||
| role: 'document', | |||
| 'aria-label': blockLabel, | |||
| 'aria-description': blockListSettings ? blockDescription : undefined, | |||
There was a problem hiding this comment.
It looks like blockListSettings is being used to determine whether the block supports child blocks here.
I wonder if it's worth adding a hasInnerBlockList selector function to the block editor store. It could be used here to make this code a bit more readable. It would also make future refactoring of code easier if the way existence of a block list is determined changes.
From memory, I think @youknowriad has also run into this before, and there might be some pitfalls I'm unaware of.
There was a problem hiding this comment.
There's a difference between: my block is a container block and my block has a non empty list of inner blocks. I guess we might need both. For the latter !! getBlock( clientId )?.innerBlocks?.length might be sufficient.
alexstine
commented
Mar 29, 2022
| if ( hasChildBlocks ) { | ||
| description = sprintf( | ||
| // Translators: 1: The block title to lowercase for good sentence structure. | ||
| __( 'Child block of %1$s.' ), |
There was a problem hiding this comment.
@youknowriad @talldan Maybe I should use getBlocks() instead so I can compare the index? The issue is, I cannot tell if I am in a parent block or not. E.g. columns block with equal split column blocks. If I select the columns block, I hear "Child of columns." Can I, in code, detect the difference between parent block and where child blocks actually start?
The other thing to work out is detecting if a block supports child blocks. For example, the paragraph block. In another update, I want to exclude the paragraph block or any block that doesn't have support for child blocks. That way I can add instructions for say the group/columns blocks without having to hear those announced for the paragraph block. Is there some code I can use to see if a block supports child blocks?
There was a problem hiding this comment.
I think I have this fixed up now. Logic may need help.
…ouncement for blocks that do not need it.
…lumns-block-accessibility
|
This is annoying. 👎 |
|
I think React 18 will be released soon; not sure how much work it will be for us to update, but Riad created testing PR. |
|
I think this is blocked until then. The aria-description attribute is easiest. The aria-describedby attribute would take some real work. |
|
React 18 was just released - https://reactjs.org/blog/2022/03/29/react-v18.html 😄 |
…lumns-block-accessibility
|
@Mamaduka You have any idea if React upgrade happened yet or not? My poor stale PR... |
|
@alexstine, it's in progress #45235. Unfortunately, some tests are failing for React 18, which needs to be resolved first. |
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?
This PR adds aria-description text for useBlockProps and useBlocksInnerProps.
Why?
When screen reader users insert certain types of blocks such as a group block for example, the content is empty. There are no instructions telling users how to interact with the block they just inserted.
How?
This PR adds aria-description with simple instructions on how to add a block or navigate child blocks.
Testing Instructions
Screenshots or screencast