From b5e866aeba49053db0bb0b5566bdbb71e65e4483 Mon Sep 17 00:00:00 2001
From: Joe Glombek <gh@joe.gl>
Date: Tue, 14 Apr 2020 10:33:30 +0100
Subject: [PATCH] Append "active" to currently selected section for screen
 readers (#7946)

---
 .../src/views/components/application/umb-sections.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
index d435c6ead7..f43353ede9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
@@ -6,13 +6,15 @@
                 <a href="#/{{section.alias}}"
                    ng-dblclick="sectionDblClick(section)"
                    ng-click="sectionClick($event, section)"
-                   prevent-default>
+                   prevent-default
+                   ng-attr-aria-current="{{section.alias == currentSection ? 'page' : undefined}}"
+                   aria-label="{{section.name + (section.alias == currentSection ? ' (active)' : '')}}">
                     <span class="section__name">{{section.name}}</span>
                 </a>
             </li>
 
             <li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true, current: currentSectionInOverflow() }" ng-show="visibleSections < sections.length">
-                <a href="#" ng-click="trayClick()" prevent-default>
+                <a href="#" ng-click="trayClick()" prevent-default aria-label="More sections">
                     <span class="section__name">&bull;&bull;&bull;</span>
                 </a>
 
@@ -21,7 +23,9 @@
                         <a href="#/{{section.alias}}"
                             ng-dblclick="sectionDblClick(section)"
                             ng-click="sectionClick($event, section)"
-                            prevent-default>
+                            prevent-default
+                            ng-attr-aria-current="{{section.alias == currentSection ? 'page' : undefined}}"
+                            aria-label="{{section.name + (section.alias == currentSection ? ' (active)' : '')}}">
                             <span class="section__name">{{section.name}}</span>
                         </a>
                     </li>