mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-24 10:15:43 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make some ARIA promises

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-05-25 14:59:03 +01:00
parent 37d04d6ceb
commit 457f4c82db
4 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/emojipicker/Category.js
View file

@ -67,7 +67,13 @@ class Category extends React.PureComponent {
const localScrollTop = Math.max(0, scrollTop - listTop);
return (
<section className="mx_EmojiPicker_category" data-category-id={this.props.id}>
<section
id={`mx_EmojiPicker_category_${this.props.id}`}
className="mx_EmojiPicker_category"
data-category-id={this.props.id}
role="tabpanel"
aria-label={name}
>
<h2 className="mx_EmojiPicker_category_label">
{name}
</h2>

11
src/components/views/emojipicker/Emoji.js
View file

@ -16,6 +16,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import {MenuItem} from "../../structures/ContextMenu";
class Emoji extends React.PureComponent {
static propTypes = {
@ -30,14 +31,18 @@ class Emoji extends React.PureComponent {
const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
const isSelected = selectedEmojis && selectedEmojis.has(emoji.unicode);
return (
<li onClick={() => onClick(emoji)}
<MenuItem
element="li"
onClick={() => onClick(emoji)}
onMouseEnter={() => onMouseEnter(emoji)}
onMouseLeave={() => onMouseLeave(emoji)}
className="mx_EmojiPicker_item_wrapper">
className="mx_EmojiPicker_item_wrapper"
label={emoji.unicode}
>
<div className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
{emoji.unicode}
</div>
</li>
</MenuItem>
);
}
}

25
src/components/views/emojipicker/Header.js
View file

@ -16,6 +16,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import classNames from "classnames";
class Header extends React.PureComponent {
static propTypes = {
@ -26,13 +27,23 @@ class Header extends React.PureComponent {
render() {
return (
<nav className="mx_EmojiPicker_header">
{this.props.categories.map(category => (
<button disabled={!category.enabled} key={category.id} ref={category.ref}
className={`mx_EmojiPicker_anchor ${category.visible ? 'mx_EmojiPicker_anchor_visible' : ''}
mx_EmojiPicker_anchor_${category.id}`}
onClick={() => this.props.onAnchorClick(category.id)} title={category.name} />
))}
<nav className="mx_EmojiPicker_header" role="tablist">
{this.props.categories.map(category => {
const classes = classNames(`mx_EmojiPicker_anchor mx_EmojiPicker_anchor_${category.id}`, {
mx_EmojiPicker_anchor_visible: category.visible,
});
return <button
disabled={!category.enabled}
key={category.id}
ref={category.ref}
className={classes}
onClick={() => this.props.onAnchorClick(category.id)}
title={category.name}
role="tab"
aria-selected={category.visible}
aria-controls={`mx_EmojiPicker_category_${category.id}`}
/>;
})}
</nav>
);
}

2
src/components/views/emojipicker/QuickReactions.js
View file

@ -72,7 +72,7 @@ class QuickReactions extends React.Component {
</React.Fragment>
}
</h2>
<ul className="mx_EmojiPicker_list">
<ul className="mx_EmojiPicker_list" aria-label={_t("Quick Reactions")}>
{QUICK_REACTIONS.map(emoji => <Emoji
key={emoji.hexcode} emoji={emoji} onClick={this.props.onClick}
onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}