Problem/Motivation

This is a child issue of Accordion and Tabs paragraph need to be more accessible, where the Accordion and Tabs paragraphs had reported accessibility issues.

The accepted patch didn't include the JS that addressed these issues for the Tabs paragraphs, which attempted to solve the following:

1. ARIA attributes must conform to valid values. The aria-controls attribute of tabs is using the tab panel title instead of the ID.

2. Keyboard navigation is not working as expected. According to the Tabs Pattern , tabs should not be accessible by pressing the Tab key, but using left and key arrows instead.

Proposed resolution

1. Add the expected behavior and keyboard interaction with JS.

Remaining tasks

Review patch.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

oscar.puente created an issue. See original summary.

oscar.puente changed the visibility of the branch 3462200-tab-paragraph-fails to hidden.

oscar.puente’s picture

StatusFileSize
new3.73 KB
oscar.puente’s picture

Status: Active » Needs review

  • thejimbirch committed 0a8e6d39 on 5.0.x
    Issue #3462200 by oscar.puente, thejimbirch: Tab paragraph fails...
thejimbirch’s picture

Status: Needs review » Fixed
Issue tags: -tabs, -Accessibility, -ada, -bootstrap +Accessibility improvements

Merged to dev, thanks!

thejimbirch’s picture

Assigned: oscar.puente » Unassigned

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.