BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add current value to aria labels for app font size

Browse Source
This commit is contained in:
KDSBrowne 2019-05-23 21:50:36 +00:00
parent 01b36d54fc
commit b9231ecbbc
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
View File

@ -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>

1
bigbluebutton-html5/private/locales/en.json
View File

@ -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",