fix(ADA-1383): [Strategic Blue / University of Sheffield] - HD label …

…on V7 player Settings button
kaltura · Jul 29, 2024 · 0b0bb36 · 0b0bb36
1 parent 10e95db
commit 0b0bb36
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/components/settings/settings.tsx b/src/components/settings/settings.tsx
@@ -49,6 +49,13 @@ const mapStateToProps = state => ({
 });
 const COMPONENT_NAME = 'Settings';
 
+const translates = () => ({
+  buttonLabel: <Text id="controls.settings">Settings</Text>,
+  qualityHdLabel: <Text id="settings.qualityHdLabel">Quality is HD</Text>,
+  quality4kLabel: <Text id="settings.quality4kLabel">Quality is 4k</Text>,
+  quality8kLabel: <Text id="settings.quality8kLabel">Quality is 8k</Text>
+});
+
 /**
  * Settings component
  *
@@ -57,9 +64,7 @@ const COMPONENT_NAME = 'Settings';
  * @extends {Component}
  */
 @connect(mapStateToProps, bindActions({...actions, ...overlayIconActions}))
-@withText({
-  buttonLabel: 'controls.settings'
-})
+@withText(translates)
 @withPlayer
 @withEventManager
 @withKeyboardEvent(COMPONENT_NAME)
@@ -277,6 +282,19 @@ class Settings extends Component<any, any> {
     return activeVideoTrackHeight ? getLabelBadgeType(activeVideoTrackHeight) : null;
   }
 
+  getQualityLabel(buttonBadgeType): string {
+    switch (buttonBadgeType) {
+      case 'qualityHd':
+        return this.props.qualityHdLabel;
+      case 'quality4k':
+        return this.props.quality4kLabel;
+      case 'quality8k':
+        return this.props.quality8kLabel;
+      default:
+        return '';
+    }
+  }
+
   /**
    * render component
    *
@@ -297,21 +315,23 @@ class Settings extends Component<any, any> {
 
     const targetId: HTMLDivElement | Document = (document.getElementById(this.props.player.config.targetId) as HTMLDivElement) || document;
     const portalSelector = `.overlay-portal`;
+    const buttonAriaLabel = props.buttonLabel + ' ' + this.getQualityLabel(buttonBadgeType);
     return (
       <ButtonControl name={COMPONENT_NAME} ref={c => (c ? (this._controlSettingsElement = c) : undefined)}>
         <Tooltip label={props.buttonLabel}>
           <Button
             ref={this.setButtonRef}
             tabIndex="0"
-            aria-label={props.buttonLabel}
+            aria-label={buttonAriaLabel}
             aria-haspopup="true"
             className={[
               style.controlButton,
               style.buttonBadge,
               BadgeType[buttonBadgeType + 'Active'],
               this.state.smartContainerOpen ? style.active : ''
             ].join(' ')}
-            onClick={this.onControlButtonClick}>
+            onClick={this.onControlButtonClick}
+          >
             <Icon type={IconType.Settings} />
           </Button>
         </Tooltip>

diff --git a/translations/en.i18n.json b/translations/en.i18n.json
@@ -55,6 +55,9 @@
       "speed": "Speed",
       "speedNormal": "Normal",
       "qualityAuto": "Auto",
+      "qualityHdLabel": "Quality is HD",
+      "quality4kLabel": "Quality is 4k",
+      "quality8kLabel": "Quality is 8k",
       "advancedAudioDescription": "Advanced Audio Description"
     },
     "captions": {