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

### Description of the Changes

Add video-filter div for use by ui when rendering bar gradients
Add class to indicate when native adapter displays native captions

src/engines/html5/media-source/adapters/native-adapter.ts

@@ -24,6 +24,8 @@ const NUDGE_SEEK_AFTER_FOCUS: number = 0.1;
 const SAFARI_BUFFERED_SEGMENTS_COUNT: number = 3;
 const LIVE_DURATION_INTERVAL_MS = 1000;
 
+const NATIVE_TEXT_CLASS = 'playkit-native-text';
+
 /**
  * An illustration of media source extension for progressive download
  * @classdesc
@@ -220,6 +222,9 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
     if (Utils.Object.hasPropertyPath(config, 'text.useNativeTextTrack')) {
       adapterConfig.displayTextTrack = Utils.Object.getPropertyPath(config, 'text.useNativeTextTrack');
     }
+    if (adapterConfig.displayTextTrack !== false) {
+      videoElement.classList.add(NATIVE_TEXT_CLASS);
+    }
     if (Utils.Object.hasPropertyPath(config, 'sources.progressive')) {
       adapterConfig.progressiveSources = Utils.Object.getPropertyPath(config, 'sources.progressive');
     }
@@ -636,6 +641,7 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
       this._maybeRemoveSourceTag();
       super.destroy().then(
         () => {
+          this._videoElement.classList.remove(NATIVE_TEXT_CLASS);
           this._drmHandler && this._drmHandler.destroy();
           this._waitingEventTriggered = false;
           this._progressiveSources = [];

src/player.ts

@@ -77,6 +77,13 @@ const CONTAINER_CLASS_NAME: string = 'playkit-container';
 */
 const POSTER_CLASS_NAME: string = 'playkit-poster';
 
+/**
+ * The video filter class name.
+ * @type {string}
+ * @const
+ */
+const VIDEO_FILTER_CLASS_NAME: string = 'playkit-video-filter';
+
 /**
  * The engine class name.
  * @type {string}
@@ -1819,6 +1826,10 @@ export default class Player extends FakeEventTarget {
    * @returns {void}
    */
   private _appendDomElements(): void {
+    // Append playkit-video-filter
+    const videoFilter = Utils.Dom.createElement('div');
+    Utils.Dom.addClassName(videoFilter, VIDEO_FILTER_CLASS_NAME);
+    Utils.Dom.appendChild(this._el, videoFilter);
     // Append playkit-black-cover
     this._blackCoverEl = Utils.Dom.createElement('div');
     Utils.Dom.addClassName(this._blackCoverEl, BLACK_COVER_CLASS_NAME);