@playkit-js/transcript 3.1.0-canary.2-d22690c → 3.1.0-canary.3-ca9cf88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.1.0-canary.2-d22690c",
+  "version": "3.1.0-canary.3-ca9cf88",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

package/src/components/caption/caption.tsx

@@ -116,8 +116,8 @@ export class Caption extends Component<ExtendedCaptionProps> {
       <A11yWrapper onClick={this._handleKeyDown}>
         <div
           className={styles.caption}
-          tabIndex={1}
-          area-label={caption.text}
+          tabIndex={0}
+          aria-label={caption.text}
           ref={node => {
             this._hotspotRef = node;
           }}

package/src/components/close-button/index.tsx

@@ -16,7 +16,7 @@ interface CloseButtonProps {
 
 export const CloseButton = withText(translates)((props: CloseButtonProps) => (
   <A11yWrapper onClick={props.onClick}>
-    <button className={styles.closeBtn} tabIndex={1} aria-label={props.closeLabel}>
+    <button className={styles.closeBtn} tabIndex={0} aria-label={props.closeLabel}>
       <Icon
         id="transcript-plugin-close-button"
         height={icons.BigSize}

package/src/components/search/search.tsx

@@ -167,14 +167,14 @@ class SearchComponent extends Component<SearchProps, SearchState> {
           onFocus={this._onFocus}
           onBlur={this._onBlur}
           onMouseDown={this._handleMouseDown}
-          tabIndex={1}
+          tabIndex={0}
           ref={node => {
             this._inputRef = node;
           }}
         />
         {searchQuery && (
           <A11yWrapper onClick={this._onClear}>
-            <button className={styles.clearIcon} tabIndex={1} aria-label={this.props.clearSearchLabel}>
+            <button className={styles.clearIcon} tabIndex={0} aria-label={this.props.clearSearchLabel}>
               <svg
                 width="32px"
                 height="32px"
@@ -201,7 +201,7 @@ class SearchComponent extends Component<SearchProps, SearchState> {
           {searchQuery && (
             <A11yWrapper onClick={this._goToPrevSearchResult}>
               <button
-                tabIndex={1}
+                tabIndex={0}
                 className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
                 aria-label={this.props.prevMatchLabel}>
                 <svg
@@ -225,7 +225,7 @@ class SearchComponent extends Component<SearchProps, SearchState> {
           {searchQuery && (
             <A11yWrapper onClick={this._goToNextSearchResult}>
               <button
-                tabIndex={1}
+                tabIndex={0}
                 className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
                 aria-label={this.props.nextMatchLabel}>
                 <svg

package/src/components/transcript/transcript.tsx

@@ -111,7 +111,7 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
         <div
           role="button"
           className={`${styles.autoscrollButton} ${isAutoScrollEnabled ? '' : styles.autoscrollButtonVisible}`}
-          tabIndex={isAutoScrollEnabled ? -1 : 1}
+          tabIndex={isAutoScrollEnabled ? -1 : 0}
           aria-label={this.props.autoScrollLabel}
           ref={node => {
             this._autoscrollButtonRef = node;
@@ -238,7 +238,7 @@ export class TranscriptComponent extends Component<TranscriptProps, TranscriptSt
         className={styles.skipTranscriptButton}
         onKeyDown={this._handleKeyDown}
         onClick={this._handleClick}
-        tabIndex={1}>
+        tabIndex={0}>
         Skip transcript
       </div>
     );