fix(FEC-14080): Accessibility fix for the top bar and the bottom bar

src/components/bottom-bar/_bottom-bar.scss

@@ -1,5 +1,4 @@
 .player .bottom-bar {
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
   color: #fff;
   height: auto;
   width: 100%;
@@ -91,6 +90,21 @@
 .player.ad-break,
 .player.menu-active {
   &:not(.overlay-active) {
+    :global(.playkit-video-filter) {
+      &:after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        width: 100%;
+        height: 50%;
+        max-height: 200px;
+        opacity: 1;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
+        content: "";
+      }
+    }
+
     .bottom-bar {
       position: relative;
       opacity: 1;
@@ -125,3 +139,10 @@
     }
   }
 }
+
+:global(.playkit-video-filter) {
+  &:after {
+    transition: #{$hover-animation-time}ms opacity ease-in-out;
+    opacity: 0;
+  }
+}

src/components/bottom-bar/bottom-bar.tsx

@@ -11,7 +11,6 @@ import {withPlayer} from '../player';
 import {calculateControlsSize, filterControlsByPriority} from './bettom-bar-utils';
 import {BottomBarRegistryManager, bottomBarRegistryManager} from './bottom-bar-registry-manager';
 
-
 const LOWER_PRIORITY_CONTROLS: string[][] = [
   ['PictureInPicture'],
   ['VrStereo'],
@@ -53,10 +52,10 @@ const COMPONENT_NAME = 'BottomBar';
 @withEventManager
 @connect(mapStateToProps, bindActions({...actions, ...bottomBarActions}))
 class BottomBar extends Component<any, any> {
-  bottomBarContainerRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
-  presetControls: {[controlName: string]: boolean} = {};
-  currentBarWidth: number = 0;
-  resizeObserver!: ResizeObserver;
+  private bottomBarContainerRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
+  private presetControls: {[controlName: string]: boolean} = {};
+  private currentBarWidth: number = 0;
+  private resizeObserver!: ResizeObserver;
 
   // eslint-disable-next-line require-jsdoc
   constructor(props: any) {
@@ -78,18 +77,18 @@ class BottomBar extends Component<any, any> {
    * @returns {void}
    * @memberof BottomBar
    */
-  componentDidMount(): void {
+  public componentDidMount(): void {
     this.resizeObserver = new ResizeObserver((entry: ResizeObserverEntry[]) => this.onBarWidthChange(entry));
     this.resizeObserver.observe(this.bottomBarContainerRef.current!);
   }
 
   // eslint-disable-next-line require-jsdoc
-  componentWillUnmount(): void {
+  public componentWillUnmount(): void {
     this.resizeObserver.disconnect();
   }
 
   // eslint-disable-next-line require-jsdoc
-  onBarWidthChange(entry: ResizeObserverEntry[]): void {
+  private onBarWidthChange(entry: ResizeObserverEntry[]): void {
     const barWidth = entry[0].contentRect.width;
     if (barWidth !== this.currentBarWidth) {
       const activeControls = Object.keys(this.state.activeControls).filter(c => this.state.activeControls[c]);
@@ -101,14 +100,19 @@ class BottomBar extends Component<any, any> {
     }
   }
 
-  onToggleControl = (controlName: string, isActive: boolean): void => {
+  private onToggleControl = (controlName: string, isActive: boolean): void => {
     if (controlName in this.state.activeControls && this.state.activeControls[controlName] !== isActive) {
       this.setState(state => ({activeControls: {...state.activeControls, ...{[controlName]: isActive}}}));
     }
   };
 
   // eslint-disable-next-line require-jsdoc
-  filterControls(currentBarWidth: number, currentMinBreakPointWidth: number, currentControlWidth: number, lowerPriorityControls: string[][]): void {
+  private filterControls(
+    currentBarWidth: number,
+    currentMinBreakPointWidth: number,
+    currentControlWidth: number,
+    lowerPriorityControls: string[][]
+  ): void {
     // move up
     const isBreak = currentMinBreakPointWidth >= currentBarWidth;
     if (isBreak) {
@@ -130,7 +134,7 @@ class BottomBar extends Component<any, any> {
    * @returns {?React$Element} - component element
    * @memberof BottomBar
    */
-  render(props: any) {
+  public render(props: any) {
     const styleClass = [style.bottomBar];
     if (props.isCasting && props.isPlaybackEnded) {
       styleClass.push(style.hide);
@@ -141,7 +145,7 @@ class BottomBar extends Component<any, any> {
       <div className={styleClass.join(' ')}>
         <div className={style.bottomBarArea}>
           <PlayerArea shouldUpdate={true} name={'BottomBar'}>
-            {shouldRenderTimeDisplay && <TimeDisplayPlaybackContainer/>}
+            {shouldRenderTimeDisplay && <TimeDisplayPlaybackContainer />}
             {props.children}
           </PlayerArea>
         </div>

src/components/top-bar/_top-bar.scss

@@ -1,5 +1,5 @@
 .player .top-bar {
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
+  // background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
   color: #fff;
   visibility: hidden;
   position: relative;
@@ -73,6 +73,21 @@
 .player.ad-break,
 .player.menu-active {
   &:not(.overlay-active) {
+    :global(.playkit-video-filter) {
+      &:before {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 50%;
+        max-height: 200px;
+        opacity: 1;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
+        content: "";
+      }
+    }
+
     .top-bar {
       visibility: visible;
       margin-top: 0;
@@ -119,3 +134,10 @@
     }
   }
 }
+
+:global(.playkit-video-filter) {
+  &:before {
+    transition: #{$hover-animation-time}ms opacity ease-in-out;
+    opacity: 0;
+  }
+}