diff --git a/src/components/settings/settings.tsx b/src/components/settings/settings.tsx
index f8ec4dcc5..695f54396 100644
--- 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: Settings,
+ qualityHdLabel: Quality is HD,
+ quality4kLabel: Quality is 4k,
+ quality8kLabel: Quality is 8k
+});
+
/**
* 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 {
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 {
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 (
(c ? (this._controlSettingsElement = c) : undefined)}>