Details Block: Inner Blocks Cannot Be Focused Using Only The Keyboard

by ADMIN 70 views

Accessibility Issues in Gutenberg Blocks

In the world of web development, accessibility is a crucial aspect of creating user-friendly interfaces. Gutenberg, the block-based editor in WordPress, has made significant strides in improving accessibility. However, there are still areas that require attention. One such issue is the Details block, which has been reported to have a problem with keyboard navigation.

The Issue with the Details Block

The Details block is a fundamental component in Gutenberg, allowing users to create collapsible content sections. However, as reported in the GitHub issue #65603, the block's behavior has been modified to remove the automatic opening and closing of contents when the block is selected. While this change aimed to resolve issues with dragging and dropping blocks, it introduced a new accessibility problem.

Keyboard Navigation Issues

The issue lies in the fact that keyboard users cannot access the inner blocks of the Details block. The contents inside the block can only be opened and closed by clicking the summary element with the mouse pointer. This means that users relying on keyboard navigation are unable to interact with the inner blocks, which is a significant accessibility concern.

Step-by-Step Reproduction Instructions

To reproduce this issue, follow these steps:

  1. Add a new post: Create a new post in the WordPress editor.
  2. Insert details block: Insert a Details block into the post.
  3. Notice how focus lands in the summary title field: Observe that the focus is in the summary title field.
  4. Try to move to the hidden paragraph: Attempt to move the focus to the hidden paragraph.
  5. Impossible because the block is collapsed: The focus cannot be moved because the block is collapsed.
  6. Try to expand the block with the keyboard: Attempt to expand the block using the keyboard.
  7. Impossible because there is no exposed expander/trigger due to the overriding of semantics for screen readers: There is no exposed expander/trigger, making it impossible to expand the block using the keyboard.
  8. Open the list view: Open the list view of the blocks.
  9. Expand the details block in the tree: Expand the Details block in the tree view.
  10. Try to select the paragraph block: Attempt to select the paragraph block.
  11. Block is announced as selected but focus doesn't move since it is not exposed in the canvas: The block is announced as selected, but the focus does not move because it is not exposed in the canvas.

Screenshots, Screen Recording, Code Snippet

Unfortunately, there are no screenshots, screen recordings, or code snippets provided to further illustrate this issue.

Environment Info

There is no environment info provided, which would be helpful in reproducing the issue.

Confirmation of Search and Testing

The reporter has confirmed that they have searched existing issues in the repository and tested with all plugins deactivated except Gutenberg.

Theme Type Used for Testing

The reporter has not confirmed which theme type was used for testing.

Conclusion

The Details block in Gutenberg has a significant accessibility issue with keyboard navigation. Users relying on keyboard navigation are unable to access inner blocks of the Details block, which is a major concern. To resolve this issue, the Gutenberg team needs to revisit the behavior of the Details block and ensure that keyboard users can interact with the inner blocks. This will require a thorough analysis of the block's behavior and the implementation of a solution that addresses the accessibility concerns.

Recommendations

To resolve this issue, the following recommendations can be made:

  1. Revisit the behavior of the Details block: The Gutenberg team should revisit the behavior of the Details block and ensure that it is accessible to keyboard users.
  2. Implement a solution for keyboard navigation: A solution should be implemented to allow keyboard users to interact with the inner blocks of the Details block.
  3. Provide clear instructions for developers: Clear instructions should be provided to developers on how to implement the Details block in a way that is accessible to keyboard users.
  4. Test the solution thoroughly: The solution should be thoroughly tested to ensure that it is accessible and functional for all users.

Q: What is the Details block accessibility issue?

A: The Details block accessibility issue is a problem with keyboard navigation in the Gutenberg editor. When a user selects a Details block, the contents inside the block can only be opened and closed by clicking the summary element with the mouse pointer. This means that users relying on keyboard navigation are unable to interact with the inner blocks.

Q: Why is this issue a problem?

A: This issue is a problem because it affects users who rely on keyboard navigation, such as those with mobility or dexterity impairments. These users are unable to access the inner blocks of the Details block, which can make it difficult for them to create and edit content.

Q: What is the current behavior of the Details block?

A: The current behavior of the Details block is that it automatically opens and closes the contents inside the block when the block is selected. However, this behavior was removed by the Gutenberg team after users reported issues with dragging and dropping blocks.

Q: What is the proposed solution to this issue?

A: The proposed solution to this issue is to revisit the behavior of the Details block and ensure that it is accessible to keyboard users. This may involve implementing a solution that allows keyboard users to interact with the inner blocks of the Details block.

Q: How can developers help to resolve this issue?

A: Developers can help to resolve this issue by following best practices for accessibility and implementing solutions that are accessible to keyboard users. This may involve using ARIA attributes to provide a clear and consistent user experience for keyboard users.

Q: What are the benefits of resolving this issue?

A: Resolving this issue will benefit users who rely on keyboard navigation, such as those with mobility or dexterity impairments. It will also improve the overall accessibility of the Gutenberg editor and make it more inclusive for all users.

Q: How can users report accessibility issues?

A: Users can report accessibility issues by creating a new issue in the Gutenberg repository on GitHub. This will help the Gutenberg team to identify and prioritize accessibility issues and ensure that they are addressed in future releases.

Q: What is the role of the Gutenberg team in resolving this issue?

A: The Gutenberg team plays a crucial role in resolving this issue. They are responsible for implementing solutions that are accessible to keyboard users and ensuring that the Gutenberg editor meets the highest standards of accessibility.

Q: How can users get involved in resolving this issue?

A: Users can get involved in resolving this issue by contributing to the Gutenberg repository on GitHub. This may involve reporting accessibility issues, providing feedback on proposed solutions, or contributing code to implement accessibility features.

Q: What are the next steps in resolving this issue?

A: The next steps in resolving this issue are to revisit the behavior of the Details block and implement a solution that is accessible to keyboard users. This will involve working with the Gutenberg team and other contributors to ensure that the solution meets the highest standards of accessibility.

By following these next, we can ensure that the Gutenberg editor is accessible to all users, including those who rely on keyboard navigation.