feat(tab-list): autofocus, :before/after processing, visual test

adobe · Dec 17, 2019 · 83dddb0 · 83dddb0
1 parent c7ea803
commit 83dddb0
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 8 deletions.
diff --git a/packages/shared/src/focusable.ts b/packages/shared/src/focusable.ts
@@ -82,7 +82,8 @@ export class Focusable extends FocusVisiblePolyfillMixin(LitElement) {
         }
     }
 
-    protected firstUpdated(): void {
+    protected firstUpdated(changes: PropertyValues): void {
+        super.firstUpdated(changes);
         this.manageAutoFocus();
 
         this.addEventListener('focusin', (event) => {

diff --git a/packages/tab-list/package.json b/packages/tab-list/package.json
@@ -41,6 +41,7 @@
         "@spectrum-css/tabs": "^2.1.1"
     },
     "dependencies": {
+        "@spectrum-web-components/shared": "^0.3.3",
         "@spectrum-web-components/tab": "^0.2.2",
         "tslib": "^1.10.0"
     }

diff --git a/packages/tab-list/src/tab-list.ts b/packages/tab-list/src/tab-list.ts
@@ -12,13 +12,13 @@ governing permissions and limitations under the License.
 
 import {
     html,
-    LitElement,
     property,
     CSSResultArray,
     TemplateResult,
     PropertyValues,
 } from 'lit-element';
 import { Tab } from '@spectrum-web-components/tab';
+import { Focusable } from '@spectrum-web-components/shared';
 
 import tabStyles from './tab-list.css.js';
 
@@ -33,7 +33,7 @@ const availableArrowsByDirection = {
  * @attr {Boolean} compact - The collection of tabs take up less space
  */
 
-export class TabList extends LitElement {
+export class TabList extends Focusable {
     public static get styles(): CSSResultArray {
         return [tabStyles];
     }
@@ -67,6 +67,17 @@ export class TabList extends LitElement {
 
     private tabs: Tab[] = [];
 
+    public get focusElement(): Tab {
+        return (this.querySelector('[tabindex="0"]') ||
+            this.querySelector('sp-tab')) as Tab;
+    }
+
+    protected manageAutoFocus(): void {
+        const tabs = [...this.querySelectorAll('[role="tab"]')] as Tab[];
+        const tabUpdateCompletes = tabs.map((tab) => tab.updateComplete);
+        Promise.all(tabUpdateCompletes).then(() => super.manageAutoFocus());
+    }
+
     protected render(): TemplateResult {
         return html`
             <slot
@@ -100,10 +111,12 @@ export class TabList extends LitElement {
     }
 
     public startListeningToKeyboard = (): void => {
+        console.warn('start');
         this.addEventListener('keydown', this.handleKeydown);
     };
 
     public stopListeningToKeyboard = (): void => {
+        console.warn('stop');
         this.removeEventListener('keydown', this.handleKeydown);
     };
 
@@ -186,7 +199,7 @@ export class TabList extends LitElement {
     }
 
     private updateSelectionIndicator(): void {
-        const selectedElement = this.querySelector('[selected]');
+        const selectedElement = this.querySelector('[selected]') as Tab;
         if (!selectedElement) {
             return;
         }

diff --git a/packages/tab/src/spectrum-tab.css b/packages/tab/src/spectrum-tab.css
@@ -64,7 +64,7 @@ slot[name='icon'] + #itemLabel {
             var(--spectrum-global-dimension-size-40)
     );
 }
-:host(:before) {
+:host:before {
     /* .spectrum-Tabs-item:before */
     content: '';
     position: absolute;
@@ -151,7 +151,7 @@ slot[name='icon'] + #itemLabel {
         var(--spectrum-alias-text-color-hover)
     );
 }
-:host(:focus-visible:before) {
+:host(:focus-visible):before {
     /* .spectrum-Tabs-item.focus-ring:before */
     border-color: var(
         --spectrum-tabs-focus-ring-color,

diff --git a/packages/tab/stories/tabs.stories.ts b/packages/tab/stories/tabs.stories.ts
@@ -28,6 +28,16 @@ storiesOf('Tabs', module)
             </sp-tab-list>
         `;
     })
+    .add('Autofocus', () => {
+        return html`
+            <sp-tab-list selected="1" autofocus>
+                <sp-tab label="Tab 1" value="1"></sp-tab>
+                <sp-tab label="Tab 2" value="2"></sp-tab>
+                <sp-tab label="Tab 3" value="3"></sp-tab>
+                <sp-tab label="Tab 4" value="4"></sp-tab>
+            </sp-tab-list>
+        `;
+    })
     .add('Vertical', () => {
         return html`
             <sp-tab-list selected="1" direction="vertical">

diff --git a/scripts/process-spectrum-postcss-plugin.js b/scripts/process-spectrum-postcss-plugin.js
@@ -126,8 +126,8 @@ class SpectrumProcessor {
                         node.remove();
                         // Pseudo-elements go after the host selector `:host::before` or `:host([attr])::after`.
                         if (
-                            node.value === '::before' ||
-                            node.value === '::after'
+                            node.value.match(/before$/) !== null ||
+                            node.value.match(/after$/) !== null
                         ) {
                             result.insertAfter(host, node);
                         } else {

diff --git a/test/visual/screenshots-baseline/ci/tabs--autofocus.png b/test/visual/screenshots-baseline/ci/tabs--autofocus.png
diff --git a/test/visual/stories.js b/test/visual/stories.js
@@ -106,6 +106,7 @@ module.exports = [
     'switch--disabled',
     'switch--disabled-checked',
     'tabs--default',
+    'tabs--autofocus',
     'tabs--vertical',
     'tabs--icons',
     'tabs--icons-ii',