moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'accessible-emoji-picker' into 'develop' 

Keyboard-accessible emoji picker

See merge request soapbox-pub/soapbox-fe!634
This commit is contained in:
Alex Gleason 2021-07-21 16:41:26 +00:00
parent 196b55f6d1 c5dfd6c7d7
commit b22f20a390
14 changed files with 298 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
View File

@ -2,55 +2,80 @@
exports[`<EmojiSelector /> renders correctly 1`] = `
<div
className="emoji-react-selector"
onBlur={[Function]}
onFocus={[Function]}
tabIndex="-1"
>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/emoji/1f44d.svg\\" />",
<div
className="emoji-react-selector"
onBlur={[Function]}
>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/emoji/1f44d.svg\\" />",
}
}
}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/emoji/2764.svg\\" />",
onClick={[Function]}
onKeyUp={[Function]}
tabIndex={-1}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/emoji/2764.svg\\" />",
}
}
}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/emoji/1f606.svg\\" />",
onClick={[Function]}
onKeyUp={[Function]}
tabIndex={-1}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/emoji/1f606.svg\\" />",
}
}
}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/emoji/1f62e.svg\\" />",
onClick={[Function]}
onKeyUp={[Function]}
tabIndex={-1}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/emoji/1f62e.svg\\" />",
}
}
}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/emoji/1f622.svg\\" />",
onClick={[Function]}
onKeyUp={[Function]}
tabIndex={-1}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/emoji/1f622.svg\\" />",
}
}
}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/emoji/1f629.svg\\" />",
onClick={[Function]}
onKeyUp={[Function]}
tabIndex={-1}
/>
<button
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/emoji/1f629.svg\\" />",
}
}
}
/>
onClick={[Function]}
onKeyUp={[Function]}
tabIndex={-1}
/>
</div>
</div>
`;

5
app/soapbox/components/__tests__/emoji_selector-test.js
View File

@ -4,7 +4,10 @@ import EmojiSelector from '../emoji_selector';
describe('<EmojiSelector />', () => {
it('renders correctly', () => {
const component = createComponent(<EmojiSelector />);
const children = <EmojiSelector />;
children.__proto__.addEventListener = () => {};
const component = createComponent(children, {}, true);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

84
app/soapbox/components/emoji_selector.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { HotKeys } from 'react-hotkeys';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import emojify from 'soapbox/features/emoji/emoji';
@ -15,28 +16,89 @@ class EmojiSelector extends ImmutablePureComponent {
static propTypes = {
onReact: PropTypes.func.isRequired,
onUnfocus: PropTypes.func,
visible: PropTypes.bool,
focused: PropTypes.bool,
}
static defaultProps = {
onReact: () => {},
onUnfocus: () => {},
visible: false,
}
handleBlur = e => {
const { focused, onUnfocus } = this.props;
if (focused && (!e.relatedTarget || !e.relatedTarget.classList.contains('emoji-react-selector__emoji'))) {
onUnfocus();
}
}
handleKeyUp = i => e => {
const { onUnfocus } = this.props;
switch (e.key) {
case 'Left':
case 'ArrowLeft':
if (i !== 0) {
this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`).focus();
}
break;
case 'Right':
case 'ArrowRight':
if (i !== this.props.allowedEmoji.size - 1) {
this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`).focus();
}
break;
case 'Escape':
onUnfocus();
break;
}
}
handleReact = emoji => () => {
const { onReact, focused, onUnfocus } = this.props;
onReact(emoji)();
if (focused) {
onUnfocus();
}
}
handlers = {
open: () => {},
};
setRef = c => {
this.node = c;
}
render() {
const { onReact, visible, allowedEmoji } = this.props;
const { visible, focused, allowedEmoji } = this.props;
return (
<div className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible })}>
{allowedEmoji.map((emoji, i) => (
<button
key={i}
className='emoji-react-selector__emoji'
dangerouslySetInnerHTML={{ __html: emojify(emoji) }}
onClick={onReact(emoji)}
/>
))}
</div>
<HotKeys
handlers={this.handlers}
>
<div
className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}
onBlur={this.handleBlur}
ref={this.setRef}
>
{allowedEmoji.map((emoji, i) => (
<button
key={i}
className='emoji-react-selector__emoji'
dangerouslySetInnerHTML={{ __html: emojify(emoji) }}
onClick={this.handleReact(emoji)}
onKeyUp={this.handleKeyUp(i, emoji)}
tabIndex={(visible || focused) ? 0 : -1}
/>
))}
</div>
</HotKeys>
);
}

32
app/soapbox/components/status.js
View File

@ -108,6 +108,7 @@ class Status extends ImmutablePureComponent {
state = {
showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
statusId: undefined,
emojiSelectorFocused: false,
};
// Track height changes we know about to compensate scrolling
@ -255,6 +256,27 @@ class Status extends ImmutablePureComponent {
this.handleToggleMediaVisibility();
}
handleHotkeyReact = () => {
this._expandEmojiSelector();
}
handleEmojiSelectorExpand = e => {
if (e.key === 'Enter') {
this._expandEmojiSelector();
}
e.preventDefault();
}
handleEmojiSelectorUnfocus = () => {
this.setState({ emojiSelectorFocused: false });
}
_expandEmojiSelector = () => {
this.setState({ emojiSelectorFocused: true });
const firstEmoji = this.node.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
firstEmoji.focus();
};
_properStatus() {
const { status } = this.props;
@ -278,6 +300,7 @@ class Status extends ImmutablePureComponent {
let { status, account, ...other } = this.props;
if (status === null) {
return null;
}
@ -443,6 +466,7 @@ class Status extends ImmutablePureComponent {
moveDown: this.handleHotkeyMoveDown,
toggleHidden: this.handleHotkeyToggleHidden,
toggleSensitive: this.handleHotkeyToggleSensitive,
react: this.handleHotkeyReact,
};
const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
@ -506,7 +530,13 @@ class Status extends ImmutablePureComponent {
</button>
)}
<StatusActionBar status={status} account={account} {...other} />
<StatusActionBar
status={status}
account={account}
emojiSelectorFocused={this.state.emojiSelectorFocused}
handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
{...other}
/>
</div>
</div>
</HotKeys>

14
app/soapbox/components/status_action_bar.js
View File

@ -91,6 +91,10 @@ class StatusActionBar extends ImmutablePureComponent {
isStaff: PropTypes.bool.isRequired,
isAdmin: PropTypes.bool.isRequired,
allowedEmoji: ImmutablePropTypes.list,
emojiSelectorFocused: PropTypes.bool,
handleEmojiSelectorUnfocus: PropTypes.func.isRequired,
emojiSelectorFocused: PropTypes.bool,
handleEmojiSelectorUnfocus: PropTypes.func.isRequired,
};
static defaultProps = {
@ -106,6 +110,7 @@ class StatusActionBar extends ImmutablePureComponent {
updateOnProps = [
'status',
'withDismiss',
'emojiSelectorFocused',
]
handleReplyClick = () => {
@ -359,7 +364,7 @@ class StatusActionBar extends ImmutablePureComponent {
}
render() {
const { status, intl, allowedEmoji } = this.props;
const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus } = this.props;
const { emojiSelectorVisible } = this.state;
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
@ -422,7 +427,12 @@ class StatusActionBar extends ImmutablePureComponent {
onMouseLeave={this.handleLikeButtonLeave}
ref={this.setRef}
>
<EmojiSelector onReact={this.handleReactClick} visible={emojiSelectorVisible} />
<EmojiSelector
onReact={this.handleReactClick}
visible={emojiSelectorVisible}
focused={emojiSelectorFocused}
onUnfocus={handleEmojiSelectorUnfocus}
/>
<IconButton
className='status__action-bar-button star-icon'
animate

4
app/soapbox/components/status_list.js
View File

@ -46,9 +46,9 @@ export default class StatusList extends ImmutablePureComponent {
getCurrentStatusIndex = (id, featured) => {
if (featured) {
return this.props.featuredStatusIds.indexOf(id);
return this.props.featuredStatusIds.keySeq().findIndex(key => key === id);
} else {
return this.props.statusIds.indexOf(id) + this.getFeaturedStatusCount();
return this.props.statusIds.keySeq().findIndex(key => key === id) + this.getFeaturedStatusCount();
}
}

36
app/soapbox/features/status/components/action_bar.js
View File

@ -48,6 +48,7 @@ const messages = defineMessages({
reactionOpenMouth: { id: 'status.reactions.open_mouth', defaultMessage: 'Wow' },
reactionCry: { id: 'status.reactions.cry', defaultMessage: 'Sad' },
reactionWeary: { id: 'status.reactions.weary', defaultMessage: 'Weary' },
emojiPickerExpand: { id: 'status.reactions_expand', defaultMessage: 'Select emoji' },
});
const mapStateToProps = state => {
@ -99,6 +100,9 @@ class ActionBar extends React.PureComponent {
isStaff: PropTypes.bool.isRequired,
isAdmin: PropTypes.bool.isRequired,
allowedEmoji: ImmutablePropTypes.list,
emojiSelectorFocused: PropTypes.bool,
handleEmojiSelectorExpand: PropTypes.func.isRequired,
handleEmojiSelectorUnfocus: PropTypes.func.isRequired,
};
static defaultProps = {
@ -107,6 +111,7 @@ class ActionBar extends React.PureComponent {
state = {
emojiSelectorVisible: false,
emojiSelectorFocused: false,
}
handleReplyClick = () => {
@ -169,10 +174,16 @@ class ActionBar extends React.PureComponent {
} else {
this.props.onOpenUnauthorizedModal();
}
this.setState({ emojiSelectorVisible: false });
this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false });
};
}
handleHotkeyEmoji = () => {
const { emojiSelectorVisible } = this.state;
this.setState({ emojiSelectorVisible: !emojiSelectorVisible });
}
handleDeleteClick = () => {
this.props.onDelete(this.props.status, this.context.router.history);
}
@ -262,12 +273,12 @@ class ActionBar extends React.PureComponent {
componentDidMount() {
document.addEventListener('click', e => {
if (this.node && !this.node.contains(e.target))
this.setState({ emojiSelectorVisible: false });
this.setState({ emojiSelectorVisible: false, emojiSelectorFocused: false });
});
}
render() {
const { status, intl, me, isStaff, isAdmin, allowedEmoji } = this.props;
const { status, intl, me, isStaff, isAdmin, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorExpand, handleEmojiSelectorUnfocus } = this.props;
const { emojiSelectorVisible } = this.state;
const ownAccount = status.getIn(['account', 'id']) === me;
@ -351,6 +362,7 @@ class ActionBar extends React.PureComponent {
let reblog_disabled = (status.get('visibility') === 'direct' || status.get('visibility') === 'private');
return (
<div className='detailed-status__action-bar'>
<div className='detailed-status__button'>
@ -377,7 +389,12 @@ class ActionBar extends React.PureComponent {
onMouseLeave={this.handleLikeButtonLeave}
ref={this.setRef}
>
<EmojiSelector onReact={this.handleReactClick} visible={emojiSelectorVisible} />
<EmojiSelector
onReact={this.handleReactClick}
visible={emojiSelectorVisible}
focused={emojiSelectorFocused}
onUnfocus={handleEmojiSelectorUnfocus}
/>
<IconButton
className='star-icon'
animate
@ -388,6 +405,14 @@ class ActionBar extends React.PureComponent {
text={meEmojiTitle}
onClick={this.handleLikeButtonClick}
/>
<IconButton
className='emoji-picker-expand'
animate
title={intl.formatMessage(messages.emojiPickerExpand)}
icon='caret-down'
onKeyUp={handleEmojiSelectorExpand}
onHover
/>
</div>
{shareButton}
@ -400,4 +425,5 @@ class ActionBar extends React.PureComponent {
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ActionBar));
export default injectIntl(
connect(mapStateToProps, mapDispatchToProps)(ActionBar));

32
app/soapbox/features/status/index.js
View File

@ -146,6 +146,7 @@ class Status extends ImmutablePureComponent {
fullscreen: false,
showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
loadedStatusId: undefined,
emojiSelectorFocused: false,
};
componentDidMount() {
@ -363,6 +364,10 @@ class Status extends ImmutablePureComponent {
this.handleToggleMediaVisibility();
}
handleHotkeyReact = () => {
this._expandEmojiSelector();
}
handleMoveUp = id => {
const { status, ancestorsIds, descendantsIds } = this.props;
@ -397,6 +402,23 @@ class Status extends ImmutablePureComponent {
}
}
handleEmojiSelectorExpand = e => {
if (e.key === 'Enter') {
this._expandEmojiSelector();
}
e.preventDefault();
}
handleEmojiSelectorUnfocus = () => {
this.setState({ emojiSelectorFocused: false });
}
_expandEmojiSelector = () => {
this.setState({ emojiSelectorFocused: true });
const firstEmoji = this.status.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
firstEmoji.focus();
};
_selectChild(index, align_top) {
const container = this.node;
const element = container.querySelectorAll('.focusable')[index];
@ -445,6 +467,10 @@ class Status extends ImmutablePureComponent {
this.node = c;
}
setStatusRef = c => {
this.status = c;
}
componentDidUpdate(prevProps, prevState) {
const { params, status } = this.props;
const { ancestorsIds } = prevProps;
@ -510,6 +536,7 @@ class Status extends ImmutablePureComponent {
openProfile: this.handleHotkeyOpenProfile,
toggleHidden: this.handleHotkeyToggleHidden,
toggleSensitive: this.handleHotkeyToggleSensitive,
react: this.handleHotkeyReact,
};
return (
@ -537,7 +564,7 @@ class Status extends ImmutablePureComponent {
{ancestors}
<HotKeys handlers={handlers}>
<div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
<div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
<DetailedStatus
status={status}
onOpenVideo={this.handleOpenVideo}
@ -569,6 +596,9 @@ class Status extends ImmutablePureComponent {
onToggleStatusSensitivity={this.handleToggleStatusSensitivity}
onDeleteStatus={this.handleDeleteStatus}
allowedEmoji={this.props.allowedEmoji}
emojiSelectorFocused={this.state.emojiSelectorFocused}
handleEmojiSelectorExpand={this.handleEmojiSelectorExpand}
handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
/>
</div>
</HotKeys>

4
app/soapbox/features/ui/components/hotkeys_modal.js
View File

@ -49,6 +49,10 @@ class HotkeysModal extends ImmutablePureComponent {
<td><kbd>f</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></td>
</tr>
<tr>
<td><kbd>e</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></td>
</tr>
<tr>
<td><kbd>b</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></td>

1
app/soapbox/features/ui/index.js
View File

@ -130,6 +130,7 @@ const keyMap = {
forceNew: 'option+n',
reply: 'r',
favourite: 'f',
react: 'e',
boost: 'b',
mention: 'm',
open: ['enter', 'o'],

2
app/soapbox/locales/pl.json
View File

@ -403,6 +403,7 @@
"keyboard_shortcuts.notifications": "aby otworzyć kolumnę powiadomień",
"keyboard_shortcuts.pinned": "aby przejść do listy przypiętych wpisów",
"keyboard_shortcuts.profile": "aby przejść do profilu autora wpisu",
"keyboard_shortcuts.react": "aby zareagować na wpis",
"keyboard_shortcuts.reply": "aby odpowiedzieć",
"keyboard_shortcuts.requests": "aby przejść do listy próśb o możliwość śledzenia",
"keyboard_shortcuts.search": "aby przejść do pola wyszukiwania",
@ -707,6 +708,7 @@
"status.reactions.like": "Lubię",
"status.reactions.open_mouth": "Wow",
"status.reactions.weary": "Nuda…",
"status.reactions_expand": "Wybierz emoji",
"status.read_more": "Czytaj dalej",
"status.reblog": "Podbij",
"status.reblog_private": "Podbij dla odbiorców oryginalnego wpisu",

16
app/styles/components/detailed-status.scss
View File

@ -94,6 +94,22 @@
transform: translateY(-1px);
}
}
.emoji-picker-expand {
display: none;
}
&:focus-within {
.emoji-picker-expand {
display: inline-flex;
width: 0;
overflow: hidden;
&:focus-within {
width: unset;
}
}
}
}
.detailed-status__wrapper {

6
app/styles/components/emoji-reacts.scss
View File

@ -80,7 +80,8 @@
transition: 0.1s;
z-index: 999;
&--visible {
&--visible,
&--focused {
opacity: 1;
pointer-events: all;
}
@ -99,7 +100,8 @@
transition: 0.1s;
}
&:hover {
&:hover,
&:focus {
img {
width: 36px;
height: 36px;

19
app/styles/components/status.scss
View File

@ -677,3 +677,22 @@ a.status-card.compact:hover {
border-radius: 4px;
}
}
.status__action-bar,
.detailed-status__action-bar {
.emoji-picker-expand {
display: none;
}
&:focus-within {
.emoji-picker-expand {
display: inline-flex;
width: 0;
overflow: hidden;
&:focus-within {
width: unset;
}
}
}
}