From ea54ea89d45eb7c24039e1e5711e338999c79c5a Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Fri, 29 Oct 2021 10:20:10 -0500
Subject: [PATCH] Make message separator more accessible. (#7056)

---
 src/components/views/messages/DateSeparator.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
index d66fcbf118..b20319e800 100644
--- a/src/components/views/messages/DateSeparator.tsx
+++ b/src/components/views/messages/DateSeparator.tsx
@@ -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>;
     }