Merge branch 'main' into fix/card-footer-avatar

lmc-eu · Jan 23, 2025 · 383ec03 · 383ec03
2 parents b0712c4 + 9f5f7d1
commit 383ec03
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 35 deletions.
diff --git a/packages/web-react/src/components/Tabs/TabItem.tsx b/packages/web-react/src/components/Tabs/TabItem.tsx
@@ -25,7 +25,7 @@ const TabItem = ({ children, forTabPane, onClick, ...restProps }: TabItemProps):
   };
 
   return (
-    <li className={classProps.item}>
+    <li className={classProps.item} role="presentation">
       <button
         {...transferProps}
         {...styleProps}

diff --git a/packages/web-react/src/components/Tabs/__tests__/TabItem.test.tsx b/packages/web-react/src/components/Tabs/__tests__/TabItem.test.tsx
@@ -11,6 +11,14 @@ describe('TabItem', () => {
 
   restPropsTest((props) => <TabItem forTabPane={0} {...props} />, 'button');
 
+  it('should render list item', () => {
+    render(<TabItem forTabPane={0} />);
+
+    const element = screen.getByRole('presentation');
+
+    expect(element).toHaveClass('Tabs__item');
+  });
+
   it('should render button tag when there is no href prop', () => {
     render(<TabItem forTabPane={0} />);
 

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>
 

diff --git a/packages/web/src/scss/components/Tabs/README.md b/packages/web/src/scss/components/Tabs/README.md
@@ -4,7 +4,7 @@ Example usage:
 
 ```html
 <ul class="Tabs" role="tablist">
-  <li class="Tabs__item">
+  <li class="Tabs__item" role="presentation">
     <button
       class="Tabs__link is-selected"
       role="tab"
@@ -17,7 +17,7 @@ Example usage:
       Item 1
     </button>
   </li>
-  <li class="Tabs__item">
+  <li class="Tabs__item" role="presentation">
     <button
       class="Tabs__link"
       role="tab"
@@ -30,10 +30,10 @@ Example usage:
       Item 2
     </button>
   </li>
-  <li class="Tabs__item">
+  <li class="Tabs__item" role="presentation">
     <a href="https://www.example.com" class="Tabs__link">Item Link</a>
   </li>
-  <li class="Tabs__item d-none d-desktop-block">
+  <li class="Tabs__item d-none d-desktop-block" role="presentation">
     <a href="https://www.example.com" class="Tabs__link">Item Link Only Desktop</a>
   </li>
 </ul>
@@ -47,7 +47,7 @@ Example usage:
 A tab item can be a link that follows a URL:
 
 ```html
-<li class="Tabs__item">
+<li class="Tabs__item" role="presentation">
   <a href="https://www.example.com" class="Tabs__link"> Link item </a>
 </li>
 ```
@@ -58,7 +58,7 @@ Individual tab items can take on properties that ensure their visibility from a
 certain breakpoint up, preferably using Spirit utility classes.
 
 ```html
-<li class="Tabs__item d-none d-desktop-block">
+<li class="Tabs__item d-none d-desktop-block" role="presentation">
   <button
     class="Tabs__link is-selected"
     role="tab"

diff --git a/packages/web/src/scss/components/Tabs/index.html b/packages/web/src/scss/components/Tabs/index.html
@@ -9,7 +9,7 @@ <h2 class="docs-Heading">Default</h2>
     <div class="docs-Stack docs-Stack--stretch">
 
       <ul class="Tabs" role="tablist">
-        <li class="Tabs__item">
+        <li class="Tabs__item" role="presentation">
           <button
             class="Tabs__link is-selected"
             role="tab"
@@ -23,7 +23,7 @@ <h2 class="docs-Heading">Default</h2>
             Item 1
           </button>
         </li>
-        <li class="Tabs__item">
+        <li class="Tabs__item" role="presentation">
           <button
             class="Tabs__link"
             role="tab"
@@ -37,10 +37,10 @@ <h2 class="docs-Heading">Default</h2>
             Item 2
           </button>
         </li>
-        <li class="Tabs__item">
+        <li class="Tabs__item" role="presentation">
           <a href="https://www.example.com" class="Tabs__link">Item link</a>
         </li>
-        <li class="Tabs__item d-none d-desktop-block">
+        <li class="Tabs__item d-none d-desktop-block" role="presentation">
           <a href="https://www.example.com" class="Tabs__link">Item link, desktop only</a>
         </li>
       </ul>
@@ -71,7 +71,7 @@ <h2 class="docs-Heading">Custom Spacing</h2>
           role="tablist"
           style="--tabs-spacing: var(--spirit-space-500); --tabs-spacing-tablet: var(--spirit-space-1000); --tabs-spacing-desktop: var(--spirit-space-1600)"
       >
-        <li class="Tabs__item">
+        <li class="Tabs__item" role="presentation">
           <button
             class="Tabs__link is-selected"
             role="tab"
@@ -85,7 +85,7 @@ <h2 class="docs-Heading">Custom Spacing</h2>
             Item 1
           </button>
         </li>
-        <li class="Tabs__item">
+        <li class="Tabs__item" role="presentation">
           <button
             class="Tabs__link"
             role="tab"
@@ -99,10 +99,10 @@ <h2 class="docs-Heading">Custom Spacing</h2>
             Item 2
           </button>
         </li>
-        <li class="Tabs__item">
+        <li class="Tabs__item" role="presentation">
           <a href="https://www.example.com" class="Tabs__link">Item link</a>
         </li>
-        <li class="Tabs__item d-none d-desktop-block">
+        <li class="Tabs__item d-none d-desktop-block" role="presentation">
           <a href="https://www.example.com" class="Tabs__link">Item link, desktop only</a>
         </li>
       </ul>