Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Iframe: try role=application #53364

Open
wants to merge 8 commits into
base: trunk
Choose a base branch
from
+10 −2
Open

Iframe: try role=application #53364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e31831f
Iframe: try role=application
ellatrix Aug 4, 2023
8d31694
Try removing document role from useBlockProps to avoid Windows screen…
alexstine Sep 5, 2023
60f81cc
Block contextual toolbar: add role=application
ellatrix Sep 8, 2023
058b9af
iFrame title adjustment.
alexstine Oct 11, 2023
728e9db
Revert toolbar changes.
alexstine Oct 11, 2023
fb2e6a8
Merge branch 'trunk' of github.com:WordPress/gutenberg into try/ifram…
alexstine Nov 6, 2023
7d23eb3
Refresh.
alexstine May 2, 2024
8bc12de
Try using textbox role everywhere by strict comparison of group exclu…
alexstine May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/use-block-props/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
...props,
ref: mergedRefs,
id: `block-${ clientId }${ htmlSuffix }`,
role: 'document',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eliminating this may be actual trouble for a little while until we could work through all blocks and fix any accessibility issues. The problem is, keeping this is hurting us because trying to define a generic role for all the different blocks is not a reasonable solution. For example, this role makes no sense for the paragraph block because the paragraph block is an editable field and this role tells Windows screen readers to go into a mode which is not used for editing text, but navigating the virtual buffer of the page. Removing this also fixes the bug in the navigation block and other dynamic blocks where screen reader switches modes.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we're always overriding the role to document which seems like a bug. Some blocks like paragraph define role=textbox (from rich text), but useBlockProps is overriding this. Maybe we should only set role=document if no role was defined by the block?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ellatrix I don't think that is possible at this point due to my comments around the navigation block. I think this should likely be managed block by block until we can find a suitable role that could work for any type of content. The document role causes Windows screen readers to switch modes and then the keyboard events no longer work in React so it would be good to avoid this pattern. I think it used the group role before this change and it needed to be modified for a bug in JAWS, another Windows screen reader.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're sure about removing role=document from all blocks, I'll update the e2e tests. There's lots of tests depending on this in their selectors.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's wait on a good accessibility review from more people than just me before you commit to that. I will try to wrangle some testing here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could try to change this back to group role but would need to land this first.

#47276

If not, JAWS compatibility may break.

role: 'group',
'aria-label': blockLabel,
'data-block': clientId,
'data-type': name,
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,7 @@ function Iframe( {
// content.
src={ src }
title={ title }
role="application"
onKeyDown={ ( event ) => {
if ( props.onKeyDown ) {
props.onKeyDown( event );
Expand Down
9 changes: 8 additions & 1 deletion packages/block-editor/src/components/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,12 +377,19 @@ export function RichTextWrapper(
) }
<TagName
// Overridable props.
role="textbox"
aria-multiline={ ! disableLineBreaks }
aria-label={ placeholder }
aria-readonly={ shouldDisableEditing }
{ ...props }
{ ...autocompleteProps }
/*
* We'll allow any valid role here except for group.
* Group is defined in the useBlockProps hook so any block calling this hook directly on the RichText component will end up with group role.
* Paragraph block is a good example of this implementation. Could be others.
* Textbox is mainly the only role needed here but the support is there if another role should need to be used.
* Annoying, end of long list of issues.
*/
role={ 'group' === props.role ? 'textbox' : props.role }
ref={ useMergeRefs( [
// Rich text ref must be first because its focus listener
// must be set up before any other ref calls .focus() on
Expand Down
Loading