Contrib.social

Accessbility issue on accordion

Open on Drupal.org →
Created on 9 May 2024, 12 months ago
Updated 5 June 2024, 11 months ago

Problem/Motivation

For WCAG compliance, the widgets need to be accessible which includes keyboard navigation.
Right now, the accordion shortcode is using a pure css solution (based on a hidden checkbox's toggle state) which is simple, but has a few issues;
1. the accordion title is not selectable by keyboard TAB navigation (this can be fixed with tabindex=0)
2. if the title is selected (focused), no way to open / close the accordion content (needs to add javascript to listen on spacebar key event, don't want to use :focus / blur events to auto open / close, because you might tab into the accordion content of the current tab title)
3. when the accordion content is hidden, it is still being selected from TAB. (it's because the CSS is using max-height:0 to hide it. Should add visiblity: hidden).

Steps to reproduce

Add an accordion shortcode in content, with form input or links inside the accordion content.
try to use TAB keyboard navigation.
Expected results:
- when the accordion content is hidden (collapsed), should not be able to tab into it.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

🇨🇦Canada yang_yi_cn

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024