diff options
Diffstat (limited to 'app/javascript/mastodon/features/compose/components')
-rw-r--r-- | app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js | 23 | ||||
-rw-r--r-- | app/javascript/mastodon/features/compose/components/privacy_dropdown.js | 16 |
2 files changed, 30 insertions, 9 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> diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js index 33ce7db46..f331df382 100644 --- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js @@ -60,10 +60,14 @@ export default class PrivacyDropdown extends React.PureComponent { } handleClick = (e) => { - const value = e.currentTarget.getAttribute('data-index'); - e.preventDefault(); - this.setState({ open: false }); - this.props.onChange(value); + if (e.key === 'Escape') { + this.setState({ open: false }); + } else if (!e.key || e.key === 'Enter') { + const value = e.currentTarget.getAttribute('data-index'); + e.preventDefault(); + this.setState({ open: false }); + this.props.onChange(value); + } } onGlobalClick = (e) => { @@ -105,10 +109,10 @@ export default class PrivacyDropdown extends React.PureComponent { return ( <div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> - <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div> + <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} pressed={open} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div> <div className='privacy-dropdown__dropdown'> {open && this.options.map(item => - <div role='button' tabIndex='0' key={item.value} data-index={item.value} onClick={this.handleClick} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> + <div role='button' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleClick} onClick={this.handleClick} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> <div className='privacy-dropdown__option__icon'><i className={`fa fa-fw fa-${item.icon}`} /></div> <div className='privacy-dropdown__option__content'> <strong>{item.text}</strong> |