feat(a11y): fix focus and tabindex

LottieFiles · Dec 3, 2021 · 0dfecbc · 0dfecbc
1 parent f1c0543
commit 0dfecbc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/src/lottie-player.styles.ts b/src/lottie-player.styles.ts
@@ -17,6 +17,7 @@ export default css`
     --lottie-player-toolbar-icon-active-color: #555;
     --lottie-player-seeker-track-color: #ccc;
     --lottie-player-seeker-thumb-color: rgba(0, 107, 120, 0.8);
+	--lottie-player-seeker-display: block;
 
     display: block;
     width: 100%;
@@ -66,6 +67,15 @@ export default css`
   .toolbar button.active {
     fill: var(--lottie-player-toolbar-icon-active-color);
   }
+  
+  .toolbar button.active:hover {
+	fill: var(--lottie-player-toolbar-icon-hover-color);
+  }
+
+
+  .toolbar button:focus{
+	outline: 1px dotted var(--lottie-player-toolbar-icon-active-color);
+  }
 
   .toolbar button svg {
   }
@@ -79,6 +89,7 @@ export default css`
     width: 95%;
     outline: none;
     background-color: var(--lottie-player-toolbar-background-color);
+	display: var(--lottie-player-seeker-display);
   }
 
   .seeker::-webkit-slider-runnable-track {

diff --git a/src/lottie-player.ts b/src/lottie-player.ts
@@ -577,7 +577,6 @@ export class LottiePlayer extends LitElement {
     return html`
       <div
         id="lottie-controls"
-        lang="en"
         aria-label="lottie-animation-controls"
         class="toolbar"
       >
@@ -586,18 +585,16 @@ export class LottiePlayer extends LitElement {
           @click=${this.togglePlay}
           class=${isPlaying || isPaused ? "active" : ""}
           style="align-items:center;"
-          role="button"
-          tabindex="0"
-          lang="en"
+		  tabindex="0" 
           aria-label="play-pause"
         >
           ${isPlaying
-            ? html`<svg width="24" height="24">
+            ? html`<svg width="24" height="24" aria-hidden="true" focusable="false">
                 <path
                   d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
                 />
               </svg>`
-            : html`<svg width="24" height="24">
+            : html`<svg width="24" height="24" aria-hidden="true" focusable="false">
                 <path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
               </svg>`}
         </button>
@@ -606,12 +603,10 @@ export class LottiePlayer extends LitElement {
           @click=${this.stop}
           class=${isStopped ? "active" : ""}
           style="align-items:center;"
-          role="button"
-          tabindex="1"
-          lang="en"
+		  tabindex="0" 
           aria-label="stop"
         >
-          <svg width="24" height="24"><path d="M6 6h12v12H6V6z" /></svg>
+          <svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z" /></svg>
         </button>
         <input
           id="lottie-seeker-input"
@@ -633,21 +628,18 @@ export class LottiePlayer extends LitElement {
           aria-valuemax="100"
           role="slider"
           aria-valuenow=${this.seeker}
-          tabindex="2"
-          lang="en"
+		  tabindex="0" 
           aria-label="lottie-seek-input"
         />
         <button
           id="lottie-loop-toggle"
           @click=${this.toggleLooping}
           class=${this.loop ? "active" : ""}
-          style="align-items:center;"
-          role="button"
-          tabindex="3"
-          lang="en"
+          style="align-items:center;" 
+		  tabindex="0" 
           aria-label="loop-toggle"
         >
-          <svg width="24" height="24">
+          <svg width="24" height="24" aria-hidden="true" focusable="false">
             <path
               d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
             />