Accessibility - Keyboard Commands Tabbing after first row blocked

Created on 12 January 2024, 11 months ago
Updated 26 February 2024, 9 months ago

Problem/Motivation

Auditing view accordions for 508 and ARIA compliance it would appear that the 2.0 release has incorporated ARIA attributes and states! AWESOME JOB!
Almost all other accordion and menu modules ignore all of it. :(

The problem I'm seeing is that the header rendering only provide a tab="0" for the first row and sets all of the rest to tab="-1" blocking keyboard control of any content but the first row (which often times is open by default)

Steps to reproduce

Render a views accordion and tab above the accordion. Attempt to tab on a row and press space bar or enter to expand it. Attempting to tab to a second row totally bypasses the rest of the content. Blocking keyboard users from viewing any content.

Proposed resolution

Change tab value to "1" or have it count each based on result set of the view.

Standards to Note
https://www.mtu.edu/accessibility/training/web/accordions/
http://web-accessibility.carnegiemuseums.org/code/accordions/

Is there a simple value I can change in the admin for this behavior and or where within the code can I modify it?
Can I extend the behaviors or will it require I patch for the module itself?

💬 Support request
Status

Closed: works as designed

Version

2.0

Component

Documentation

Created by

🇺🇸United States emptyvoid

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @emptyvoid
  • 🇨🇦Canada bisonbleu

    I was able to replicate this issue (the inability to tab-navigate into all accordion panels) on SimplyTest.me.

    In the accordion-header DIV of the View's first row, the tabindex attribute is set to "0", all good there. But in all subsequent rows, the tabindex attribute is set to "-1" which means «skip me». I'm not sure if this is actually breaking any WCAG Success Criteria. But if your building e.g. an FAQ it means that screen readers can only access the content of the first row, and that can't be good.

    Here is the markup of the first 2 rows from my SimplyTest.me test.

    <div class="views-field views-field-title views-accordion-header js-views-accordion-header-b48545e8892d71b4866101dbab4e3da07639644ea873168c86806264a7efe552 ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
        <span class="field-content">Article #3</span>
    </div>
    <div style="height: 85.8px;" class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">
        <div class="views-field views-field-body">
            <div class="field-content">
                <p>Body for Article #3</p>
            </div>
        </div>
    </div>
    
    <div class="views-field views-field-title views-accordion-header js-views-accordion-header-b48545e8892d71b4866101dbab4e3da07639644ea873168c86806264a7efe552 ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        <span class="field-content">Article #2</span>
    </div>
    <div style="display: none; height: 85.8px;" class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true">
        <div class="views-field views-field-body">
            <div class="field-content">
                <p>Body for Article #2</p>
            </div>
        </div>
    </div>
  • 🇨🇦Canada mgifford Ottawa, Ontario

    Just adding a reference for this:
    https://web.dev/articles/control-focus-with-tabindex#remove_an_element_f...

    It is easy enough to test for everyone with a keyboard.

  • Status changed to Closed: works as designed 9 months ago
  • 🇨🇦Canada bisonbleu

    Nothing wrong with views_accordion, works as designed.

    Found useful info which explains how to interact with a website: How to browse websites using a keyboard only

Production build 0.71.5 2024