Merge pull request #198 from six-group/fix/add-tabindex-to-language-s…

…witcher Fix/add tabindex to language switcher
six-group · Mar 28, 2024 · 26fafe9 · 26fafe9
2 parents 27d0bb9 + 198c927
commit 26fafe9
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 - Fixed `six-checkbox` checkbox-input being distorted with multiline content/text
 - Fixed `six-sidebar-item-group` to wrap the sidebar text if it gets too long
+- Updated the `six-language-switcher` component to include tabindex attributes for better
+  accessibility.
 
 ## 4.2.1 - 2024-03-14
 

diff --git a/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss b/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss
@@ -14,6 +14,11 @@
       color: var(--six-color-web-rock-600);
     }
 
+    &:focus-visible {
+      outline: var(--six-focus-ring);
+      outline-offset: var(--six-focus-ring-offset);
+    }
+
     &--selected {
       color: var(--six-color-black);
       text-decoration: underline;

diff --git a/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.tsx b/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.tsx
@@ -77,16 +77,25 @@ export class SixLanguageSwitcher {
         {this.languages.map((lang, index) => {
           const language = typeof lang === 'string' ? lang : lang.key;
           return (
-            <div onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}>
+            <div
+              onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();
+                }
+              }}
+            >
               <span
                 part="label"
+                tabindex="0"
                 class={{
                   'language-switcher__label': true,
                   'language-switcher__label--selected': this.selected === language,
                 }}
               >
                 {language}
               </span>
+
               {index < this.languages.length - 1 && (
                 <span part="separator" class="language-switcher__separator">
                   |

diff --git a/...aries/ui-library/src/components/six-language-switcher/test/six-language-switcher.spec.tsx b/...aries/ui-library/src/components/six-language-switcher/test/six-language-switcher.spec.tsx
@@ -19,23 +19,23 @@ describe('SIX Language Switcher', () => {
       <mock:shadow-root>
         <div class="language-switcher__container" part="container">
           <div>
-            <span class="language-switcher__label language-switcher__label--selected" part="label">
+            <span class="language-switcher__label language-switcher__label--selected" part="label" tabindex="0">
               EN
             </span>
             <span class="language-switcher__separator" part="separator">
               |
             </span>
           </div>
           <div>
-            <span class="language-switcher__label" part="label">
+            <span class="language-switcher__label" part="label" tabindex="0">
               DE
             </span>
             <span class="language-switcher__separator" part="separator">
               |
             </span>
           </div>
           <div>
-            <span class="language-switcher__label" part="label">
+            <span class="language-switcher__label" part="label" tabindex="0">
               ES
             </span>
           </div>
@@ -66,23 +66,23 @@ describe('SIX Language Switcher', () => {
       <mock:shadow-root>
         <div class="language-switcher__container" part="container">
           <div>
-            <span class="language-switcher__label language-switcher__label--selected" part="label">
+            <span class="language-switcher__label language-switcher__label--selected" part="label" tabindex="0">
               IT
             </span>
             <span class="language-switcher__separator" part="separator">
               |
             </span>
           </div>
           <div>
-            <span class="language-switcher__label" part="label">
+            <span class="language-switcher__label" part="label" tabindex="0">
               AR
             </span>
             <span class="language-switcher__separator" part="separator">
               |
             </span>
           </div>
           <div>
-            <span class="language-switcher__label" part="label">
+            <span class="language-switcher__label" part="label" tabindex="0">
               BG
             </span>
           </div>
@@ -109,23 +109,23 @@ describe('SIX Language Switcher', () => {
       <mock:shadow-root>
         <div class="language-switcher__container" part="container">
           <div>
-            <span class="language-switcher__label" part="label">
+            <span class="language-switcher__label" part="label" tabindex="0">
               EN
             </span>
             <span class="language-switcher__separator" part="separator">
               |
             </span>
           </div>
           <div>
-            <span class="language-switcher__label language-switcher__label--selected" part="label">
+            <span class="language-switcher__label language-switcher__label--selected" part="label" tabindex="0">
               DE
             </span>
             <span class="language-switcher__separator" part="separator">
               |
             </span>
           </div>
           <div>
-            <span class="language-switcher__label" part="label">
+            <span class="language-switcher__label" part="label" tabindex="0">
               ES
             </span>
           </div>
@@ -156,23 +156,23 @@ describe('SIX Language Switcher', () => {
       <mock:shadow-root>
         <div class="language-switcher__container" part="container">
           <div>
-            <span class="language-switcher__label" part="label">
+            <span class="language-switcher__label" part="label" tabindex="0">
               EN
             </span>
             <span class="language-switcher__separator" part="separator">
               |
             </span>
           </div>
           <div>
-            <span class="language-switcher__label language-switcher__label--selected" part="label">
+            <span class="language-switcher__label language-switcher__label--selected" part="label" tabindex="0">
               DE
             </span>
             <span class="language-switcher__separator" part="separator">
               |
             </span>
           </div>
           <div>
-            <span class="language-switcher__label" part="label">
+            <span class="language-switcher__label" part="label" tabindex="0">
               ES
             </span>
           </div>