Horizontal tabs are not keyboard navigable

Created on 8 May 2025, 4 months ago

Problem/motivation

it is not possible to navigate the horizontal tabs using the keyboard (e.g., tab key). In contrast, the default Bootstrap tab behavior, https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior , is keyboard navigable.

There should be keyboard navigable tabs, using spacebar per https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/

Analysis

This module sets the role="tab" on nav items. Bootstrap markup uses role="presentation." Apparently this is sufficient to change how keyboard navigation works.

Proposed resolution

Switch markup to role="presentation"

This module uses Gitlab CI for automated testing of proposed code changes. To contribute code changes, create a merge request. Patch files will not trigger automated testing and are not sufficient for review.

🐛 Bug report

Status

Active

Version

3.0

Component

Code

Created by

🇺🇸United States mark_fullmer Tucson

Live updates comments and jobs are added and updated live.

Merge Requests

!22Horizontal tabs are not keyboard navigable
Merged
🇺🇸United States mark_fullmer
updated 4 months ago

Comments & Activities

Issue created by @mark_fullmer
Merge request !22Issue #3523398 by mark_fullmer: Horizontal tabs are not keyboard navigable → (Merged) created by mark_fullmer
Pipeline finished with Skipped
4 months ago
#495259
Comment 4 months ago →
🇺🇸United States mark_fullmer Tucson
Pipeline finished with Skipped
4 months ago
#495260
Comment 4 months ago →
System Message

mark_fullmer → committed aa3daa8f on 3.x
Issue #3523398: Horizontal tabs are not keyboard navigable
Comment 4 months ago →
System Message
Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024