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

…on V7 player Settings button (#911)

Please add a detailed description of the change, whether it's an enhancement or a bugfix.
If the PR is related to an open issue please link to it.

Issue:
When the quality is HD/4k/8k, there is quality icon on the settings button, but there is no indication for screen reader users to the quality state.

Fix:
Add additional string to the aria-label to inform about the quality.

Resolves ADA-1383

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,13 +315,14 @@ 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,

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": {