@playkit-js/transcript 3.0.1 → 3.1.0-canary.0-0df319e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.0.1",
+  "version": "3.1.0-canary.0-0df319e",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -75,14 +75,15 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.0.2",
+    "@playkit-js/common": "^1.0.7",
+    "@playkit-js/ui-managers": "^1.3.1",
     "stream-browserify": "^3.0.0"
   },
   "kaltura": {
     "name": "playkit-js-transcript",
     "dependencies": {
-      "playkit-kaltura-cuepoints": "3.0.0",
-      "playkit-ui-managers": "1.2.2"
+      "playkit-kaltura-cuepoints": "3.0.2",
+      "playkit-ui-managers": "1.3.1"
     }
   }
 }

package/src/components/caption/caption.tsx

@@ -1,10 +1,8 @@
-import * as styles from './caption.scss';
+import {Component, h} from 'preact';
+import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
 import {secontsToTime} from '../../utils';
 import {CuePointData} from '../../types';
-
-const {ENTER, Space} = KalturaPlayer.ui.utils.KeyMap;
-
-import {Component, h} from 'preact';
+import * as styles from './caption.scss';
 
 export interface CaptionProps {
   showTime: boolean;
@@ -26,9 +24,15 @@ interface ExtendedCaptionProps extends CaptionProps {
   isAutoScrollEnabled: boolean;
 }
 
-export class Caption extends Component<ExtendedCaptionProps> {
+interface CaptionState {
+  focused: boolean;
+}
+
+export class Caption extends Component<ExtendedCaptionProps, CaptionState> {
   private _hotspotRef: HTMLElement | null = null;
 
+  state = {focused: false};
+
   componentDidUpdate() {
     if (this._hotspotRef && this.props.shouldScroll) {
       this.props.scrollTo(this._hotspotRef);
@@ -37,12 +41,12 @@ export class Caption extends Component<ExtendedCaptionProps> {
     }
   }
 
-  shouldComponentUpdate(nextProps: ExtendedCaptionProps) {
+  shouldComponentUpdate(nextProps: ExtendedCaptionProps, nextState: CaptionState) {
     const {indexMap, highlighted, isAutoScrollEnabled, activeSearchIndex, longerThanHour, caption} = this.props;
     if (longerThanHour !== nextProps.longerThanHour) {
       return true;
     }
-    if (highlighted !== nextProps.highlighted) {
+    if (highlighted !== nextProps.highlighted || this.state.focused !== nextState.focused) {
       return true;
     }
     if (highlighted && isAutoScrollEnabled !== nextProps.isAutoScrollEnabled) {
@@ -57,12 +61,10 @@ export class Caption extends Component<ExtendedCaptionProps> {
     return false;
   }
 
-  private _handleKeyPress = (event: KeyboardEvent) => {
-    const keyCode = event.which || event.keyCode;
-    if (keyCode === ENTER || keyCode === Space) {
+  private _handleKeyDown = (event: OnClickEvent, byKeyboard?: boolean) => {
+    if (byKeyboard) {
       event.preventDefault();
       this._gotoCurrentTime();
-      return;
     }
   };
 
@@ -111,29 +113,48 @@ export class Caption extends Component<ExtendedCaptionProps> {
     );
   };
 
+  private _handleFocus = () => {
+    this.setState({
+      focused: true
+    });
+  };
+
+  private _handleBlur = () => {
+    this.setState({
+      focused: false
+    });
+  };
+
   render() {
     const {caption, highlighted, showTime, longerThanHour} = this.props;
     const {startTime, id} = caption;
     const isHighlighted = Object.keys(highlighted)[0] === id;
 
+    const captionA11yProps: Record<string, any> = {
+      role: isHighlighted ? 'text' : 'listitem',
+      ariaCurrent: isHighlighted,
+      onFocus: this._handleFocus,
+      onBlur: this._handleBlur,
+      tabIndex: 0,
+      ariaHidden: !(isHighlighted || this.state.focused)
+    };
+
     return (
-      <div
-        className={styles.caption}
-        tabIndex={1}
-        ref={node => {
-          this._hotspotRef = node;
-        }}
-        onKeyDown={this._handleKeyPress}
-      >
-        {showTime && <div className={styles.captionTime}>{secontsToTime(startTime, longerThanHour)}</div>}
+      <A11yWrapper onClick={this._handleKeyDown}>
         <div
-          onClick={this._handleClick}
-          className={`${styles.captionContent} ${isHighlighted ? styles.highlighted : ''} ${showTime ? '' : styles.withoutTime}`}
-          role="button"
-        >
-          {this._renderText(caption.text)}
+          className={styles.caption}
+          ref={node => {
+            this._hotspotRef = node;
+          }}
+          {...captionA11yProps}>
+          {showTime && <div className={styles.captionTime}>{secontsToTime(startTime, longerThanHour)}</div>}
+          <div
+            onClick={this._handleClick}
+            className={`${styles.captionContent} ${isHighlighted ? styles.highlighted : ''} ${showTime ? '' : styles.withoutTime}`}>
+            {this._renderText(caption.text)}
+          </div>
         </div>
-      </div>
+      </A11yWrapper>
     );
   }
 }

package/src/components/caption-list/captionList.tsx

@@ -4,7 +4,7 @@ import {Caption} from '../caption';
 import * as styles from './captionList.scss';
 import {HighlightedMap, CuePointData} from '../../types';
 
-const {End, Home} = KalturaPlayer.ui.utils.KeyMap;
+const {END, HOME} = KalturaPlayer.ui.utils.KeyMap;
 
 export interface CaptionProps {
   showTime: boolean;
@@ -95,9 +95,9 @@ export class CaptionList extends Component<Props> {
   };
 
   private _handleKeyUp = (event: KeyboardEvent) => {
-    if (event.keyCode === End) {
+    if (event.keyCode === END) {
       this._lastCaptionRef?._hotspotRef?.focus();
-    } else if (event.keyCode === Home) {
+    } else if (event.keyCode === HOME) {
       this._firstCaptionRef?._hotspotRef?.focus();
     }
   };
@@ -105,7 +105,7 @@ export class CaptionList extends Component<Props> {
   render() {
     const {data} = this.props;
     return (
-      <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp}>
+      <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp} aria-live="polite">
         {data.map((captionData, index) => {
           const captionProps = this._getCaptionProps(captionData);
           return (
@@ -116,7 +116,7 @@ export class CaptionList extends Component<Props> {
                 } else if (index === data.length - 1) {
                   this._lastCaptionRef = node;
                 }
-                if (captionProps.highlighted) {
+                if (captionProps.highlighted[captionData.id]) {
                   this._currentCaptionRef = node;
                 }
               }}

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

@@ -3,14 +3,20 @@ import * as styles from './close-button.scss';
 import {A11yWrapper} from '@playkit-js/common';
 import {icons} from '../icons';
 const {Icon} = KalturaPlayer.ui.components;
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
+
+const translates = {
+  closeLabel: <Text id="transcript.hide_plugin">Hide Transcript</Text>
+};
 
 interface CloseButtonProps {
   onClick: () => void;
+  closeLabel?: string;
 }
 
-export const CloseButton = (props: CloseButtonProps) => (
+export const CloseButton = withText(translates)((props: CloseButtonProps) => (
   <A11yWrapper onClick={props.onClick}>
-    <button className={styles.closeBtn} tabIndex={1}>
+    <button className={styles.closeBtn} tabIndex={0} aria-label={props.closeLabel}>
       <Icon
         id="transcript-plugin-close-button"
         height={icons.BigSize}
@@ -20,4 +26,4 @@ export const CloseButton = (props: CloseButtonProps) => (
       />
     </button>
   </A11yWrapper>
-);
+));

package/src/components/icons/index.ts

@@ -3,6 +3,10 @@ export namespace icons {
     'M23.1111111,19 C23.6020309,19 24,19.4477153 24,20 C24,20.5522847 23.6020309,21 23.1111111,21 L8.88888889,21 C8.39796911,21 8,20.5522847 8,20 C8,19.4477153 8.39796911,19 8.88888889,19 L23.1111111,19 Z M24.8695652,3 C26.5984566,3 28,4.24720677 28,5.78571429 L28,26.2142857 C28,27.7527932 26.5984566,29 24.8695652,29 L7.13043478,29 C5.40154339,29 4,27.7527932 4,26.2142857 L4,5.78571429 C4,4.24720677 5.40154339,3 7.13043478,3 L24.8695652,3 Z M26,17 L6,17 L6,26.0833333 C6,26.5895944 6.47127921,27 7.05263158,27 L24.9473684,27 C25.5287208,27 26,26.5895944 26,26.0833333 L26,17 Z M8.88888889,23 L23.1111111,23 C23.6020309,23 24,23.4477153 24,24 C24,24.5128358 23.6568532,24.9355072 23.2147743,24.9932723 L23.1111111,25 L8.88888889,25 C8.39796911,25 8,24.5522847 8,24 C8,23.4871642 8.34314684,23.0644928 8.78522567,23.0067277 L8.88888889,23 L23.1111111,23 L8.88888889,23 Z M24.9473684,5 L7.05263158,5 C6.47127921,5 6,5.41040565 6,5.91666667 L6,15 L26,15 L26,5.91666667 C26,5.41040565 25.5287208,5 24.9473684,5 Z';
   export const CLOSE_ICON =
     'M17.9113162,16 L24.6072325,9.30408374 C25.1313645,8.77995172 25.1287183,7.92687249 24.6009229,7.3990771 C24.0694478,6.86760201 23.220227,6.86845682 22.6959163,7.39276754 L16,14.0886838 L9.30408374,7.39276754 C8.77995172,6.86863552 7.92687249,6.8712817 7.3990771,7.3990771 C6.86760201,7.93055219 6.86845682,8.77977302 7.39276754,9.30408374 L14.0886838,16 L7.39276754,22.6959163 C6.86863552,23.2200483 6.8712817,24.0731275 7.3990771,24.6009229 C7.93055219,25.132398 8.77977302,25.1315432 9.30408374,24.6072325 L16,17.9113162 L22.6959163,24.6072325 C23.2200483,25.1313645 24.0731275,25.1287183 24.6009229,24.6009229 C25.132398,24.0694478 25.1315432,23.220227 24.6072325,22.6959163 L17.9113162,16 Z';
+  export const DOWNLOAD_ICON =
+    'M26,25 C26.5522847,25 27,25.4477153 27,26 C27,26.5522847 26.5522847,27 26,27 L26,27 L7,27 C6.44771525,27 6,26.5522847 6,26 C6,25.4477153 6.44771525,25 7,25 L7,25 Z M15.897,20.797 L15.817,20.73 L15.8163834,20.7298413 L8.34305882,13.7298413 C7.93997861,13.3522902 7.91928313,12.7194636 8.29683417,12.3163834 C8.67438521,11.9133032 9.30721188,11.8926077 9.71029209,12.2701587 L15.4996721,17.693 L15.5,6 C15.5,5.48716416 15.8860402,5.06449284 16.3833789,5.00672773 L16.5,5 C17.0522847,5 17.5,5.44771525 17.5,6 L17.4996721,17.694 L23.2951711,12.2699211 C23.6673663,11.9215418 24.2352038,11.9125649 24.6172049,12.230382 L24.7086128,12.3166371 C25.0860237,12.7198486 25.0651082,13.352668 24.6618968,13.7300789 L17.1833629,20.7300789 L17.1610165,20.7503813 L17.1610165,20.7503813 C17.1421868,20.7669999 17.1224361,20.7831339 17.102079,20.7985075 C17.0891381,20.8082894 17.0764369,20.8174134 17.0635772,20.826204 C17.0434306,20.8399634 17.0223437,20.8532674 17.0007451,20.8657864 C16.9872099,20.8736423 16.9734873,20.8811624 16.959633,20.8883367 L16.8877511,20.9220455 L16.8877511,20.9220455 C16.8756318,20.927087 16.8632234,20.9320132 16.8507409,20.9366814 C16.83028,20.9444208 16.8097352,20.9513578 16.7889039,20.9576336 C16.7705976,20.9630349 16.752126,20.968019 16.7335525,20.9724647 C16.6585039,20.9905214 16.5803589,21 16.5,21 C16.4170842,21 16.3365254,20.9899086 16.2594848,20.9708871 C16.2500284,20.9684434 16.2399293,20.9657886 16.2298654,20.9629733 C16.2028024,20.9554899 16.1769173,20.947049 16.1515197,20.9376057 C16.1370523,20.9321598 16.1223107,20.9262914 16.1076867,20.9200585 C16.0832011,20.9096448 16.0596143,20.8984375 16.036557,20.886357 C16.025923,20.8807972 16.0148138,20.8747205 16.0037984,20.8684173 C15.9792921,20.8543502 15.955966,20.8396537 15.9333153,20.8240474 L15.898,20.798 L15.897,20.797 Z M15.867,20.774 L15.888,20.79 L15.8735171,20.7794831 L15.8735171,20.7794831 L15.867,20.774 Z M15.817,20.73 L15.9035191,20.8027045 C15.8784859,20.7840722 15.8543541,20.7642966 15.831201,20.7434548 L15.817,20.73 Z';
+  export const PRINT_ICON =
+    'M21,3 C22.0543618,3 22.9181651,3.81587779 22.9945143,4.85073766 L23,5 L23,9 L26,9 C27.1045695,9 28,9.8954305 28,11 L28,21 C28,22.1045695 27.1045695,23 26,23 L23,23 L23,28 C23,29.1045695 22.1045695,30 21,30 L11,30 C9.8954305,30 9,29.1045695 9,28 L9,23 L6,23 C4.8954305,23 4,22.1045695 4,21 L4,11 C4,9.8954305 4.8954305,9 6,9 L9,9 L9,5 C9,3.9456382 9.81587779,3.08183488 10.8507377,3.00548574 L11,3 L21,3 Z M21,19 L11,19 L11,28 L21,28 L21,19 Z M26,11 L6,11 L6,21 L9,21 L9,19 C8.44771525,19 8,18.5522847 8,18 C8,17.4477153 8.44771525,17 9,17 L23,17 C23.5522847,17 24,17.4477153 24,18 C24,18.5522847 23.5522847,19 23,19 L23,21 L26,21 L26,11 Z M21,5 L11,5 L11,9 L21,9 L21,5 Z';
   export const BigSize = 32;
   export const MediumSize = 24;
   export const SmallSize = 16;

package/src/components/plugin-button/plugin-button.scss

@@ -1,26 +1,7 @@
 @import '../../variables.scss';
 
-.navigationPluginButton,
-.navigationPluginIcon {
-  min-height: 36px;
-  min-width: 36px;
-}
-
 .pluginButton {
-  display: flex;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
   &.active {
     background-color: $darken-gray;
   }
 }
-
-// TODO: remove once core team fix alignment of plugin icons
-:global(.playkit-player .playkit-top-bar .playkit-right-controls) {
-  display: flex;
-}

package/src/components/plugin-button/plugin-button.tsx

@@ -1,27 +1,25 @@
 import {h} from 'preact';
 import * as styles from './plugin-button.scss';
+import {ui} from 'kaltura-player-js';
 import {icons} from '../icons';
 import {A11yWrapper, OnClick} from '@playkit-js/common';
+
 const {Tooltip, Icon} = KalturaPlayer.ui.components;
 
 interface PluginButtonProps {
   isActive: boolean;
   onClick: OnClick;
+  id: string;
+  icon: string;
   label?: string;
 }
 
-export const PluginButton = ({isActive, onClick, label}: PluginButtonProps) => {
+export const PluginButton = ({isActive, onClick, label, id, icon}: PluginButtonProps) => {
   return (
     <Tooltip label={label} type="bottom">
       <A11yWrapper onClick={onClick}>
-        <button aria-label={label} className={[styles.pluginButton, isActive ? styles.active : ''].join(' ')}>
-          <Icon
-            id="transcript-plugin-button"
-            height={icons.BigSize}
-            width={icons.BigSize}
-            viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`}
-            path={icons.PLUGIN_ICON}
-          />
+        <button aria-label={label} className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}>
+          <Icon id={id} height={icons.BigSize} width={icons.BigSize} viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`} path={icon} />
         </button>
       </A11yWrapper>
     </Tooltip>

package/src/components/search/search.tsx

@@ -1,8 +1,27 @@
 import {h, Component} from 'preact';
+import {A11yWrapper, OnClickEvent} from '@playkit-js/common';
 import * as styles from './search.scss';
 import {debounce} from '../../utils';
 const DEBOUNCE_TIMEOUT = 300;
 
+const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
+  searchLabel: <Text id="transcript.search">Search in Transcript</Text>,
+  clearSearchLabel: <Text id="transcript.clear_search">Clear search</Text>,
+  nextMatchLabel: <Text id="transcript.next_search_match">Next</Text>,
+  prevMatchLabel: <Text id="transcript.prev_search_match">Previous</Text>,
+  searchResultsLabel: (
+    <Text
+      id="transcript.prev_search_match"
+      fields={{
+        current: totalSearchResults > 0 ? activeSearchIndex : 0,
+        total: totalSearchResults
+      }}>
+      {`Result ${totalSearchResults > 0 ? activeSearchIndex : 0} of ${totalSearchResults}`}
+    </Text>
+  )
+});
+
 export interface SearchProps {
   onChange(value: string): void;
   searchQuery: string;
@@ -13,6 +32,12 @@ export interface SearchProps {
   value: string;
   activeSearchIndex: number;
   totalSearchResults: number;
+
+  searchLabel?: string;
+  clearSearchLabel?: string;
+  nextMatchLabel?: string;
+  prevMatchLabel?: string;
+  searchResultsLabel?: string;
 }
 
 interface SearchState {
@@ -20,7 +45,7 @@ interface SearchState {
   focused: boolean;
 }
 
-export class Search extends Component<SearchProps, SearchState> {
+class SearchComponent extends Component<SearchProps, SearchState> {
   state: SearchState = {
     active: false,
     focused: false
@@ -61,8 +86,8 @@ export class Search extends Component<SearchProps, SearchState> {
     this.props.onChange(e.target.value);
   };
 
-  private _onClear = (event: MouseEvent) => {
-    if (event.x !== 0 && event.y !== 0) {
+  private _onClear = (event: OnClickEvent, byKeyboard?: boolean) => {
+    if (!byKeyboard) {
       this._focusedByMouse = true;
     }
     this._inputRef?.focus();
@@ -135,84 +160,95 @@ export class Search extends Component<SearchProps, SearchState> {
         </div>
         <input
           className={styles.searchInput}
-          placeholder={'Search in Transcript'}
+          aria-label={this.props.searchLabel}
+          placeholder={this.props.searchLabel}
           value={searchQuery}
           onInput={this._handleOnChange}
           onFocus={this._onFocus}
           onBlur={this._onBlur}
           onMouseDown={this._handleMouseDown}
-          tabIndex={1}
+          tabIndex={0}
           ref={node => {
             this._inputRef = node;
           }}
         />
         {searchQuery && (
-          <button className={styles.clearIcon} onClick={this._onClear} tabIndex={1}>
-            <svg
-              width="32px"
-              height="32px"
-              viewBox="0 0 32 32"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlnsXlink="http://www.w3.org/1999/xlink">
-              <g id="Icons/32/Clere" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <path
-                  d="M16,8 C20.418278,8 24,11.581722 24,16 C24,20.418278 20.418278,24 16,24 C11.581722,24 8,20.418278 8,16 C8,11.581722 11.581722,8 16,8 Z M19.8665357,12.1334643 C19.6885833,11.9555119 19.4000655,11.9555119 19.2221131,12.1334643 L16,15.356 L12.7778869,12.1334643 L12.7064039,12.0750737 C12.5295326,11.9582924 12.2891726,11.977756 12.1334643,12.1334643 L12.0750737,12.2049473 C11.9582924,12.3818186 11.977756,12.6221786 12.1334643,12.7778869 L15.356,16 L12.1334643,19.2221131 C11.9555119,19.4000655 11.9555119,19.6885833 12.1334643,19.8665357 C12.3114167,20.0444881 12.5999345,20.0444881 12.7778869,19.8665357 L16,16.644 L19.2221131,19.8665357 L19.2935961,19.9249263 C19.4704674,20.0417076 19.7108274,20.022244 19.8665357,19.8665357 L19.9249263,19.7950527 C20.0417076,19.6181814 20.022244,19.3778214 19.8665357,19.2221131 L16.644,16 L19.8665357,12.7778869 C20.0444881,12.5999345 20.0444881,12.3114167 19.8665357,12.1334643 Z"
-                  id="Shape"
-                  fill="#cccccc"></path>
-              </g>
-            </svg>
-          </button>
-        )}
-        {searchQuery && (
-          <div className={styles.searchResults}>{`${totalSearchResults > 0 ? `${activeSearchIndex}/${totalSearchResults}` : '0/0'}`}</div>
-        )}
-        <div className={styles.prevNextWrapper}>
-          {searchQuery && (
-            <button
-              tabIndex={1}
-              className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
-              onClick={this._goToPrevSearchResult}>
+          <A11yWrapper onClick={this._onClear}>
+            <button className={styles.clearIcon} tabIndex={0} aria-label={this.props.clearSearchLabel}>
               <svg
-                width="14px"
-                height="12px"
-                viewBox="1 0 14 12"
+                width="32px"
+                height="32px"
+                viewBox="0 0 32 32"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlnsXlink="http://www.w3.org/1999/xlink">
-                <g id="Icons/16/Arrow/-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g id="Icons/32/Clere" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                   <path
-                    d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
-                    id="Path-2"
-                    fill="#cccccc"
-                    transform="translate(8.000000, 8.519717) scale(1, -1) translate(-8.000000, -8.519717) "></path>
+                    d="M16,8 C20.418278,8 24,11.581722 24,16 C24,20.418278 20.418278,24 16,24 C11.581722,24 8,20.418278 8,16 C8,11.581722 11.581722,8 16,8 Z M19.8665357,12.1334643 C19.6885833,11.9555119 19.4000655,11.9555119 19.2221131,12.1334643 L16,15.356 L12.7778869,12.1334643 L12.7064039,12.0750737 C12.5295326,11.9582924 12.2891726,11.977756 12.1334643,12.1334643 L12.0750737,12.2049473 C11.9582924,12.3818186 11.977756,12.6221786 12.1334643,12.7778869 L15.356,16 L12.1334643,19.2221131 C11.9555119,19.4000655 11.9555119,19.6885833 12.1334643,19.8665357 C12.3114167,20.0444881 12.5999345,20.0444881 12.7778869,19.8665357 L16,16.644 L19.2221131,19.8665357 L19.2935961,19.9249263 C19.4704674,20.0417076 19.7108274,20.022244 19.8665357,19.8665357 L19.9249263,19.7950527 C20.0417076,19.6181814 20.022244,19.3778214 19.8665357,19.2221131 L16.644,16 L19.8665357,12.7778869 C20.0444881,12.5999345 20.0444881,12.3114167 19.8665357,12.1334643 Z"
+                    id="Shape"
+                    fill="#cccccc"></path>
                 </g>
               </svg>
             </button>
+          </A11yWrapper>
+        )}
+        {searchQuery && (
+          <div className={styles.searchResults} aria-live="polite" aria-label={this.props.searchResultsLabel}>{`${
+            totalSearchResults > 0 ? `${activeSearchIndex}/${totalSearchResults}` : '0/0'
+          }`}</div>
+        )}
+        <div className={styles.prevNextWrapper}>
+          {searchQuery && (
+            <A11yWrapper onClick={this._goToPrevSearchResult}>
+              <button
+                tabIndex={0}
+                className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
+                aria-label={this.props.prevMatchLabel}>
+                <svg
+                  width="14px"
+                  height="12px"
+                  viewBox="1 0 14 12"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink">
+                  <g id="Icons/16/Arrow/-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <path
+                      d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
+                      id="Path-2"
+                      fill="#cccccc"
+                      transform="translate(8.000000, 8.519717) scale(1, -1) translate(-8.000000, -8.519717) "></path>
+                  </g>
+                </svg>
+              </button>
+            </A11yWrapper>
           )}
           {searchQuery && (
-            <button
-              tabIndex={1}
-              className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
-              onClick={this._goToNextSearchResult}>
-              <svg
-                width="14px"
-                height="12px"
-                viewBox="1 2 14 12"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink">
-                <g id="Icons/16/Arrow/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                  <path
-                    d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
-                    id="Path-2"
-                    fill="#cccccc"></path>
-                </g>
-              </svg>
-            </button>
+            <A11yWrapper onClick={this._goToNextSearchResult}>
+              <button
+                tabIndex={0}
+                className={`${styles.prevNextButton} ${totalSearchResults === 0 ? styles.disabled : ''}`}
+                aria-label={this.props.nextMatchLabel}>
+                <svg
+                  width="14px"
+                  height="12px"
+                  viewBox="1 2 14 12"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink">
+                  <g id="Icons/16/Arrow/down" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <path
+                      d="M4.78325732,5.37830235 C4.43990319,4.94572127 3.81088342,4.87338855 3.37830235,5.21674268 C2.94572127,5.56009681 2.87338855,6.18911658 3.21674268,6.62169765 L7.21674268,11.6611718 C7.61710439,12.165575 8.38289561,12.165575 8.78325732,11.6611718 L12.7832573,6.62169765 C13.1266115,6.18911658 13.0542787,5.56009681 12.6216977,5.21674268 C12.1891166,4.87338855 11.5600968,4.94572127 11.2167427,5.37830235 L8,9.43097528 L4.78325732,5.37830235 Z"
+                      id="Path-2"
+                      fill="#cccccc"></path>
+                  </g>
+                </svg>
+              </button>
+            </A11yWrapper>
           )}
         </div>
       </div>
     );
   }
 }
+
+export const Search = withText(translates)(SearchComponent);