mirror of https://github.com/vector-im/riot-web
Make ARIA happier with DateSeparator and tidy ELS
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/21833/head
parent
fc45a69bb7
commit
8d9dc195d5
|
@ -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>
|
||||||
|
|
|
@ -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>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue