bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'emoji-selector-a11y' into 'develop'

Browse source 
Trap Tab key in emoji selector

See merge request soapbox-pub/soapbox-fe!698
This commit is contained in:
Alex Gleason 2021-08-30 20:06:26 +00:00
commit cf10f10668
2 changed files with 31 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
View file

@ -19,7 +19,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
} }
} }
onClick={[Function]} onClick={[Function]}
onKeyUp={[Function]} onKeyDown={[Function]}
tabIndex={-1} tabIndex={-1}
/> />
<button <button
@ -30,7 +30,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
} }
} }
onClick={[Function]} onClick={[Function]}
onKeyUp={[Function]} onKeyDown={[Function]}
tabIndex={-1} tabIndex={-1}
/> />
<button <button
@ -41,7 +41,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
} }
} }
onClick={[Function]} onClick={[Function]}
onKeyUp={[Function]} onKeyDown={[Function]}
tabIndex={-1} tabIndex={-1}
/> />
<button <button
@ -52,7 +52,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
} }
} }
onClick={[Function]} onClick={[Function]}
onKeyUp={[Function]} onKeyDown={[Function]}
tabIndex={-1} tabIndex={-1}
/> />
<button <button
@ -63,7 +63,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
} }
} }
onClick={[Function]} onClick={[Function]}
onKeyUp={[Function]} onKeyDown={[Function]}
tabIndex={-1} tabIndex={-1}
/> />
<button <button
@ -74,7 +74,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
} }
} }
onClick={[Function]} onClick={[Function]}
onKeyUp={[Function]} onKeyDown={[Function]}
tabIndex={-1} tabIndex={-1}
/> />
</div> </div>

33
app/soapbox/components/emoji_selector.js
View file

@ -35,21 +35,38 @@ class EmojiSelector extends ImmutablePureComponent {
} }
} }
handleKeyUp = i => e => { _selectPreviousEmoji = i => {
if (i !== 0) {
this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`).focus();
} else {
this.node.querySelector('.emoji-react-selector__emoji:last-child').focus();
}
};
_selectNextEmoji = i => {
if (i !== this.props.allowedEmoji.size - 1) {
this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`).focus();
} else {
this.node.querySelector('.emoji-react-selector__emoji:first-child').focus();
}
};
handleKeyDown = i => e => {
const { onUnfocus } = this.props; const { onUnfocus } = this.props;
switch (e.key) { switch (e.key) {
case 'Tab':
e.preventDefault();
if (e.shiftKey) this._selectPreviousEmoji(i);
else this._selectNextEmoji(i);
break;
case 'Left': case 'Left':
case 'ArrowLeft': case 'ArrowLeft':
if (i !== 0) { this._selectPreviousEmoji(i);
this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`).focus();
}
break; break;
case 'Right': case 'Right':
case 'ArrowRight': case 'ArrowRight':
if (i !== this.props.allowedEmoji.size - 1) { this._selectNextEmoji(i);
this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`).focus();
}
break; break;
case 'Escape': case 'Escape':
onUnfocus(); onUnfocus();
@ -94,7 +111,7 @@ class EmojiSelector extends ImmutablePureComponent {
className='emoji-react-selector__emoji' className='emoji-react-selector__emoji'
dangerouslySetInnerHTML={{ __html: emojify(emoji) }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }}
onClick={this.handleReact(emoji)} onClick={this.handleReact(emoji)}
onKeyUp={this.handleKeyUp(i, emoji)} onKeyDown={this.handleKeyDown(i, emoji)}
tabIndex={(visible || focused) ? 0 : -1} tabIndex={(visible || focused) ? 0 : -1}
/> />
))} ))}