imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve A11Y of timeline. Show TS & Actions on focus-within

Browse source
This commit is contained in:
Michael Telatynski 2019-11-01 10:50:58 +00:00
parent db0e643f4d
commit fd4cdd0dec
6 changed files with 18 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/messages/DateSeparator.js
View file

@ -57,7 +57,7 @@ export default class DateSeparator extends React.Component {
render() {
// ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
return <h2 className="mx_DateSeparator" role="separator">
return <h2 className="mx_DateSeparator" role="separator" tabIndex={-1}>
<hr role="none" />
<div>{ this.getLabel() }</div>
<hr role="none" />

3
src/components/views/messages/MessageActionBar.js
View file

@ -180,7 +180,8 @@ export default class MessageActionBar extends React.PureComponent {
/>;
}
return <div className="mx_MessageActionBar">
// aria-live=off to not have this read out automatically as navigating around timeline, gets repetitive.
return <div className="mx_MessageActionBar" role="toolbar" aria-label={_t("Message Actions")} aria-live="off">
{reactButton}
{replyButton}
{editButton}

2
src/components/views/messages/MessageTimestamp.js
View file

@ -28,7 +28,7 @@ export default class MessageTimestamp extends React.Component {
render() {
const date = new Date(this.props.ts);
return (
<span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)}>
<span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)} aria-hidden={true}>
{ formatTime(date, this.props.showTwelveHour) }
</span>
);