Merge pull request #1 from web-illinois/jonker/1.0.0-alpha1

Fixing focus states
web-illinois · Sep 6, 2024 · 4b62cec · 4b62cec
2 parents 719a70d + 0f3b9f8
commit 4b62cec
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ The `ilw-tabs` component has the following slots:
 * `tabs`: the list of buttons to display. This slot should only contain the `button` element. 
 
 The `ilw-tabs` component has the following attributes:
-* `theme`: the theme/background of the content. Options are `blue`, `orange`, `gray`, `white`
+* `theme`: the theme/background of the content. Options are `blue`, `gray`, `white`. Defaults to `white`. 
 * `width`: whether or not this is contained in the parent (default), if it will expand to full width (`full`), or if just the background will expand and the text will be in a narrow window (`auto`). 
 * `horizontal`: a boolean attribute that determines if the tabs are displayed in a horizontal view. Use this only if you have a few tabs in the list, as this is limited to a single row and may cause text to be truncated or displayed awkwardly. The default is to list the tabs vertically on the left-hand side, and in mobile view, both views will collapse to an accordion-like view.  
 * `default`: the ID of the tab that should be opened on page load. This will default to the first tab. 
@@ -52,7 +52,7 @@ The `ilw-tabs` component has the following attributes:
 
 ## Accessibility Notes and Use
 
-The tabs are automatically activated when the user chooses an item. 
+The tabs are activated using the ARIA automatic tab pattern.  
 
 Ensure that the buttons and panels are labelled correctly inside the component using the `id` and `aria-labelledby` attributes. IDs should be unique in the HTML document. 
 

diff --git a/builder/ilw-tabs.json b/builder/ilw-tabs.json
@@ -7,5 +7,5 @@
     "description": "This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.",
     "toolkit-version": "",
     "production-version": "",
-    "development-version": "1.0.0-alpha"
+    "development-version": "1.0.0-alpha1"
 }
diff --git a/builder/versions/ilw-tabs.1.0.0-alpha.json → builder/versions/ilw-tabs.1.0.0-alpha1.json b/builder/versions/ilw-tabs.1.0.0-alpha.json → builder/versions/ilw-tabs.1.0.0-alpha1.json
@@ -5,10 +5,10 @@
     "type": "web component",
     "element-name": "ilw-tabs",
     "description": "This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.",
-    "version": "1.0.0-alpha",
+    "version": "1.0.0-alpha1",
     "date": "08/07/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.0-alpha/ilw-tabs.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.0-alpha/ilw-tabs.js",
+    "css": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.0-alpha1/ilw-tabs.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.0-alpha1/ilw-tabs.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 1200px;",

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
     "description": "Illinois Toolkit: This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.",
     "repository": "github:web-illinois/ilw-tabs",
     "private": false,
-    "version": "1.0.0-alpha",
+    "version": "1.0.0-alpha1",
     "type": "module",
     "files": [
         "src/**",

diff --git a/src/ilw-tabs.css b/src/ilw-tabs.css
@@ -1,17 +1,14 @@
 :root {
-    --ilw-tabs--color: white;
     --ilw-tabs--display: flex;
-    --ilw-tabs--background: var(--il-blue);
-    --ilw-tabs--button--color: white;
-    --ilw-tabs--button--color--focus: var(--il-blue);
-    --ilw-tabs--button--background--focus: white;
-    --ilw-tabs--button--color--selected: white;
-    --ilw-tabs--button--background--selected: var(--il-orange);
-    --ilw-tabs--button--color--selected--focus: var(--il-orange);
-    --ilw-tabs--button--background--selected--focus: white;
-    --ilw-tabs--button--border: 2px solid white;
-    --ilw-tabs--tablist--display: flex;
-    --ilw-tabs--tablist--width: 350px;
+    --ilw-tabs--color: black;
+    --ilw-tabs--button-color: var(--il-blue);
+    --ilw-tabs--focus-button-color: white;
+    --ilw-tabs--focus-button-background: var(--il-blue);
+    --ilw-tabs--selected-button-color: #fff;
+    --ilw-tabs--selected-button-background: var(--il-orange);
+    --ilw-tabs--button-border: 2px solid var(--il-blue);
+    --ilw-tabs--tablist-display: flex;
+    --ilw-tabs--tablist-width: 350px;
   }
 
 ilw-tabs {
@@ -27,42 +24,43 @@ ilw-tabs {
 }
 
 ilw-tabs *[slot=tabs] {
-  display: var(--ilw-tabs--tablist--display);
-  width: var(--ilw-tabs--tablist--width);
+  display: var(--ilw-tabs--tablist-display);
+  width: var(--ilw-tabs--tablist-width);
   flex-direction: column;
 }
 
 ilw-tabs *[role=tab] {
     display: inline-block;
     background: var(--ilw-tabs--background);
-    color: var(--ilw-tabs--button--color);
+    color: var(--ilw-tabs--button-color);
     font-family: var(--il-font-sans);
     font-size: 1.1875rem;
     font-weight: 700;
     border: none;
     padding: .75em 1em;
-    border-bottom: var(--ilw-tabs--button--border);
+    border-bottom: var(--ilw-tabs--button-border);
     text-align: left;
 }
 
 ilw-tabs *[role=tab]:first-of-type {
-  border-top: var(--ilw-tabs--button--border);
+  border-top: var(--ilw-tabs--button-border);
 }
 
-ilw-tabs *[role=tab]:hover, ilw-tabs *[role=tab]:focus {
+ilw-tabs *[role=tab]:hover {
       outline: none;
-      color: var(--ilw-tabs--button--color--focus);
-      background: var(--ilw-tabs--button--background--focus);
-    }
+      color: var(--ilw-tabs--focus-button-color);
+      background: var(--ilw-tabs--focus-button-background);
+}
 
 ilw-tabs *[role=tab][aria-selected="true"] {
-      color: var(--ilw-tabs--button--color--selected);
-      background: var(--ilw-tabs--button--background--selected);
+      color: var(--ilw-tabs--selected-button-color);
+      background: var(--ilw-tabs--selected-button-background);
 }
 
-ilw-tabs *[role=tab][aria-selected="true"]:hover, ilw-tabs *[role=tab][aria-selected="true"]:focus {
-        color: var(--ilw-tabs--button--color--selected--focus);
-        background: var(--ilw-tabs--button--background--selected--focus);
+ilw-tabs *[role=tab]:focus {
+  background-color: var(--ilw-link--focus-background-color);
+  color: var(--ilw-link--focus-color);
+  outline: var(--ilw-link--focus-outline);
 }
 
 ilw-tabs *[data-ilw-tab-visible="0"] {
@@ -71,8 +69,8 @@ ilw-tabs *[data-ilw-tab-visible="0"] {
 
   ilw-tabs[horizontal] {
     --ilw-tabs--display: block;
-    --ilw-tabs--tablist--display: block;
-    --ilw-tabs--tablist--width: auto;
+    --ilw-tabs--tablist-display: block;
+    --ilw-tabs--tablist-width: auto;
     }
 
   ilw-tabs[horizontal] *[role=tab] {
@@ -81,28 +79,28 @@ ilw-tabs *[data-ilw-tab-visible="0"] {
 
   @container (max-width: 800px) {
     ilw-tabs *[role=tab] {
-      display: var(--ilw-tabs--tablist--display);
-      width: var(--ilw-tabs--tablist--width);
-      border-bottom: var(--ilw-tabs--button--border);
+      display: var(--ilw-tabs--tablist-display);
+      width: var(--ilw-tabs--tablist-width);
+      border-bottom: var(--ilw-tabs--button-border);
     }
     ilw-tabs[horizontal] *[role=tab] {
-      display: var(--ilw-tabs--tablist--display);
-      width: var(--ilw-tabs--tablist--width);
-      border-bottom: var(--ilw-tabs--button--border);
+      display: var(--ilw-tabs--tablist-display);
+      width: var(--ilw-tabs--tablist-width);
+      border-bottom: var(--ilw-tabs--button-border);
     }
 
     ilw-tabs *[role=tab]:first-of-type {
-      border-top: var(--ilw-tabs--button--border);
+      border-top: var(--ilw-tabs--button-border);
     }
   }
 
   ilw-tabs.ilw-compact *[role=tab] {
     display: flex;
-    border-bottom: var(--ilw-tabs--button--border);
+    border-bottom: var(--ilw-tabs--button-border);
   }
 
   ilw-tabs.ilw-compact *[role=tab]:first-of-type {
-    border-top: var(--ilw-tabs--button--border);
+    border-top: var(--ilw-tabs--button-border);
   }
 
   ilw-tabs h2, ilw-tabs h3, ilw-tabs h4, ilw-tabs h5 {

diff --git a/src/ilw-tabs.js b/src/ilw-tabs.js
@@ -70,6 +70,14 @@ class Tabs extends LitElement {
     handleKeyPress(evt) {
         if (evt.code == 'Enter' || evt.code == 'Space') {
           this.setActiveTab(evt.currentTarget);
+        } else if (evt.code == 'ArrowUp' || evt.code == 'ArrowLeft') {
+            let prev = evt.currentTarget.previousElementSibling;
+            this.setActiveTab(prev);
+            prev.focus();
+        } else if (evt.code == 'ArrowDown' || evt.code == 'ArrowRight') {
+            let next = evt.currentTarget.nextElementSibling;
+            this.setActiveTab(next);
+            next.focus();
         }
     }
 
@@ -97,7 +105,7 @@ class Tabs extends LitElement {
 
     initializeTab(tab) {
         if (!this.tabIsInitialized(tab)) {
-          tab.setAttribute("tabindex", 0);
+          tab.setAttribute("tabindex", -1);
           tab.setAttribute('data-ilw-initialized', '1');
           tab.addEventListener('click', this.handleTabClick);
           tab.addEventListener('keydown', this.handleKeyPress);
@@ -118,26 +126,27 @@ class Tabs extends LitElement {
     }
 
     setActiveTab(activeTab) {
-        console.debug(activeTab);
         this.getAllTabs().forEach(tab => {
           (tab === activeTab) ? this.setTabAsActive(tab) : this.setTabAsInactive(tab)
         });
     }
 
     setTabAsActive(tab) {
         tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute("tabindex", 0);
         this.getTabPanel(tab).setAttribute('data-ilw-tab-visible', '1');
     }
 
     setTabAsInactive(tab) {
         tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute("tabindex", -1);
         this.getTabPanel(tab).setAttribute('data-ilw-tab-visible', '0');
     }
 
     tabIsInitialized(tab) {
         return tab.hasAttribute('data-ilw-initialized');
     }
-        
+
     render() {
         return html`
         <div id="outer" class="${this.theme} ${this.width} ${this.horizontal ? 'horizontal' : ''}">

diff --git a/src/ilw-tabs.styles.js b/src/ilw-tabs.styles.js
@@ -12,37 +12,28 @@ export default css `
 
     #container.white {
         --ilw-tabs--color: black;
-        --ilw-tabs--button--color: var(--il-blue);
-        --ilw-tabs--button--color--focus: white;
-        --ilw-tabs--button--background--focus: var(--il-blue);
-        --ilw-tabs--button--color--selected: var(--il-blue);
-        --ilw-tabs--button--background--selected: var(--il-orange);
-        --ilw-tabs--button--color--selected--focus: white;
-        --ilw-tabs--button--background--selected--focus: var(--il-blue);
-        --ilw-tabs--button--border: 2px solid var(--il-blue);
-        --ilw-button--background-color: #fff;
-        --ilw-button--foreground-color: var(--il-blue);
-        --ilw-button--border-color: var(--il-blue);
-        --ilw-button--focused-background-color: var(--il-blue);
-        --ilw-button--focused-foreground-color: #fff;
-        --ilw-button--focused-border-color: var(--il-blue);
+        --ilw-tabs--button-color: var(--il-blue);
+        --ilw-tabs--button-color--focus: white;
+        --ilw-tabs--focus-button-background: var(--il-blue);
+        --ilw-tabs--selected-button-color: var(--il-blue);
+        --ilw-tabs--selected-button-background: var(--il-orange);
+        --ilw-tabs--button-border: 2px solid var(--il-blue);
     }
-    #container.gray {
-        --ilw-tabs--color: black;
-        --ilw-tabs--button--color: var(--il-blue);
-        --ilw-tabs--button--color--focus: white;
-        --ilw-tabs--button--background--focus: var(--il-blue);
-        --ilw-tabs--button--color--selected: var(--il-blue);
-        --ilw-tabs--button--background--selected: var(--il-orange);
-        --ilw-tabs--button--color--selected--focus: white;
-        --ilw-tabs--button--background--selected--focus: var(--il-blue);
-        --ilw-tabs--button--border: 2px solid var(--il-blue);
-        --ilw-button--background-color: #fff;
-        --ilw-button--foreground-color: var(--il-blue);
-        --ilw-button--border-color: var(--il-blue);
-        --ilw-button--focused-background-color: var(--il-blue);
-        --ilw-button--focused-foreground-color: #fff;
-        --ilw-button--focused-border-color: var(--il-blue);
+    #container.blue {
+        --ilw-tabs--color: white;
+        --ilw-tabs--background: var(--il-blue);
+        --ilw-tabs--button-color: white;
+        --ilw-tabs--button-border: 2px solid white;
+        --ilw-tabs--focus-button-color: var(--il-blue);
+        --ilw-tabs--focus-button-background: white;
+        --ilw-tabs--selected-button-color: white;
+        --ilw-tabs--selected-button-background: var(--il-orange);
+        --ilw-button--background-color: var(--il-blue);
+        --ilw-button--foreground-color: #fff;
+        --ilw-button--border-color: #fff;
+        --ilw-button--focused-background-color: #fff;
+        --ilw-button--focused-foreground-color: var(--il-blue);
+        --ilw-button--focused-border-color: #fff;
     }
 
     #outer.white {
@@ -71,20 +62,19 @@ export default css `
     }
 
     .horizontal #tablist {
-        border-bottom: var(--ilw-tabs--button--border);
+        border-bottom: var(--ilw-tabs--button-border);
         margin-bottom: 20px;
     }
 
     #tabpanels {
         width: 100%;
-        margin-top: var(--ilw-tabs--tabpanels--margin-top);
     }
 
     @container (max-width: 800px) {
         #container {
             --ilw-tabs--display: block;
-            --ilw-tabs--tablist--display: flex;
-            --ilw-tabs--tablist--width: auto;
+            --ilw-tabs--tablist-display: flex;
+            --ilw-tabs--tablist-width: auto;
             padding: 60px 20px 75px;
         }
 
@@ -99,8 +89,8 @@ export default css `
     
       #container.compact {
         --ilw-tabs--display: block;
-        --ilw-tabs--tablist--display: flex;
-        --ilw-tabs--tablist--width: auto;
+        --ilw-tabs--tablist-display: flex;
+        --ilw-tabs--tablist-width: auto;
         padding: 60px 20px 75px;
     }