[a11y]: Focus Lost After Closing All Tags Modal From TagSet

by ADMIN 60 views

Accessibility Issues in Carbon Design System

The Carbon Design System is a comprehensive toolkit for building accessible and user-friendly interfaces. However, like any complex system, it's not immune to accessibility issues. In this article, we'll delve into a specific problem that affects the TagSet component in the Carbon Design System. We'll explore the issue, its impact on users, and the steps to reproduce it.

Problem Description

When using the TagSet component in the Carbon Design System, users may encounter an issue where the keyboard focus is lost after closing the "All tags" modal. This modal is launched from a TagSet having many tags. The problem arises when the user types the space bar to close the modal, causing the keyboard focus to move to the document root instead of returning to the original focus element.

WCAG 2.1 Violation

The loss of keyboard focus after closing the modal is a violation of the Web Content Accessibility Guidelines (WCAG) 2.1. Specifically, it fails to meet the guidelines for keyboard navigation (WCAG 2.1, Guideline 2.1.1: Keyboard).

Reproduction Steps

To reproduce the issue, follow these steps:

  1. Open the linked storybook: https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-tag-set-tagset--hundreds-of-tags&globals=viewport:basic
  2. Click on the +<number> tag
  3. Click on the View all tags link, then the "All tags" modal is shown
  4. Move focus to the close button on the top-right, then type space to close the modal
  5. Modal disappears (good) and keyboard focus moves to document root (wrong)
    • Keyboard focus should move back to +<number> tag

Impact on Users

The loss of keyboard focus after closing the modal can cause frustration and difficulties for users who rely on keyboard navigation. This issue can affect users with mobility or dexterity impairments, as well as those who prefer to use keyboard navigation for efficiency or convenience.

Code of Conduct

Before reporting this issue, we ensure that we follow the project's Code of Conduct:

Conclusion

The loss of keyboard focus after closing the "All tags" modal from the TagSet component is a significant accessibility issue in the Carbon Design System. This problem affects users who rely on keyboard navigation and can cause frustration and difficulties. By following the reproduction steps and reporting this issue, we can work towards resolving this problem and improving the accessibility of the Carbon Design System.

Recommendations

To resolve this issue, we recommend the following:

  • Update the TagSet component to restore keyboard focus to the original focus element after closing the modal
  • Implement a more robust keyboard navigation system that ensures focus is maintained throughout the component
  • Conduct testing to ensure that the updated component meets the accessibility guidelines and does not introduce new issues

By addressing this issue and implementing the recommended solutions, we can improve the accessibility and usability of the Carbon Design System, making it more inclusive and user-friendly for all users.

Future Work

In the future, we plan to:

  • Conduct a thorough accessibility audit of the Carbon Design System to identify and address other accessibility issues
  • Implement a more comprehensive accessibility testing framework to ensure that the system meets the accessibility guidelines
  • Provide training and resources for developers to ensure that they are aware of accessibility best practices and can implement them effectively

Frequently Asked Questions About the Accessibility Issue in Carbon Design System

In our previous article, we discussed the accessibility issue in the Carbon Design System where the keyboard focus is lost after closing the "All tags" modal from the TagSet component. In this article, we'll answer some frequently asked questions about this issue to provide more clarity and insights.

Q: What is the issue with the TagSet component?

A: The issue is that when the user closes the "All tags" modal by typing the space bar, the keyboard focus is lost and moves to the document root instead of returning to the original focus element.

Q: Why is this issue a problem?

A: This issue is a problem because it affects users who rely on keyboard navigation, including those with mobility or dexterity impairments. It can cause frustration and difficulties for users who need to use keyboard navigation for efficiency or convenience.

Q: How can I reproduce the issue?

A: To reproduce the issue, follow these steps:

  1. Open the linked storybook: https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-tag-set-tagset--hundreds-of-tags&globals=viewport:basic
  2. Click on the +<number> tag
  3. Click on the View all tags link, then the "All tags" modal is shown
  4. Move focus to the close button on the top-right, then type space to close the modal
  5. Modal disappears (good) and keyboard focus moves to document root (wrong)
    • Keyboard focus should move back to +<number> tag

Q: What is the impact of this issue on users?

A: The loss of keyboard focus after closing the modal can cause frustration and difficulties for users who rely on keyboard navigation. This issue can affect users with mobility or dexterity impairments, as well as those who prefer to use keyboard navigation for efficiency or convenience.

Q: How can I report this issue?

A: Before reporting this issue, ensure that you follow the project's Code of Conduct:

Q: What is the recommended solution to this issue?

A: To resolve this issue, we recommend the following:

  • Update the TagSet component to restore keyboard focus to the original focus element after closing the modal
  • Implement a more robust keyboard navigation system that ensures focus is maintained throughout the component
  • Conduct testing to ensure that the updated component meets the accessibility guidelines and does not introduce new issues

Q: What is the future work plan for addressing accessibility issues in Carbon Design System?

A: In the future, we plan to:

  • Conduct a thorough accessibility audit of the Carbon Design System to identify and address other accessibility issues
  • Implement a more comprehensive accessibility testing to ensure that the system meets the accessibility guidelines
  • Provide training and resources for developers to ensure that they are aware of accessibility best practices and can implement them effectively

Q: How can I get involved in addressing accessibility issues in Carbon Design System?

A: If you're interested in getting involved in addressing accessibility issues in Carbon Design System, you can:

  • Join the project's community and participate in discussions
  • Report accessibility issues and provide feedback
  • Contribute to the project's code and help implement accessibility solutions
  • Provide training and resources for developers to ensure that they are aware of accessibility best practices and can implement them effectively

By working together, we can create a more inclusive and user-friendly Carbon Design System that benefits all users.