diff options
author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2017-07-28 04:37:30 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-07-28 04:37:30 +0200 |
commit | b7d47c2aef23ec6219b6fb0038bc64629b285701 (patch) | |
tree | 8aec7cded8dd7bb9b341b3adcfa946e9a3990a1c /app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js | |
parent | 6270f9ce340ba8e120f743ff9bf1d76224871ca1 (diff) |
Improve accessibility (part 4) (#4408)
* fix(dropdown_menu): Keyboard navigation * fix(icon_button): Add aria-pressed attribute * fix(privacy_dropdown): Make accessible * fix(emoji_picker_dropdown): Make accessible * fix(icon_button): Support tabIndex * fix(actions_modal): Remove icon from tab order * fix(dropdown_menu): Add role=group * fix(setting_toggle): Toggle via space key * fix(dropdown_menu): Remove redundant handling of Space key * fix(emoji_picker_dropdown): Remove redundant Space key handling * fix(privacy_dropdown): Remove redundant Space key handling * fix(status): Switch to article and add aria-posinset, aria-setsize * fix(status_list): Use role=feed and pass more ARIA props to Status * chore(eslint): jsx-a11y/role-supports-aria-props
Diffstat (limited to 'app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js')
-rw-r--r-- | app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js | 23 |
1 files changed, 20 insertions, 3 deletions
diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js index acc584f20..b0f3b30fc 100644 --- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js @@ -65,6 +65,22 @@ export default class EmojiPickerDropdown extends React.PureComponent { this.setState({ active: false }); } + onToggle = (e) => { + if (!this.state.loading && (!e.key || e.key === 'Enter')) { + if (this.state.active) { + this.onHideDropdown(); + } else { + this.onShowDropdown(); + } + } + } + + onEmojiPickerKeyDown = (e) => { + if (e.key === 'Escape') { + this.onHideDropdown(); + } + } + render () { const { intl } = this.props; @@ -104,10 +120,11 @@ export default class EmojiPickerDropdown extends React.PureComponent { }; const { active, loading } = this.state; + const title = intl.formatMessage(messages.emoji); return ( - <Dropdown ref={this.setRef} className='emoji-picker__dropdown' onShow={this.onShowDropdown} onHide={this.onHideDropdown}> - <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)}> + <Dropdown ref={this.setRef} className='emoji-picker__dropdown' active={active && !loading} onShow={this.onShowDropdown} onHide={this.onHideDropdown}> + <DropdownTrigger className='emoji-button' title={title} aria-label={title} aria-pressed={active} role='button' onKeyDown={this.onToggle} tabIndex={0} > <img className={`emojione ${active && loading ? 'pulse-loading' : ''}`} alt='🙂' @@ -118,7 +135,7 @@ export default class EmojiPickerDropdown extends React.PureComponent { <DropdownContent className='dropdown__left'> { this.state.active && !this.state.loading && - (<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search />) + (<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} onKeyDown={this.onEmojiPickerKeyDown} categories={categories} search />) } </DropdownContent> </Dropdown> |