test(e2e): fix focus outline

emdgroup-liquid · Oct 13, 2021 · ec3775f · ec3775f
1 parent 50af16f
commit ec3775f
Show file tree

Hide file tree

Showing 14 changed files with 48 additions and 46 deletions.
diff --git a/src/liquid/components/ld-button/ld-button.tsx b/src/liquid/components/ld-button/ld-button.tsx
@@ -124,7 +124,7 @@ export class LdButton implements InnerFocusable {
         class={cl}
         disabled={this.disabled}
         href={this.href}
-        part="button"
+        part="button focusable"
         ref={(el: HTMLAnchorElement | HTMLButtonElement) => (this.button = el)}
         rel={this.target === '_blank' ? 'noreferrer noopener' : undefined}
         target={this.target}

diff --git a/src/liquid/components/ld-button/test/__snapshots__/ld-button.spec.ts.snap b/src/liquid/components/ld-button/test/__snapshots__/ld-button.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ld-button align text 1`] = `
 <ld-button align-text="right">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--align-text-right" part="button">
+    <button aria-live="polite" class="ld-button ld-button--align-text-right" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -14,7 +14,7 @@ exports[`ld-button align text 1`] = `
 exports[`ld-button as anchor 1`] = `
 <ld-button href="#" target="_blank">
   <mock:shadow-root>
-    <a aria-live="polite" class="ld-button" href="#" part="button" rel="noreferrer noopener" target="_blank">
+    <a aria-live="polite" class="ld-button" href="#" part="button focusable" rel="noreferrer noopener" target="_blank">
       <slot></slot>
     </a>
   </mock:shadow-root>
@@ -25,7 +25,7 @@ exports[`ld-button as anchor 1`] = `
 exports[`ld-button as progress button 1`] = `
 <ld-button progress="0.75">
   <mock:shadow-root>
-    <button aria-busy="true" aria-live="polite" class="ld-button" part="button">
+    <button aria-busy="true" aria-live="polite" class="ld-button" part="button focusable">
       <slot></slot>
       <span class="ld-button__progress" part="progress-bar" style="--ld-button-progress: 0.75;"></span>
     </button>
@@ -37,7 +37,7 @@ exports[`ld-button as progress button 1`] = `
 exports[`ld-button as progress button pending 1`] = `
 <ld-button progress="pending">
   <mock:shadow-root>
-    <button aria-busy="true" aria-live="polite" class="ld-button" part="button">
+    <button aria-busy="true" aria-live="polite" class="ld-button" part="button focusable">
       <slot></slot>
       <span class="ld-button__progress ld-button__progress--pending" part="progress-bar"></span>
     </button>
@@ -49,7 +49,7 @@ exports[`ld-button as progress button pending 1`] = `
 exports[`ld-button danger 1`] = `
 <ld-button mode="danger">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--danger" part="button">
+    <button aria-live="polite" class="ld-button ld-button--danger" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -60,7 +60,7 @@ exports[`ld-button danger 1`] = `
 exports[`ld-button disabled 1`] = `
 <ld-button disabled="">
   <mock:shadow-root>
-    <button aria-disabled="true" aria-live="polite" class="ld-button" disabled="" part="button">
+    <button aria-disabled="true" aria-live="polite" class="ld-button" disabled="" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -71,7 +71,7 @@ exports[`ld-button disabled 1`] = `
 exports[`ld-button ghost 1`] = `
 <ld-button mode="ghost">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--ghost" part="button">
+    <button aria-live="polite" class="ld-button ld-button--ghost" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -82,7 +82,7 @@ exports[`ld-button ghost 1`] = `
 exports[`ld-button highlight 1`] = `
 <ld-button mode="highlight">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--highlight" part="button">
+    <button aria-live="polite" class="ld-button ld-button--highlight" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -93,7 +93,7 @@ exports[`ld-button highlight 1`] = `
 exports[`ld-button justify content 1`] = `
 <ld-button justify-content="end">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--justify-end" part="button">
+    <button aria-live="polite" class="ld-button ld-button--justify-end" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -104,7 +104,7 @@ exports[`ld-button justify content 1`] = `
 exports[`ld-button on-brand-color 1`] = `
 <ld-button mode="on-brand-color">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--on-brand-color" part="button">
+    <button aria-live="polite" class="ld-button ld-button--on-brand-color" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -115,7 +115,7 @@ exports[`ld-button on-brand-color 1`] = `
 exports[`ld-button renders 1`] = `
 <ld-button>
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button" part="button">
+    <button aria-live="polite" class="ld-button" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -126,7 +126,7 @@ exports[`ld-button renders 1`] = `
 exports[`ld-button secondary 1`] = `
 <ld-button mode="secondary">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--secondary" part="button">
+    <button aria-live="polite" class="ld-button ld-button--secondary" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -137,7 +137,7 @@ exports[`ld-button secondary 1`] = `
 exports[`ld-button secondary-on-brand-color 1`] = `
 <ld-button mode="secondary-on-brand-color">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--secondary-on-brand-color" part="button">
+    <button aria-live="polite" class="ld-button ld-button--secondary-on-brand-color" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -148,7 +148,7 @@ exports[`ld-button secondary-on-brand-color 1`] = `
 exports[`ld-button size 1`] = `
 <ld-button size="sm">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--sm" part="button">
+    <button aria-live="polite" class="ld-button ld-button--sm" part="button focusable">
       <slot></slot>
     </button>
   </mock:shadow-root>

diff --git a/src/liquid/components/ld-input-message/readme.md b/src/liquid/components/ld-input-message/readme.md
@@ -86,8 +86,8 @@ This component is meant to be used in conjunction with the [`ld-input`](componen
 
 ## Shadow Parts
 
-| Part     | Description            |
-| -------- | ---------------------- |
+| Part     | Description                 |
+| -------- | --------------------------- |
 | `"icon"` | Image tag used for the icon |
 
 

diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
@@ -139,7 +139,7 @@ export class LdInput implements InnerFocusable {
             onBlur={this.handleBlur}
             onFocus={this.handleFocus}
             onInput={this.handleInput.bind(this)}
-            part="input"
+            part="input focusable"
             placeholder={this.placeholder}
             ref={(el) => (this.input = el)}
             {...cloneAttributes(this.el)}
@@ -161,7 +161,7 @@ export class LdInput implements InnerFocusable {
           onBlur={this.handleBlur}
           onFocus={this.handleFocus}
           onInput={this.handleInput.bind(this)}
-          part="input"
+          part="input focusable"
           placeholder={this.placeholder}
           ref={(el) => (this.input = el)}
           type={this.type}

diff --git a/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap b/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`ld-input renders 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input part="input">
+    <input part="input focusable">
     <slot name="end"></slot>
   </mock:shadow-root>
 </ld-input>
@@ -14,15 +14,15 @@ exports[`ld-input renders as dark input with prop tone set to "dark" 1`] = `
 <ld-input class="ld-input ld-input--dark" tone="dark">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input part="input">
+    <input part="input focusable">
     <slot name="end"></slot>
   </mock:shadow-root>
 </ld-input>
 `;
 
 exports[`ld-input renders type file (multiline) 1`] = `
 <ld-input class="ld-input" multiline="" type="file">
-  <mock:shadow-root><textarea part="input"></textarea>
+  <mock:shadow-root><textarea part="input focusable"></textarea>
     <span class="ld-input__placeholder" part="placeholder"></span>
   </mock:shadow-root>
 </ld-input>
@@ -32,7 +32,7 @@ exports[`ld-input renders type file 1`] = `
 <ld-input class="ld-input" type="file">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input part="input" type="file">
+    <input part="input focusable" type="file">
     <span class="ld-input__placeholder" part="placeholder"></span>
     <slot name="end"></slot>
   </mock:shadow-root>
@@ -43,7 +43,7 @@ exports[`ld-input renders with both slots 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input part="input">
+    <input part="input focusable">
     <slot name="end"></slot>
   </mock:shadow-root>
   <span slot="start">
@@ -59,7 +59,7 @@ exports[`ld-input renders with slot end 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input part="input">
+    <input part="input focusable">
     <slot name="end"></slot>
   </mock:shadow-root>
   <span slot="end">
@@ -72,7 +72,7 @@ exports[`ld-input renders with slot start 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input part="input">
+    <input part="input focusable">
     <slot name="end"></slot>
   </mock:shadow-root>
   <span slot="start">
@@ -85,7 +85,7 @@ exports[`ld-input renders with value 1`] = `
 <ld-input class="ld-input" value="yada-yada">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input part="input" value="yada-yada">
+    <input part="input focusable" value="yada-yada">
     <slot name="end"></slot>
   </mock:shadow-root>
 </ld-input>
@@ -95,7 +95,7 @@ exports[`ld-input updates value prop on value change 1`] = `
 <ld-input class="ld-input" value="yoda-yoda">
   <mock:shadow-root>
     <slot name="start"></slot>
-    <input part="input" value="yoda-yoda">
+    <input part="input focusable" value="yoda-yoda">
     <slot name="end"></slot>
   </mock:shadow-root>
 </ld-input>

diff --git a/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.tsx b/src/liquid/components/ld-select/ld-option-internal/ld-option-internal.tsx
@@ -140,7 +140,7 @@ export class LdOptionInternal {
           onMouseOver={() => (this.hasHover = true)}
           onMouseOut={() => (this.hasHover = false)}
           tabindex="-1"
-          part="option"
+          part="option focusable"
         >
           {this.mode === 'checkbox' ? (
             <div

diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
@@ -886,7 +886,7 @@ export class LdSelect {
             <div
               class={triggerCl}
               role="button"
-              part="btn-trigger"
+              part="btn-trigger focusable"
               tabindex={this.disabled && !this.ariaDisabled ? undefined : '0'}
               aria-disabled={
                 this.disabled || this.ariaDisabled ? 'true' : 'false'
@@ -935,7 +935,7 @@ export class LdSelect {
                                 : undefined
                             }
                             class="ld-select__btn-clear-single"
-                            part="btn-clear-single"
+                            part="btn-clear-single focusable"
                             onClick={(ev) => {
                               this.handleClearSingleClick.call(
                                 this,
@@ -991,7 +991,7 @@ export class LdSelect {
                   }
                   onClick={this.handleClearClick.bind(this)}
                   ref={(el) => (this.btnClearRef = el as HTMLButtonElement)}
-                  part="btn-clear"
+                  part="btn-clear focusable"
                 >
                   <svg
                     class="ld-select__btn-clear-icon"

diff --git a/src/liquid/components/ld-select/readme.md b/src/liquid/components/ld-select/readme.md
@@ -1271,6 +1271,7 @@ The `ld-select` Web Component provides a low level API for integrating it with t
 | `"btn-clear"`            |             |
 | `"btn-clear-single"`     |             |
 | `"btn-trigger"`          |             |
+| `"focusable"`            |             |
 | `"icon-clear"`           |             |
 | `"icon-clear-single"`    |             |
 | `"options-container"`    |             |

diff --git a/src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx b/src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx
@@ -81,7 +81,7 @@ export class LdTab implements InnerFocusable {
         aria-selected={this.selected ? 'true' : undefined}
         class="ld-tab"
         onClick={this.handleTabClick.bind(this)}
-        part="button"
+        part="button focusable"
         ref={(el) => (this.btnRef = el as HTMLButtonElement)}
         role="tab"
         tabindex={this.selected ? undefined : '-1'}

diff --git a/src/liquid/components/ld-tabs/ld-tab/readme.md b/src/liquid/components/ld-tabs/ld-tab/readme.md
@@ -65,6 +65,7 @@ Type: `Promise<void>`
 | ---------------- | ------------------------- |
 | `"button"`       | Actual button element     |
 | `"content"`      | Element wrapping the slot |
+| `"focusable"`    |                           |
 | `"spacer"`       | Both spacer elements      |
 | `"spacer-left"`  | Left spacer element       |
 | `"spacer-right"` | Right spacer element      |

diff --git a/src/liquid/components/ld-tabs/ld-tablist/test/__snapshots__/ld-tablist.spec.ts.snap b/src/liquid/components/ld-tabs/ld-tablist/test/__snapshots__/ld-tablist.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`ld-tablist modifiers mode 1`] = `
   </mock:shadow-root>
   <ld-tab selected="">
     <mock:shadow-root>
-      <button aria-selected="true" class="ld-tab" part="button" role="tab">
+      <button aria-selected="true" class="ld-tab" part="button focusable" role="tab">
         <span class="ld-tab__spacer" part="spacer spacer-left"></span>
         <span class="ld-tab__content" part="content">
           <slot></slot>
@@ -39,7 +39,7 @@ exports[`ld-tablist modifiers mode 1`] = `
   </ld-tab>
   <ld-tab>
     <mock:shadow-root>
-      <button class="ld-tab" part="button" role="tab" tabindex="-1">
+      <button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
         <span class="ld-tab__spacer" part="spacer spacer-left"></span>
         <span class="ld-tab__content" part="content">
           <slot></slot>
@@ -79,7 +79,7 @@ exports[`ld-tablist modifiers rounded 1`] = `
   </mock:shadow-root>
   <ld-tab selected="">
     <mock:shadow-root>
-      <button aria-selected="true" class="ld-tab" part="button" role="tab">
+      <button aria-selected="true" class="ld-tab" part="button focusable" role="tab">
         <span class="ld-tab__spacer" part="spacer spacer-left"></span>
         <span class="ld-tab__content" part="content">
           <slot></slot>
@@ -91,7 +91,7 @@ exports[`ld-tablist modifiers rounded 1`] = `
   </ld-tab>
   <ld-tab>
     <mock:shadow-root>
-      <button class="ld-tab" part="button" role="tab" tabindex="-1">
+      <button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
         <span class="ld-tab__spacer" part="spacer spacer-left"></span>
         <span class="ld-tab__content" part="content">
           <slot></slot>
@@ -131,7 +131,7 @@ exports[`ld-tablist modifiers size 1`] = `
   </mock:shadow-root>
   <ld-tab selected="">
     <mock:shadow-root>
-      <button aria-selected="true" class="ld-tab" part="button" role="tab">
+      <button aria-selected="true" class="ld-tab" part="button focusable" role="tab">
         <span class="ld-tab__spacer" part="spacer spacer-left"></span>
         <span class="ld-tab__content" part="content">
           <slot></slot>
@@ -143,7 +143,7 @@ exports[`ld-tablist modifiers size 1`] = `
   </ld-tab>
   <ld-tab>
     <mock:shadow-root>
-      <button class="ld-tab" part="button" role="tab" tabindex="-1">
+      <button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
         <span class="ld-tab__spacer" part="spacer spacer-left"></span>
         <span class="ld-tab__content" part="content">
           <slot></slot>

diff --git a/src/liquid/components/ld-tabs/test/__snapshots__/ld-tabs.spec.ts.snap b/src/liquid/components/ld-tabs/test/__snapshots__/ld-tabs.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`ld-tabs renders 1`] = `
     </mock:shadow-root>
     <ld-tab id="ld-tabs-0-tab-0" selected="">
       <mock:shadow-root>
-        <button aria-selected="true" class="ld-tab" part="button" role="tab">
+        <button aria-selected="true" class="ld-tab" part="button focusable" role="tab">
           <span class="ld-tab__spacer" part="spacer spacer-left"></span>
           <span class="ld-tab__content" part="content">
             <slot></slot>
@@ -43,7 +43,7 @@ exports[`ld-tabs renders 1`] = `
     </ld-tab>
     <ld-tab id="ld-tabs-0-tab-1">
       <mock:shadow-root>
-        <button class="ld-tab" part="button" role="tab" tabindex="-1">
+        <button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
           <span class="ld-tab__spacer" part="spacer spacer-left"></span>
           <span class="ld-tab__content" part="content">
             <slot></slot>
@@ -55,7 +55,7 @@ exports[`ld-tabs renders 1`] = `
     </ld-tab>
     <ld-tab id="ld-tabs-0-tab-2">
       <mock:shadow-root>
-        <button class="ld-tab" part="button" role="tab" tabindex="-1">
+        <button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
           <span class="ld-tab__spacer" part="spacer spacer-left"></span>
           <span class="ld-tab__content" part="content">
             <slot></slot>
@@ -67,7 +67,7 @@ exports[`ld-tabs renders 1`] = `
     </ld-tab>
     <ld-tab disabled="" id="ld-tabs-0-tab-3">
       <mock:shadow-root>
-        <button aria-disabled="true" class="ld-tab" part="button" role="tab" tabindex="-1">
+        <button aria-disabled="true" class="ld-tab" part="button focusable" role="tab" tabindex="-1">
           <span class="ld-tab__spacer" part="spacer spacer-left"></span>
           <span class="ld-tab__content" part="content">
             <slot></slot>