Add relevant aria attribute for selected emoji in the emoji picker (#31125)
* Add relevant aria attribute for selected emoji in the emoji picker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add aria-multiselectable Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Do not specify aria-selected/pressed when element is disabled Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use checkbox role for reaction picker as gridcell + aria-selected has very inconsistent screenreader support Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix keyboard handling for modified DOM structure Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix enter behaviour Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
committed by
GitHub
GitHub
parent
fdf54dd9c2
commit
43485594b5
@@ -61,17 +61,17 @@ class Category extends React.PureComponent<IProps> {
|
||||
return (
|
||||
<div key={rowIndex} role="row">
|
||||
{emojisForRow.map((emoji) => (
|
||||
<Emoji
|
||||
key={emoji.hexcode}
|
||||
emoji={emoji}
|
||||
selectedEmojis={selectedEmojis}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
disabled={this.props.isEmojiDisabled?.(emoji.unicode)}
|
||||
id={`mx_EmojiPicker_item_${this.props.id}_${hexEncode(emoji.unicode)}`}
|
||||
role="gridcell"
|
||||
/>
|
||||
<div role="gridcell" className="mx_EmojiPicker_item_wrapper" key={emoji.hexcode}>
|
||||
<Emoji
|
||||
emoji={emoji}
|
||||
selectedEmojis={selectedEmojis}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
disabled={this.props.isEmojiDisabled?.(emoji.unicode)}
|
||||
id={`mx_EmojiPicker_item_${this.props.id}_${hexEncode(emoji.unicode)}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
@@ -118,6 +118,7 @@ class Category extends React.PureComponent<IProps> {
|
||||
overflowMargin={0}
|
||||
renderItem={this.renderEmojiRow}
|
||||
role="grid"
|
||||
aria-multiselectable
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -15,13 +15,17 @@ import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
|
||||
|
||||
interface IProps {
|
||||
emoji: IEmoji;
|
||||
/**
|
||||
* Set of which emojis are already selected and should be decorated as such.
|
||||
* If specified, emoji will use a checkbox role with aria-checked set appropriately.
|
||||
*/
|
||||
selectedEmojis?: Set<string>;
|
||||
onClick(ev: ButtonEvent, emoji: IEmoji): void;
|
||||
onMouseEnter(emoji: IEmoji): void;
|
||||
onMouseLeave(emoji: IEmoji): void;
|
||||
disabled?: boolean;
|
||||
id?: string;
|
||||
role?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
class Emoji extends React.PureComponent<IProps> {
|
||||
@@ -34,9 +38,10 @@ class Emoji extends React.PureComponent<IProps> {
|
||||
onClick={(ev: ButtonEvent) => onClick(ev, emoji)}
|
||||
onMouseEnter={() => onMouseEnter(emoji)}
|
||||
onMouseLeave={() => onMouseLeave(emoji)}
|
||||
className="mx_EmojiPicker_item_wrapper"
|
||||
disabled={this.props.disabled}
|
||||
role={this.props.role}
|
||||
className={this.props.className}
|
||||
disabled={this.props.disabled || undefined}
|
||||
role={selectedEmojis ? "checkbox" : undefined}
|
||||
aria-checked={this.props.disabled ? undefined : isSelected}
|
||||
focusOnMouseOver
|
||||
>
|
||||
<div className={`mx_EmojiPicker_item ${isSelected ? "mx_EmojiPicker_item_selected" : ""}`}>
|
||||
|
||||
@@ -152,24 +152,42 @@ class EmojiPicker extends React.Component<IProps, IState> {
|
||||
this.updateVisibility();
|
||||
};
|
||||
|
||||
// Given a roving emoji button returns the role=row element containing it
|
||||
private getRow(rovingNode?: Element): Element | undefined {
|
||||
return this.getGridcell(rovingNode)?.parentElement ?? undefined;
|
||||
}
|
||||
|
||||
// Given a roving emoji button returns the role=gridcell element containing it
|
||||
private getGridcell(rovingNode?: Element): Element | undefined {
|
||||
return rovingNode?.parentElement ?? undefined;
|
||||
}
|
||||
|
||||
// Given a role=gridcell node returns the roving emoji button contained within
|
||||
private getRovingNode(gridcellNode?: Element): Element | undefined {
|
||||
return gridcellNode?.children[0];
|
||||
}
|
||||
|
||||
private keyboardNavigation(ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void {
|
||||
const node = state.activeNode;
|
||||
const parent = node?.parentElement;
|
||||
if (!parent || !state.activeNode) return;
|
||||
const rowIndex = Array.from(parent.children).indexOf(node);
|
||||
const rowElement = this.getRow(state.activeNode);
|
||||
const gridcellNode = this.getGridcell(state.activeNode);
|
||||
if (!rowElement || !gridcellNode || !state.activeNode) return;
|
||||
|
||||
// Index of element within row container
|
||||
const columnIndex = Array.from(rowElement.children).indexOf(gridcellNode);
|
||||
// Index of element within the list of roving nodes
|
||||
const refIndex = state.nodes.indexOf(state.activeNode);
|
||||
|
||||
let focusNode: HTMLElement | undefined;
|
||||
let newParent: HTMLElement | undefined;
|
||||
let newRowElement: Element | undefined;
|
||||
switch (ev.key) {
|
||||
case Key.ARROW_LEFT:
|
||||
focusNode = state.nodes[refIndex - 1];
|
||||
newParent = focusNode?.parentElement ?? undefined;
|
||||
newRowElement = this.getRow(focusNode);
|
||||
break;
|
||||
|
||||
case Key.ARROW_RIGHT:
|
||||
focusNode = state.nodes[refIndex + 1];
|
||||
newParent = focusNode?.parentElement ?? undefined;
|
||||
newRowElement = this.getRow(focusNode);
|
||||
break;
|
||||
|
||||
case Key.ARROW_UP:
|
||||
@@ -177,11 +195,14 @@ class EmojiPicker extends React.Component<IProps, IState> {
|
||||
// For up/down we find the prev/next parent by inspecting the refs either side of our row
|
||||
const node =
|
||||
ev.key === Key.ARROW_UP
|
||||
? state.nodes[refIndex - rowIndex - 1]
|
||||
: state.nodes[refIndex - rowIndex + EMOJIS_PER_ROW];
|
||||
newParent = node?.parentElement ?? undefined;
|
||||
const newTarget = newParent?.children[clamp(rowIndex, 0, newParent.children.length - 1)];
|
||||
focusNode = state.nodes.find((r) => r === newTarget);
|
||||
? state.nodes[refIndex - columnIndex - 1]
|
||||
: state.nodes[refIndex - columnIndex + EMOJIS_PER_ROW];
|
||||
newRowElement = this.getRow(node);
|
||||
if (newRowElement) {
|
||||
const newColumnIndex = clamp(columnIndex, 0, newRowElement.children.length - 1);
|
||||
const newTarget = this.getRovingNode(newRowElement?.children[newColumnIndex]);
|
||||
focusNode = state.nodes.find((r) => r === newTarget);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -197,7 +218,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
|
||||
payload: { node: focusNode },
|
||||
});
|
||||
|
||||
if (parent !== newParent) {
|
||||
if (rowElement !== newRowElement) {
|
||||
focusNode?.scrollIntoView({
|
||||
behavior: "auto",
|
||||
block: "center",
|
||||
@@ -315,7 +336,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
|
||||
|
||||
private onEnterFilter = (): void => {
|
||||
const btn = this.scrollRef.current?.containerRef.current?.querySelector<HTMLButtonElement>(
|
||||
'.mx_EmojiPicker_item_wrapper[tabindex="0"]',
|
||||
'.mx_EmojiPicker_item_wrapper [tabindex="0"]',
|
||||
);
|
||||
btn?.click();
|
||||
this.props.onFinished();
|
||||
|
||||
@@ -73,6 +73,7 @@ class QuickReactions extends React.Component<IProps, IState> {
|
||||
onMouseEnter={this.onMouseEnter}
|
||||
onMouseLeave={this.onMouseLeave}
|
||||
selectedEmojis={this.props.selectedEmojis}
|
||||
className="mx_EmojiPicker_item_wrapper"
|
||||
/>
|
||||
))}
|
||||
</Toolbar>
|
||||
|
||||
Reference in New Issue
Block a user