Fix(web-react): Add missing presentation role to TabItem and set corr…

…ect TabLink role #DS-1653
lmc-eu · Jan 23, 2025 · 9f5f7d1 · 9f5f7d1
1 parent 66a901b
commit 9f5f7d1
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tabs/TabItem.twig b/packages/web-twig/src/Resources/components/Tabs/TabItem.twig
@@ -8,6 +8,6 @@
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
 
-<li {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames)}}>
+<li {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames)}} role="presentation">
     {% block content %}{% endblock %}
 </li>
diff --git a/packages/web-twig/src/Resources/components/Tabs/TabLink.twig b/packages/web-twig/src/Resources/components/Tabs/TabLink.twig
@@ -12,7 +12,7 @@
 {# Attributes #}
 {%- set _ariaControlsAttr = _targetPaneId ? 'aria-controls="' ~ _targetPaneId | escape('html_attr') ~ '"' : null -%}
 {%- set _dataTargetAttr = _targetPaneId ? 'data-spirit-target="#' ~ _targetPaneId | escape('html_attr') ~ '"' : null -%}
-{%- set _roleAttr = _href ? 'role="tab"' : null -%}
+{%- set _roleAttr = _href ? null : 'role="tab"'  -%}
 {%- set _typeAttr = _href ? null : 'type="button"' -%}
 
 {# Miscellaneous #}

diff --git a/...web-twig/src/Resources/components/Tabs/__tests__/__snapshots__/tabsDefault.twig.snap.html b/...web-twig/src/Resources/components/Tabs/__tests__/__snapshots__/tabsDefault.twig.snap.html
@@ -6,16 +6,16 @@
   </head>
   <body>
     <ul class="Tabs" role="tablist">
-      <li class="Tabs__item">
-        <button id="pane-1-tab" data-spirit-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane-1" data-spirit-target="#pane-1" type="button">Item selected</button>
+      <li class="Tabs__item" role="presentation">
+        <button id="pane-1-tab" data-spirit-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane-1" data-spirit-target="#pane-1" role="tab" type="button">Item selected</button>
       </li>
 
-      <li class="Tabs__item">
-        <button id="pane-2-tab" data-spirit-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane-2" data-spirit-target="#pane-2" type="button">Item</button>
+      <li class="Tabs__item" role="presentation">
+        <button id="pane-2-tab" data-spirit-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane-2" data-spirit-target="#pane-2" role="tab" type="button">Item</button>
       </li>
 
-      <li class="Tabs__item">
-        <a href="https://www.example.com" class="Tabs__link" aria-selected="false" role="tab">Item link</a>
+      <li class="Tabs__item" role="presentation">
+        <a href="https://www.example.com" class="Tabs__link" aria-selected="false">Item link</a>
       </li>
     </ul>
 

diff --git a/...rc/Resources/components/Tabs/__tests__/__snapshots__/tabsWithCustomSpacing.twig.snap.html b/...rc/Resources/components/Tabs/__tests__/__snapshots__/tabsWithCustomSpacing.twig.snap.html
@@ -6,16 +6,16 @@
   </head>
   <body>
     <ul class="Tabs" style="--tabs-spacing: var(--spirit-space-400);" role="tablist">
-      <li class="Tabs__item">
-        <button id="pane-3-tab" data-spirit-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane-3" data-spirit-target="#pane-3" type="button">Item selected</button>
+      <li class="Tabs__item" role="presentation">
+        <button id="pane-3-tab" data-spirit-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane-3" data-spirit-target="#pane-3" role="tab" type="button">Item selected</button>
       </li>
 
-      <li class="Tabs__item">
-        <button id="pane-4-tab" data-spirit-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane-4" data-spirit-target="#pane-4" type="button">Item</button>
+      <li class="Tabs__item" role="presentation">
+        <button id="pane-4-tab" data-spirit-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane-4" data-spirit-target="#pane-4" role="tab" type="button">Item</button>
       </li>
 
-      <li class="Tabs__item">
-        <a href="https://www.example.com" class="Tabs__link" aria-selected="false" role="tab">Item link</a>
+      <li class="Tabs__item" role="presentation">
+        <a href="https://www.example.com" class="Tabs__link" aria-selected="false">Item link</a>
       </li>
     </ul>
 

diff --git a/...onents/Tabs/__tests__/__snapshots__/tabsWithCustomSpacingForEachBreakpoint.twig.snap.html b/...onents/Tabs/__tests__/__snapshots__/tabsWithCustomSpacingForEachBreakpoint.twig.snap.html
@@ -6,16 +6,16 @@
   </head>
   <body>
     <ul class="Tabs" style="--tabs-spacing: var(--spirit-space-400);--tabs-spacing-tablet: var(--spirit-space-800);--tabs-spacing-desktop: var(--spirit-space-1200);" role="tablist">
-      <li class="Tabs__item">
-        <button id="pane-3-tab" data-spirit-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane-3" data-spirit-target="#pane-3" type="button">Item selected</button>
+      <li class="Tabs__item" role="presentation">
+        <button id="pane-3-tab" data-spirit-toggle="tabs" class="Tabs__link is-selected" aria-selected="true" aria-controls="pane-3" data-spirit-target="#pane-3" role="tab" type="button">Item selected</button>
       </li>
 
-      <li class="Tabs__item">
-        <button id="pane-4-tab" data-spirit-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane-4" data-spirit-target="#pane-4" type="button">Item</button>
+      <li class="Tabs__item" role="presentation">
+        <button id="pane-4-tab" data-spirit-toggle="tabs" class="Tabs__link" aria-selected="false" aria-controls="pane-4" data-spirit-target="#pane-4" role="tab" type="button">Item</button>
       </li>
 
-      <li class="Tabs__item">
-        <a href="https://www.example.com" class="Tabs__link" aria-selected="false" role="tab">Item link</a>
+      <li class="Tabs__item" role="presentation">
+        <a href="https://www.example.com" class="Tabs__link" aria-selected="false">Item link</a>
       </li>
     </ul>