Contrib.social

[Siteimprove] Role not inside the required context

Open on Drupal.org →
Created on 17 April 2024, 7 months ago
Updated 13 May 2024, 6 months ago

Problem/Motivation

Siteimprove is reporting an error: "Role not inside the required context", being caused by the IU Framework tabs component.

This page element has a role="tab" that only makes sense in the context of another role="tablist".

Steps to reproduce

The following example code triggers this issue:

<nav aria-labelledby="tabs-1-label">
  <h2 id="tabs-1-label">IU Framework Tabs example</h2>
  <ul class="tabs" data-tabs id="tabs-1">
    <li class="tabs-title is-active">
      <a href="#panel-one" aria-selected="true">Tab One</a>
    </li>
    <li class="tabs-title">
      <a href="#panel-two">Tab Two</a>
    </li>
    <li class="tabs-title">
      <a href="#panel-three">Tab Three</a>
    </li>
  </ul>
</nav>
<div class="tabs-content" data-tabs-content="tabs-1">
  <div class="tabs-panel is-active" id="panel-one">Panel One content</div>
  <div class="tabs-panel" id="panel-two">Panel Two content</div>
  <div class="tabs-panel" id="panel-three">Panel Three content</div>
</div>

Proposed resolution

We’re including the Tabs plugin javascript from the Zurb Foundation 6.2.4 in the iu_paragraphs module to complete the functionality missing from IU Framework. This version of the plugin has no mention of tablist role getting added to the parent element.

It appears the tablist role fix was introduced in version 6.3.0 of foundation.tabs.js therefore the suggested approach is to update foundation to 6.3.0.

I've setup two codepens demonstrating the difference between the two:

If you examine the diff of the generated DOM (after JS runs) you can see the issue is actually fixed:

❯ diff -u tabs.6.4.2.html tabs.6.3.0.html
--- tabs.6.4.2.html	2024-04-17 08:04:43.638126421 -0500
+++ tabs.6.3.0.html	2024-04-17 08:03:41.955448619 -0500
@@ -1,7 +1,7 @@
 <nav aria-labelledby="tabs-1-label">
   <h2 id="tabs-1-label">IU Framework Tabs example</h2>
-  <p>Zurb Foundation 6.2.4 - Tabs plugin</p>
-  <ul class="tabs" data-tabs="eelnk8-tabs" id="tabs-1">
+  <p>Zurb Foundation 6.3.0 - Tabs plugin</p>
+  <ul class="tabs" data-tabs="30alnn-tabs" id="tabs-1" role="tablist">
     <li class="tabs-title is-active" role="presentation">
       <a href="#panel-one" aria-selected="true" role="tab"
         aria-controls="panel-one" id="panel-one-label">Tab One</a>

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

2.1

Component

Code

Created by

🇪🇨Ecuador jwilson3

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