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

fix Toggle component functionality with screen reader

Browse Source
This commit is contained in:
KDSBrowne 2018-03-01 13:15:18 -08:00
parent ef7c44e693
commit 481b79cd30
4 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -151,7 +151,6 @@ class ApplicationMenu extends BaseMenu {
icons={false}
defaultChecked={this.state.settings.chatAudioNotifications}
onChange={() => this.handleToggle('chatAudioNotifications')}
ariaLabelledBy="audioNotify"
ariaLabel={intl.formatMessage(intlMessages.audioNotifyLabel)}
/>
</div>
@ -159,7 +158,7 @@ class ApplicationMenu extends BaseMenu {
</div>
<div className={styles.row}>
<div className={styles.col}>
<div className={styles.col} aria-hidden="true">
<div className={styles.formElement}>
<label className={styles.label}>
{intl.formatMessage(intlMessages.pushNotifyLabel)}
@ -172,14 +171,13 @@ class ApplicationMenu extends BaseMenu {
icons={false}
defaultChecked={this.state.settings.chatPushNotifications}
onChange={() => this.handleToggle('chatPushNotifications')}
ariaLabelledBy="pushNotify"
ariaLabel={intl.formatMessage(intlMessages.pushNotifyLabel)}
/>
</div>
</div>
</div>
<div className={styles.row}>
<div className={styles.col}>
<div className={styles.col} aria-hidden="true">
<div className={styles.formElement}>
<label className={styles.label}>
{intl.formatMessage(intlMessages.languageLabel)}

23
bigbluebutton-html5/imports/ui/components/settings/submenus/closed-captions/component.jsx
View File

@ -137,7 +137,7 @@ class ClosedCaptionsMenu extends BaseMenu {
</div>
<div className={styles.form}>
<div className={styles.row}>
<div className={styles.col}>
<div className={styles.col} aria-hidden="true">
<div className={styles.formElement}>
<label className={styles.label}>
{intl.formatMessage(intlMessages.closedCaptionsLabel)}
@ -150,7 +150,7 @@ class ClosedCaptionsMenu extends BaseMenu {
icons={false}
defaultChecked={this.state.settings.enabled}
onChange={() => this.handleToggle('enabled')}
ariaLabelledBy={'closedCaptions'}
ariaLabelledBy="closedCaptions"
ariaLabel={intl.formatMessage(intlMessages.closedCaptionsLabel)}
/>
</div>
@ -172,7 +172,7 @@ class ClosedCaptionsMenu extends BaseMenu {
<Checkbox
onChange={() => this.handleToggle('takeOwnership')}
checked={this.state.settings.takeOwnership}
ariaLabelledBy={'takeOwnership'}
ariaLabelledBy="takeOwnership"
ariaLabel={intl.formatMessage(intlMessages.takeOwnershipLabel)}
/>
</div>
@ -206,8 +206,7 @@ class ClosedCaptionsMenu extends BaseMenu {
{this.props.locales ? this.props.locales.map((locale, index) =>
(<option key={index} value={index}>
{locale}
</option>),
) : null }
</option>)) : null }
</select>
</label>
</div>
@ -238,8 +237,7 @@ class ClosedCaptionsMenu extends BaseMenu {
FONT_FAMILIES.map((family, index) =>
(<option key={index} value={index}>
{family}
</option>),
)
</option>))
}
</select>
</label>
@ -271,8 +269,7 @@ class ClosedCaptionsMenu extends BaseMenu {
FONT_SIZES.map((size, index) =>
(<option key={index} value={index}>
{size}
</option>),
)
</option>))
}
</select>
</label>
@ -314,8 +311,8 @@ class ClosedCaptionsMenu extends BaseMenu {
onChange={this.handleColorChange.bind(this, 'backgroundColor')}
color={this.state.settings.backgroundColor}
colors={COLORS}
width={'140px'}
triangle={'top-right'}
width="140px"
triangle="top-right"
/>
</div>
: null }
@ -356,8 +353,8 @@ class ClosedCaptionsMenu extends BaseMenu {
onChange={this.handleColorChange.bind(this, 'fontColor')}
color={this.state.settings.fontColor}
colors={COLORS}
width={'140px'}
triangle={'top-right'}
width="140px"
triangle="top-right"
/>
</div>
: null }

2
bigbluebutton-html5/imports/ui/components/settings/submenus/dataSaving/component.jsx
View File

@ -78,7 +78,7 @@ class DataSaving extends BaseMenu {
defaultChecked={false}
onChange={() => this.handleToggle('')}
ariaLabelledBy="screenShare"
ariaLabel="screenShare"
ariaLabel={intl.formatMessage(intlMessages.screenShareLabel)}
/>
</div>
</div>

5
bigbluebutton-html5/imports/ui/components/switch/component.jsx
View File

@ -26,7 +26,7 @@ export default class Switch extends Toggle {
onTouchStart={this.handleTouchStart}
onTouchMove={this.handleTouchMove}
onTouchEnd={this.handleTouchEnd}>
<div className='react-toggle-track'>
<div className='react-toggle-track' aria-hidden="true">
<div className='react-toggle-track-check'>
ON
</div>
@ -44,9 +44,8 @@ export default class Switch extends Toggle {
className='react-toggle-screenreader-only'
type='checkbox'
tabIndex='0'
aria-labelledby={ariaLabelledBy}
aria-label={ariaLabel}
aria-describedby={ariaDescribedBy}/>
<div id={ariaLabelledBy} hidden>{ariaLabel}</div>
<div id={ariaDescribedBy} hidden>{ariaDesc}</div>
</div>
);