@playkit-js/transcript 3.6.0-canary.0-a940bfb → 3.6.0-canary.0-baa8e71

package/src/components/popover-menu/popover-menu.tsx

@@ -1,26 +1,23 @@
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {h, Component, VNode} from 'preact';
+import {PopoverMenuItem, PopoverMenuItemData} from './popover-menu-item';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {Tooltip} = ui.components;
+const {withText, Text} = ui.preacti18n;
 
-const {Tooltip} = KalturaPlayer.ui.components;
-const {withText, Text} = KalturaPlayer.ui.preacti18n;
-
-const {withEventManager} = KalturaPlayer.ui.Event;
-const {TAB} = KalturaPlayer.ui.utils.KeyMap;
+const {withEventManager} = ui.Event;
+const {TAB} = ui.utils.KeyMap;
 
 import * as styles from './popover-menu.scss';
 
-interface PopoverMenuItemData {
-  testId: string;
-  label: string;
-  onClick: () => void;
-  isDisabled?: boolean;
-}
-
 interface PopoverMenuProps {
   moreOptionsLabel?: string;
   eventManager?: any;
   children?: VNode;
   items: Array<PopoverMenuItemData>;
+  kitchenSinkDetached: boolean;
+  popOverMenuHeight: number;
+  shouldUseCalculatedHeight: boolean;
 }
 
 interface PopoverMenuState {
@@ -41,23 +38,25 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
 
   constructor(props: PopoverMenuProps) {
     super(props);
-    this.state = {isOpen: false};
+    this.state = {
+      isOpen: false
+    };
 
-    this.props.eventManager?.listen(document, 'click', this.handleMouseEvent);
-    this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+    this.props.eventManager?.listen(document, 'click', this._handleMouseEvent);
+    this.props.eventManager?.listen(document, 'keydown', this._handleKeydownEvent);
   }
 
   componentWillUnmount() {
     this._itemsRefMap = new Map();
   }
 
-  private handleMouseEvent = (event: MouseEvent) => {
+  private _handleMouseEvent = (event: MouseEvent) => {
     if (!this._controlElementRef?.contains(event.target as Node | null)) {
-      this.closePopover();
+      this._closePopover();
     }
   };
 
-  private handleKeydownEvent = (event: KeyboardEvent) => {
+  private _handleKeydownEvent = (event: KeyboardEvent) => {
     const eventTarget = event.target as Node | null;
     if (
       this.state.isOpen &&
@@ -66,7 +65,7 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
       !this._popoverElementRef?.contains(eventTarget) &&
       eventTarget !== this._controlElementRef
     ) {
-      this.closePopover();
+      this._closePopover();
     }
   };
 
@@ -78,26 +77,26 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
     this._getItemRef(currentIndex + 1)?.focus();
   };
 
-  private closePopover() {
+  private _closePopover() {
     this.setState({isOpen: false});
   }
 
-  private togglePopover = () => {
+  private _togglePopover = () => {
     const isOpen = !this.state.isOpen;
 
     this.setState({isOpen}, () => {
-      if (isOpen){
+      if (isOpen) {
         this._controlElementRef?.focus();
         this.props.eventManager?.listen(this._controlElementRef, 'keydown', (event: KeyboardEvent) => {
-          if (event.keyCode === TAB){
+          if (event.keyCode === TAB) {
             const firstNonDisabledItem = this.props.items.findIndex((item: PopoverMenuItemData) => !item.isDisabled);
             if (firstNonDisabledItem !== -1) {
-              this._getItemRef(firstNonDisabledItem -1)?.focus();
+              this._getItemRef(firstNonDisabledItem - 1)?.focus();
             }
           }
-        })
+        });
       }
-    })
+    });
   };
 
   private _getItemRef = (index: number) => {
@@ -109,23 +108,30 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
   };
 
   render() {
-    const {children, items} = this.props;
+    const {children, items, kitchenSinkDetached, popOverMenuHeight, shouldUseCalculatedHeight} = this.props;
+
+    let popOverHeight = 0;
+    if (shouldUseCalculatedHeight) {
+      const neededHeight = 48 * items.length;
+      const padding = 14;
+      popOverHeight = popOverMenuHeight - neededHeight <= 0 ? popOverMenuHeight - padding : neededHeight - padding;
+    }
 
     const popoverMenuContent = (
       <div className={styles.popoverContainer}>
-        <A11yWrapper onClick={(e) => {
-          e.stopPropagation();
-          this.togglePopover();
-        }}>
+        <A11yWrapper
+          onClick={e => {
+            e.stopPropagation();
+            this._togglePopover();
+          }}>
           <div
-            aria-label={this.props.moreOptionsLabel!}
             tabIndex={0}
             data-testid="popover-anchor-container"
             className={`${styles.popoverAnchorContainer} ${this.state.isOpen ? styles.active : ''}`}
             aria-expanded={this.state.isOpen}
             aria-controls="popoverContent"
             ref={node => {
-              if (node){
+              if (node) {
                 this._controlElementRef = node;
               }
             }}>
@@ -135,6 +141,7 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
 
         <div
           className={styles.popoverComponent}
+          style={shouldUseCalculatedHeight ? {height: `${popOverHeight}px`, overflowY: 'auto'} : {}}
           role="menu"
           aria-expanded={this.state.isOpen}
           id="popoverContent"
@@ -142,41 +149,22 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
             this._popoverElementRef = node;
           }}>
           {this.state.isOpen
-            ? items.map(({label, onClick, testId, isDisabled}, index) => {
-                return (
-                  <A11yWrapper
-                    role="menuitem"
-                    onClick={() => {
-                      if (!isDisabled) {
-                        this.closePopover();
-                        onClick();
-                      }
-                    }}
-                    onDownKeyPressed={() => {
-                      if (!isDisabled) {
-                        this._handleDownKeyPressed(index);
-                      }
-                    }}
-                    onUpKeyPressed={() => {
-                      if (!isDisabled) {
-                        this._handleUpKeyPressed(index);
-                      }
-                    }}>
-                    {
-                      <div
-                        tabIndex={isDisabled ? -1 : 0}
-                        role="menuitem"
-                        className={`${styles.popoverMenuItem} ${isDisabled ? styles.popoverMenuItemDisabled : ''}`}
-                        data-testid={testId}
-                        ref={node => {
-                          this._setItemRef(index, node);
-                        }}>
-                        {label}
-                      </div>
+            ? items.map((item, index) => (
+                <PopoverMenuItem
+                  key={index}
+                  item={item}
+                  index={index}
+                  onKeyDown={this._handleDownKeyPressed}
+                  onKeyUp={this._handleUpKeyPressed}
+                  setRef={this._setItemRef}
+                  onClick={() => {
+                    this._closePopover();
+                    if (!item.items) {
+                      item.onClick?.();
                     }
-                  </A11yWrapper>
-                );
-              })
+                  }}
+                />
+              ))
             : null}
         </div>
       </div>
@@ -186,7 +174,9 @@ class PopoverMenu extends Component<PopoverMenuProps, PopoverMenuState> {
       popoverMenuContent
     ) : (
       <div>
-        <Tooltip label={this.props.moreOptionsLabel!}>{popoverMenuContent}</Tooltip>
+        <Tooltip label={this.props.moreOptionsLabel!} {...(kitchenSinkDetached ? {type: 'bottom-left', strictPosition: true} : {})}>
+          {popoverMenuContent}
+        </Tooltip>
       </div>
     );
   }

package/src/components/search/search.tsx

@@ -1,7 +1,13 @@
 import {h, Component} from 'preact';
 import {InputField} from '@playkit-js/common/dist/components/input-field';
+import {core, ui} from '@playkit-js/kaltura-player-js';
 
+const {Utils} = core;
+const {withEventManager} = KalturaPlayer.ui.Event;
+const {TAB} = KalturaPlayer.ui.utils.KeyMap;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
+const {withPlayer} = ui.Components;
+
 const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
   searchLabel: <Text id="transcript.search">Search in Transcript</Text>,
   clearSearchLabel: <Text id="transcript.clear_search">Clear search</Text>,
@@ -34,11 +40,34 @@ export interface SearchProps {
   nextMatchLabel?: string;
   prevMatchLabel?: string;
   searchResultsLabel?: string;
+  eventManager?: any
+  focusPluginButton: (event: KeyboardEvent) => void;
+  player?: any;
 }
 
+@withPlayer
+@withEventManager
 class SearchComponent extends Component<SearchProps> {
   private _inputField: InputField | null = null;
 
+  constructor(props: SearchProps) {
+    super(props);
+    if (this.props.player._firstPlay){
+      this.props.eventManager?.listen(this.props.player, this.props.player.Event.FIRST_PLAY, () => {
+        this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+      })
+    } else {
+      this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+    }
+  }
+
+  private handleKeydownEvent = (event: KeyboardEvent) => {
+    if (event.keyCode === TAB && event.shiftKey && document.activeElement === this._inputField?.base?.childNodes[0]){
+      //@ts-ignore
+      this.props.focusPluginButton(event);
+    }
+  };
+
   shouldComponentUpdate(nextProps: Readonly<SearchProps>) {
     const {value, activeSearchIndex, totalSearchResults, kitchenSinkActive} = this.props;
     if (

package/src/components/small-screen-slate/small-screen-slate.scss

@@ -23,6 +23,7 @@
       font-style: normal;
       font-weight: 700;
       line-height: 20px;
+      text-align: center;
     }
   }
 }

package/src/components/transcript/transcript.scss

@@ -1,5 +1,7 @@
 @import '../../variables.scss';
 
+$button-height: 32px;
+
 .hidden {
   visibility: hidden;
 }
@@ -25,7 +27,7 @@
     align-items: center;
     justify-content: center;
     width: 120px;
-    height: 32px;
+    height: $button-height;
     border-radius: $roundness-3;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
     border: solid 1px $primary-color;
@@ -44,6 +46,10 @@
     font-family: sans-serif;
     font-style: normal;
   }
+
+  *:focus-visible:not(input) {
+    outline: 1px solid $tab-focus-color;
+  }
 }
 
 .global-container {
@@ -56,16 +62,31 @@
 }
 
 .header {
+  $header-margin-bottom: 8px;
+
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  margin-bottom: 8px;
+  margin-bottom: $header-margin-bottom;
   padding-left: 16px;
   font-size: 16px;
   padding-right: 16px;
   gap: 8px;
   z-index: 2;
+  .to-search-button {
+    position: absolute;
+    right: 16px;
+    bottom: calc((#{$button-height + $header-margin-bottom}) * -1); // button height + margin
+    opacity: 0;
+    &:focus {
+      opacity: 1;
+    }
+    &[class^="Button__button"]:focus:not([class^="Button__disabled"]) {
+      background-color: $tone-6-color
+    }
+  }
 }
 
 .body {

package/src/components/transcript/transcript.tsx

@@ -1,6 +1,6 @@
 import {h, Component} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
-import {debounce} from '../../utils';
+import {ui, core} from '@playkit-js/kaltura-player-js';
+import {debounce} from '@playkit-js/common/dist/utils-common';
 import * as styles from './transcript.scss';
 import {Spinner} from '../spinner';
 import {Search} from '../search';
@@ -11,24 +11,27 @@ import {AutoscrollButton} from '../autoscroll-button';
 import {TranscriptMenu} from '../transcript-menu';
 import {SmallScreenSlate} from '../small-screen-slate';
 import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components/button';
+import {ScreenReaderProvider} from '@playkit-js/common/dist/hoc/sr-wrapper';
 import {OnClickEvent, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {TranscriptEvents} from '../../events/events';
 
-const {ENTER, SPACE, TAB} = ui.utils.KeyMap;
+const {ENTER, SPACE, TAB, ESC} = ui.utils.KeyMap;
 const {withText, Text} = ui.preacti18n;
 
-const {SidePanelModes} = ui;
+const {SidePanelModes, SidePanelPositions} = ui;
 const {PLAYER_BREAK_POINTS} = ui.Components;
 const {connect} = ui.redux;
 
 const SEARCH_EVENT_DISPATCH_TIMEOUT = 2000;
+const WIDGET_RESIZE_DEBOUNCE_TIMEOUT = 250;
 
 const translates = {
   skipTranscript: <Text id="transcript.skip_transcript">Skip transcript</Text>,
   errorTitle: <Text id="transcript.whoops">Whoops!</Text>,
   errorDescripton: <Text id="transcript.load_failed">Failed to load transcript</Text>,
   attachTranscript: <Text id="transcript.attach_transcript">Bring Transcript back</Text>,
-  detachTranscript: <Text id="transcript.detach_transcript">Popout Transcript</Text>
+  detachTranscript: <Text id="transcript.detach_transcript">Popout transcript</Text>,
+  toSearchResult: <Text id="transcript.to_search_result">Go to result</Text>
 };
 
 export interface TranscriptProps {
@@ -53,6 +56,7 @@ export interface TranscriptProps {
   errorDescripton?: string;
   attachTranscript?: string;
   detachTranscript?: string;
+  toSearchResult?: string;
   downloadDisabled: boolean;
   onDownload: () => void;
   printDisabled: boolean;
@@ -65,6 +69,13 @@ export interface TranscriptProps {
   onAttach: () => void;
   kitchenSinkDetached: boolean;
   isMobile?: boolean;
+  playerWidth?: number;
+  onJumpToSearchMatch: () => void;
+  onScrollToSearchMatch: () => void;
+  focusPluginButton: (event: KeyboardEvent) => void;
+  textTracks: Array<core.TextTrack>;
+  changeLanguage: (textTrack: core.TextTrack) => void;
+  sidePanelPosition: string;
 }
 
 interface TranscriptState {
@@ -85,12 +96,13 @@ const initialSearch = {
   searchLength: 0
 };
 
+const SMALL_WIDGET_WIDTH = 240;
 const SEARCHBAR_HEIGHT = 38; // height of search bar with margins
-const smallScreen = PLAYER_BREAK_POINTS?.SMALL || 480;
 
 const mapStateToProps = (state: any, ownProps: Pick<TranscriptProps, 'expandMode'>) => ({
-  smallScreen: ownProps.expandMode === SidePanelModes.ALONGSIDE && state.shell.playerClientRect?.width < smallScreen,
-  isMobile: state.shell.isMobile
+  smallScreen: ownProps.expandMode === SidePanelModes.ALONGSIDE && state.shell.playerClientRect?.width <= PLAYER_BREAK_POINTS.TINY,
+  isMobile: state.shell.isMobile,
+  playerWidth: state.shell.playerClientRect?.width
 });
 
 // @ts-ignore
@@ -104,20 +116,36 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _preventScrollEvent: boolean = false;
   private _scrollToSearchMatchEnabled: boolean = false;
   private _widgetRootRef: HTMLElement | null = null;
+  private _transcriptMenuRef: HTMLElement | null = null;
 
   private _widgetHeight: number = 0;
   private _topAutoscrollEdge: number = 0;
   private _bottomAutoscrollEdge: number = 0;
   private _thirdOfWidgetHeight: number = 0;
 
+  private _resizeObserver: ResizeObserver | null = null;
+
   state: TranscriptState = {
     isAutoScrollEnabled: true,
     widgetWidth: 0,
     ...initialSearch
   };
 
+  componentDidMount(): void {
+    if (window.ResizeObserver) {
+      // observe transcript root element size changes
+      this._resizeObserver = new ResizeObserver(() => {
+        this._debounced.setWidgetSize();
+      });
+      this._resizeObserver.observe(this._widgetRootRef!);
+    } else {
+      // use player size to define transcript root element size
+      this._debounced.setWidgetSize();
+    }
+  }
+
   componentDidUpdate(previousProps: Readonly<TranscriptProps>, previousState: Readonly<TranscriptState>): void {
-    const {captions, activeCaptionLanguage} = this.props;
+    const {captions, activeCaptionLanguage, playerWidth} = this.props;
     const {search} = this.state;
     if (previousProps.captions !== captions) {
       // clear search value only if active caption language was switched, otherwise keep previous value
@@ -129,9 +157,25 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
       this._debounced.findSearchMatches();
     }
 
-    this._setWidgetSize();
+    if (!this._resizeObserver && previousProps.playerWidth !== playerWidth) {
+      // re-calculate wiget size if player size changed
+      this._debounced.setWidgetSize();
+    }
+  }
+
+  componentWillUnmount(): void {
+    if (this._resizeObserver) {
+      this._resizeObserver?.disconnect();
+      this._resizeObserver = null;
+    }
   }
 
+  private _handleClose = (event: KeyboardEvent) => {
+    if (event.keyCode === ESC) {
+      this.props.onClose(event, true);
+    }
+  };
+
   private _enableAutoScroll = (event: OnClickEvent, byKeyboard?: boolean) => {
     event.preventDefault();
     if (this.state.isAutoScrollEnabled) {
@@ -172,7 +216,10 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           onClick={kitchenSinkDetached ? onAttach : onDetach}
           icon={kitchenSinkDetached ? 'attach' : 'detach'}
           ariaLabel={kitchenSinkDetached ? attachTranscript : detachTranscript}
-          tooltip={{label: kitchenSinkDetached ? attachTranscript! : detachTranscript!}}
+          tooltip={{
+            label: kitchenSinkDetached ? attachTranscript! : detachTranscript!,
+            ...(kitchenSinkDetached ? {type: 'bottom-left', strictPosition: kitchenSinkDetached} : {})
+          }}
         />
       </div>
     );
@@ -180,6 +227,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
 
   private _onSearch = (search: string) => {
     this.setState({search});
+    this.props.onScrollToSearchMatch()
   };
 
   private _findSearchMatches = () => {
@@ -237,11 +285,64 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
     return styles.smallWidth;
   };
 
+  private _renderJumpToSearchButton = () => {
+    const {toSearchResult, onJumpToSearchMatch} = this.props;
+    const {search, activeSearchIndex, totalSearchResults} = this.state;
+    if (!search || totalSearchResults === 0 || activeSearchIndex === 0) {
+      return null;
+    }
+    return (
+      <Button
+        type={ButtonType.secondary}
+        className={styles.toSearchButton}
+        onClick={onJumpToSearchMatch}
+        ariaLabel={toSearchResult}
+        testId="transcript_jumpToSearchMatch">
+        {toSearchResult}
+      </Button>
+    );
+  };
+
   private _renderHeader = () => {
-    const {toggledWithEnter, kitchenSinkActive, kitchenSinkDetached, downloadDisabled, onDownload, printDisabled, onPrint, isLoading} = this.props;
+    const {
+      sidePanelPosition,
+      toggledWithEnter,
+      kitchenSinkActive,
+      kitchenSinkDetached,
+      downloadDisabled,
+      onDownload,
+      printDisabled,
+      onPrint,
+      isLoading,
+      attachTranscript,
+      detachTranscript,
+      onAttach,
+      onDetach,
+      textTracks,
+      changeLanguage
+    } = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
+    const widgetHeight = this._widgetRootRef?.getBoundingClientRect().height;
+    const transcriptHeight = this._transcriptMenuRef?.getBoundingClientRect().height;
+    const popOverHeight = (widgetHeight ?? 0) - (transcriptHeight ?? 0) - 16;
+    const shouldUseCalculatedHeight = sidePanelPosition === SidePanelPositions.TOP || sidePanelPosition === SidePanelPositions.BOTTOM;
+
+    let detachMenuItem: null | any = null;
+    if (this.state.widgetWidth <= SMALL_WIDGET_WIDTH && !kitchenSinkDetached) {
+      detachMenuItem = {
+        label: kitchenSinkDetached ? attachTranscript : detachTranscript,
+        onClick: kitchenSinkDetached ? onAttach : onDetach,
+        testId: 'transcript-detach-attach-button',
+        disabled: isLoading
+      };
+    }
     return (
-      <div className={[styles.header, this._getHeaderStyles()].join(' ')} data-testid="transcript_header">
+      <div
+        className={[styles.header, this._getHeaderStyles()].join(' ')}
+        data-testid="transcript_header"
+        ref={node => {
+          this._transcriptMenuRef = node;
+        }}>
         <Search
           onChange={this._onSearch}
           onSearchIndexChange={this._debounced.onActiveSearchIndexChange}
@@ -250,9 +351,25 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           totalSearchResults={totalSearchResults}
           toggledWithEnter={toggledWithEnter}
           kitchenSinkActive={kitchenSinkActive}
+          focusPluginButton={this.props.focusPluginButton}
+        />
+        {this._renderJumpToSearchButton()}
+        <TranscriptMenu
+          {...{
+            shouldUseCalculatedHeight,
+            popOverHeight,
+            downloadDisabled,
+            onDownload,
+            printDisabled,
+            onPrint,
+            isLoading,
+            detachMenuItem,
+            kitchenSinkDetached,
+            textTracks,
+            changeLanguage
+          }}
         />
-        <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading}} />
-        {this._renderDetachButton()}
+        {!detachMenuItem && this._renderDetachButton()}
         {!kitchenSinkDetached && (
           <div data-testid="transcriptCloseButton">
             <Button
@@ -348,7 +465,6 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         activeSearchIndex={activeSearchIndex}
         captionProps={captionProps}
         onScroll={this._onScroll}
-        widgetWidth={this.state.widgetWidth}
         showItemsIcons={true}
         searchActive={false}
       />
@@ -415,39 +531,44 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _debounced = {
     findSearchMatches: debounce(this._findSearchMatches, this.props.searchDebounceTimeout),
     onActiveSearchIndexChange: debounce(this._setActiveSearchIndex, this.props.searchNextPrevDebounceTimeout),
-    searchEventDispatcher: debounce(this._dispatchSearchEvent, SEARCH_EVENT_DISPATCH_TIMEOUT)
+    searchEventDispatcher: debounce(this._dispatchSearchEvent, SEARCH_EVENT_DISPATCH_TIMEOUT),
+    setWidgetSize: debounce(this._setWidgetSize, WIDGET_RESIZE_DEBOUNCE_TIMEOUT)
   };
 
   render(props: TranscriptProps) {
     const {isLoading, kitchenSinkActive, kitchenSinkDetached, hasError, smallScreen, toggledWithEnter} = props;
     const renderTranscriptButtons = !(isLoading || hasError);
+
     return (
-      <div
-        className={`${styles.root} ${kitchenSinkActive || kitchenSinkDetached ? '' : styles.hidden}`}
-        ref={node => {
-          this._widgetRootRef = node;
-        }}
-        data-testid="transcript_root">
-        {smallScreen && !kitchenSinkDetached ? (
-          <SmallScreenSlate onClose={this.props.onClose} toggledWithEnter={toggledWithEnter} />
-        ) : (
-          <div className={styles.globalContainer}>
-            {this._renderHeader()}
-
-            {renderTranscriptButtons && this._renderSkipTranscriptButton()}
-            <div
-              className={styles.body}
-              onScroll={this._onScroll}
-              ref={node => {
-                this._transcriptListRef = node;
-              }}
-              data-testid="transcript_list">
-              {isLoading ? this._renderLoading() : this._renderTranscript()}
+      <ScreenReaderProvider>
+        <div
+          className={`${styles.root} ${kitchenSinkActive || kitchenSinkDetached ? '' : styles.hidden}`}
+          ref={node => {
+            this._widgetRootRef = node;
+          }}
+          onKeyUp={this._handleClose}
+          data-testid="transcript_root">
+          {smallScreen && !kitchenSinkDetached ? (
+            <SmallScreenSlate onClose={this.props.onClose} toggledWithEnter={toggledWithEnter} />
+          ) : (
+            <div className={styles.globalContainer}>
+              {this._renderHeader()}
+
+              {renderTranscriptButtons && this._renderSkipTranscriptButton()}
+              <div
+                className={styles.body}
+                onScroll={this._onScroll}
+                ref={node => {
+                  this._transcriptListRef = node;
+                }}
+                data-testid="transcript_list">
+                {isLoading ? this._renderLoading() : this._renderTranscript()}
+              </div>
+              {renderTranscriptButtons && this._renderScrollToButton()}
             </div>
-            {renderTranscriptButtons && this._renderScrollToButton()}
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      </ScreenReaderProvider>
     );
   }
 }