diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx index 049af4b483ea218619043399109a392267d5550a..a8d70337d6d17503a5f35ccb8c468b07be6ddfde 100644 --- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx @@ -53,6 +53,10 @@ const intlMessages = defineMessages({ id: 'app.submenu.application.ariaLanguageLabel', description: 'aria label for locale change section', }, + currentValue: { + id: 'app.submenu.application.currentSize', + description: 'current value label', + }, languageOptionLabel: { id: 'app.submenu.application.languageOptionLabel', description: 'default change language option when locales are available', @@ -151,7 +155,7 @@ class ApplicationMenu extends BaseMenu { render() { const { availableLocales, intl } = this.props; - const { isLargestFontSize, isSmallestFontSize } = this.state; + const { isLargestFontSize, isSmallestFontSize, settings } = this.state; // conversions can be found at http://pxtoem.com const pixelPercentage = { @@ -164,6 +168,8 @@ class ApplicationMenu extends BaseMenu { '20px': '125%', }; + const ariaValueLabel = intl.formatMessage(intlMessages.currentValue, { 0: `${pixelPercentage[settings.fontSize]}` }); + return ( <div> <div> @@ -277,7 +283,7 @@ class ApplicationMenu extends BaseMenu { </div> </div> <div className={styles.col}> - <div className={cx(styles.formElement, styles.pullContentCenter)}> + <div aria-hidden className={cx(styles.formElement, styles.pullContentCenter)}> <label className={cx(styles.label, styles.bold)}> {`${pixelPercentage[this.state.settings.fontSize]}`} </label> @@ -294,6 +300,7 @@ class ApplicationMenu extends BaseMenu { circle hideLabel label={intl.formatMessage(intlMessages.decreaseFontBtnLabel)} + aria-label={`${intl.formatMessage(intlMessages.decreaseFontBtnLabel)}, ${ariaValueLabel}`} disabled={isSmallestFontSize} /> </div> @@ -305,6 +312,7 @@ class ApplicationMenu extends BaseMenu { circle hideLabel label={intl.formatMessage(intlMessages.increaseFontBtnLabel)} + aria-label={`${intl.formatMessage(intlMessages.increaseFontBtnLabel)}, ${ariaValueLabel}`} disabled={isLargestFontSize} /> </div> diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json index 57a3c3972244d8164c270d91171086096d1ffd10..65cdca705255058d46bdae196662974707ee9bd7 100755 --- a/bigbluebutton-html5/private/locales/en.json +++ b/bigbluebutton-html5/private/locales/en.json @@ -223,6 +223,7 @@ "app.submenu.application.fontSizeControlLabel": "Font size", "app.submenu.application.increaseFontBtnLabel": "Increase application font size", "app.submenu.application.decreaseFontBtnLabel": "Decrease application font size", + "app.submenu.application.currentSize": "currently {0}", "app.submenu.application.languageLabel": "Application Language", "app.submenu.application.ariaLanguageLabel": "Change application language", "app.submenu.application.languageOptionLabel": "Choose language",