diff --git a/app/javascript/mastodon/actions/dropdown_menu.js b/app/javascript/mastodon/actions/dropdown_menu.js
index 217ba4e74a5..14f2939c78d 100644
--- a/app/javascript/mastodon/actions/dropdown_menu.js
+++ b/app/javascript/mastodon/actions/dropdown_menu.js
@@ -1,8 +1,8 @@
export const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN';
export const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE';
-export function openDropdownMenu(id, placement) {
- return { type: DROPDOWN_MENU_OPEN, id, placement };
+export function openDropdownMenu(id, placement, keyboard) {
+ return { type: DROPDOWN_MENU_OPEN, id, placement, keyboard };
}
export function closeDropdownMenu(id) {
diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js
index a5cf6479b0e..91b65a02fb6 100644
--- a/app/javascript/mastodon/components/dropdown_menu.js
+++ b/app/javascript/mastodon/components/dropdown_menu.js
@@ -23,6 +23,7 @@ class DropdownMenu extends React.PureComponent {
placement: PropTypes.string,
arrowOffsetLeft: PropTypes.string,
arrowOffsetTop: PropTypes.string,
+ openedViaKeyboard: PropTypes.bool,
};
static defaultProps = {
@@ -42,13 +43,15 @@ class DropdownMenu extends React.PureComponent {
componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false);
+ document.addEventListener('keydown', this.handleKeyDown, false);
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
- if (this.focusedItem) this.focusedItem.focus();
+ if (this.focusedItem && this.props.openedViaKeyboard) this.focusedItem.focus();
this.setState({ mounted: true });
}
componentWillUnmount () {
document.removeEventListener('click', this.handleDocumentClick, false);
+ document.removeEventListener('keydown', this.handleKeyDown, false);
document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
}
@@ -62,13 +65,10 @@ class DropdownMenu extends React.PureComponent {
handleKeyDown = e => {
const items = Array.from(this.node.getElementsByTagName('a'));
- const index = items.indexOf(e.currentTarget);
+ const index = items.indexOf(document.activeElement);
let element;
switch(e.key) {
- case 'Enter':
- this.handleClick(e);
- break;
case 'ArrowDown':
element = items[index+1];
if (element) {
@@ -96,6 +96,12 @@ class DropdownMenu extends React.PureComponent {
}
}
+ handleItemKeyDown = e => {
+ if (e.key === 'Enter') {
+ this.handleClick(e);
+ }
+ }
+
handleClick = e => {
const i = Number(e.currentTarget.getAttribute('data-index'));
const { action, to } = this.props.items[i];
@@ -120,7 +126,7 @@ class DropdownMenu extends React.PureComponent {
return (
-
+
{text}
@@ -170,6 +176,7 @@ export default class Dropdown extends React.PureComponent {
onClose: PropTypes.func.isRequired,
dropdownPlacement: PropTypes.string,
openDropdownId: PropTypes.number,
+ openedViaKeyboard: PropTypes.bool,
};
static defaultProps = {
@@ -180,14 +187,14 @@ export default class Dropdown extends React.PureComponent {
id: id++,
};
- handleClick = ({ target }) => {
+ handleClick = ({ target, type }) => {
if (this.state.id === this.props.openDropdownId) {
this.handleClose();
} else {
const { top } = target.getBoundingClientRect();
const placement = top * 2 < innerHeight ? 'bottom' : 'top';
- this.props.onOpen(this.state.id, this.handleItemClick, placement);
+ this.props.onOpen(this.state.id, this.handleItemClick, placement, type !== 'click');
}
}
@@ -197,6 +204,11 @@ export default class Dropdown extends React.PureComponent {
handleKeyDown = e => {
switch(e.key) {
+ case ' ':
+ case 'Enter':
+ this.handleClick(e);
+ e.preventDefault();
+ break;
case 'Escape':
this.handleClose();
break;
@@ -233,7 +245,7 @@ export default class Dropdown extends React.PureComponent {
}
render () {
- const { icon, items, size, title, disabled, dropdownPlacement, openDropdownId } = this.props;
+ const { icon, items, size, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard } = this.props;
const open = this.state.id === openDropdownId;
return (
@@ -249,7 +261,7 @@ export default class Dropdown extends React.PureComponent {
/>
-
+
);
diff --git a/app/javascript/mastodon/containers/dropdown_menu_container.js b/app/javascript/mastodon/containers/dropdown_menu_container.js
index 7cbcdcd3572..73c8a1e530e 100644
--- a/app/javascript/mastodon/containers/dropdown_menu_container.js
+++ b/app/javascript/mastodon/containers/dropdown_menu_container.js
@@ -8,15 +8,16 @@ const mapStateToProps = state => ({
isModalOpen: state.get('modal').modalType === 'ACTIONS',
dropdownPlacement: state.getIn(['dropdown_menu', 'placement']),
openDropdownId: state.getIn(['dropdown_menu', 'openId']),
+ openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),
});
const mapDispatchToProps = (dispatch, { status, items }) => ({
- onOpen(id, onItemClick, dropdownPlacement) {
+ onOpen(id, onItemClick, dropdownPlacement, keyboard) {
dispatch(isUserTouching() ? openModal('ACTIONS', {
status,
actions: items,
onClick: onItemClick,
- }) : openDropdownMenu(id, dropdownPlacement));
+ }) : openDropdownMenu(id, dropdownPlacement, keyboard));
},
onClose(id) {
dispatch(closeModal());
diff --git a/app/javascript/mastodon/reducers/dropdown_menu.js b/app/javascript/mastodon/reducers/dropdown_menu.js
index 5449884cc58..36fd4f13217 100644
--- a/app/javascript/mastodon/reducers/dropdown_menu.js
+++ b/app/javascript/mastodon/reducers/dropdown_menu.js
@@ -4,12 +4,12 @@ import {
DROPDOWN_MENU_CLOSE,
} from '../actions/dropdown_menu';
-const initialState = Immutable.Map({ openId: null, placement: null });
+const initialState = Immutable.Map({ openId: null, placement: null, keyboard: false });
export default function dropdownMenu(state = initialState, action) {
switch (action.type) {
case DROPDOWN_MENU_OPEN:
- return state.merge({ openId: action.id, placement: action.placement });
+ return state.merge({ openId: action.id, placement: action.placement, keyboard: action.keyboard });
case DROPDOWN_MENU_CLOSE:
return state.get('openId') === action.id ? state.set('openId', null) : state;
default: