Make message separator more accessible. (#7056)

This commit is contained in:
Nolan Darilek 2021-10-29 10:20:10 -05:00 committed by GitHub
parent 98edc467e0
commit ea54ea89d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -65,9 +65,9 @@ export default class DateSeparator extends React.Component<IProps> {
render() {
// ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
return <h2 className="mx_DateSeparator" role="separator" tabIndex={-1}>
return <h2 className="mx_DateSeparator" role="separator" tabIndex={-1} aria-label={this.getLabel()}>
<hr role="none" />
<div>{ this.getLabel() }</div>
<div aria-hidden="true">{ this.getLabel() }</div>
<hr role="none" />
</h2>;
}