From 8d9dc195d58c06bd477489006330330f3c39dd5c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 21 Oct 2019 16:51:40 +0100
Subject: [PATCH] Make ARIA happier with DateSeparator and tidy ELS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/EventListSummary.js | 10 +++++-----
 src/components/views/messages/DateSeparator.js    |  7 ++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/EventListSummary.js b/src/components/views/elements/EventListSummary.js
index 79712ebb45..7a69398071 100644
--- a/src/components/views/elements/EventListSummary.js
+++ b/src/components/views/elements/EventListSummary.js
@@ -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>
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 9cea4c5cd6..900fd61914 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -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>;
     }
 }