Make ARIA happier with DateSeparator and tidy ELS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-10-21 16:51:40 +01:00
parent fc45a69bb7
commit 8d9dc195d5
2 changed files with 11 additions and 6 deletions

View file

@ -62,12 +62,12 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
</div>
<div className="mx_EventTile_line">
<div className="mx_EventTile_info">
<span className="mx_EventListSummary_avatars" onClick={toggleExpanded}>
{ avatars }
</span>
<span className="mx_EventListSummary_avatars" onClick={toggleExpanded}>
{ avatars }
</span>
<span className="mx_TextualEvent mx_EventListSummary_summary">
{ summaryText }
</span>
{ summaryText }
</span>
</div>
</div>
</div>

View file

@ -56,6 +56,11 @@ export default class DateSeparator extends React.Component {
}
render() {
return <h2 className="mx_DateSeparator"><hr /><div>{ this.getLabel() }</div><hr /></h2>;
// 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">
<hr role="none" />
<div>{ this.getLabel() }</div>
<hr role="none" />
</h2>;
}
}