Make ARIA happier with DateSeparator and tidy ELS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
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>
<div className="mx_EventTile_line"> <div className="mx_EventTile_line">
<div className="mx_EventTile_info"> <div className="mx_EventTile_info">
<span className="mx_EventListSummary_avatars" onClick={toggleExpanded}> <span className="mx_EventListSummary_avatars" onClick={toggleExpanded}>
{ avatars } { avatars }
</span> </span>
<span className="mx_TextualEvent mx_EventListSummary_summary"> <span className="mx_TextualEvent mx_EventListSummary_summary">
{ summaryText } { summaryText }
</span> </span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -56,6 +56,11 @@ export default class DateSeparator extends React.Component {
} }
render() { 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>;
} }
} }