add Accessibility

kaltura · Apr 9, 2024 · d1b7c94 · d1b7c94
1 parent 5a5d386
commit d1b7c94
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 133 deletions.
diff --git a/src/components/plugins/menu-item/menu-item.scss b/src/components/plugins/menu-item/menu-item.scss
@@ -2,6 +2,7 @@
   display: flex;
   padding: 8px 0;
   align-items: center;
+  cursor: pointer;
 
   .plugin-icon {
     width: 24px;

diff --git a/src/components/plugins/menu-item/menu-item.tsx b/src/components/plugins/menu-item/menu-item.tsx
@@ -1,5 +1,6 @@
 import {ui} from '@playkit-js/kaltura-player-js';
 import * as styles from './menu-item.scss';
+import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 
 //@ts-ignore
 const {Icon, IconType} = ui.Components;
@@ -12,16 +13,18 @@ interface MenuItemProps {
 
 const MenuItem = ({pluginName, svgUrl, onClick}: MenuItemProps) => {
   return (
-    <div onClick={onClick} className={styles.menuItem}>
-      <span className={styles.pluginIcon}>
-        <Icon id={`min-audio-player-download`} path={svgUrl} viewBox={`0 0 32 32`} />
-      </span>
-      <div className={styles.content2}>{pluginName}</div>
-      <span className={styles.arrowIcon}>
-        {/*@ts-ignore*/}
-        <Icon type={IconType.ArrowDown} />
-      </span>
-    </div>
+    <A11yWrapper onClick={onClick}>
+      <div className={styles.menuItem} tabIndex={0} aria-label={pluginName}>
+        <span className={styles.pluginIcon}>
+          <Icon id={`min-audio-player-download`} path={svgUrl} viewBox={`0 0 32 32`} />
+        </span>
+        <div className={styles.content2}>{pluginName}</div>
+        <span className={styles.arrowIcon}>
+          {/*@ts-ignore*/}
+          <Icon type={IconType.ArrowDown} />
+        </span>
+      </div>
+    </A11yWrapper>
   );
 };
 

diff --git a/src/components/plugins/plugins-menu-overlay/plugins-menu-overlay.scss b/src/components/plugins/plugins-menu-overlay/plugins-menu-overlay.scss
@@ -24,25 +24,6 @@
       .menu {
         margin: 10px;
         width: 240px;
-
-        //.menu-item {
-        //  display: flex;
-        //  padding: 8px 0;
-        //  align-items: center;
-        //
-        //  .plugin-icon {
-        //    width: 24px;
-        //    height: 24px;
-        //    margin-right: 4px;
-        //  }
-        //
-        //  .arrow-icon {
-        //    width: 16px;
-        //    height: 16px;
-        //    margin-left: auto;
-        //    transform: rotate(268deg);
-        //  }
-        //}
       }
     }
   }

diff --git a/src/components/plugins/plugins-meta-data.ts b/src/components/plugins/plugins-meta-data.ts
@@ -1,7 +1,10 @@
 export const PluginsMetaData = [
   {
     pluginName: 'Download',
-    action: (player: any) => { player.plugins.download.downloadPluginManager.showOverlay = true;},
-    svgUrl: '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'
+    action: (player: any) => {
+      player.plugins.download.showOverlay();
+    },
+    svgUrl:
+      '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'
   }
-];
+];
diff --git a/src/experiment/bulbul-preset.tsx b/src/experiment/bulbul-preset.tsx