Refactor language picker to improve accessibility (#6538)

src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less

@@ -12,17 +12,20 @@
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
-    cursor: pointer;
+    background: transparent;
+    border: 0 none;
     border-bottom: 1px solid @gray-9;
     height: @editorHeaderHeight;
     box-sizing: border-box;
     color: @ui-option-type;
+    width: 100%;
 }
 
 .umb-language-picker__expand {
     font-size: 14px;
 }
 
+.umb-language-picker__toggle:focus,
 .umb-language-picker__toggle:hover {
     background: @ui-option-hover;
     color:@ui-option-type-hover;
@@ -43,20 +46,24 @@
     overflow: auto;
 }
 
-.umb-language-picker__dropdown a {
+.umb-language-picker__dropdown-item {
+    background: transparent;
+    border: 0 none;
     padding: 8px 20px;
     display: block;
     font-size: 14px;
+    width: 100%;
+    text-align: left;
 }
 
-.umb-language-picker__dropdown a:hover, 
-.umb-language-picker__dropdown a:focus {
+.umb-language-picker__dropdown-item:hover, 
+.umb-language-picker__dropdown-item:focus {
     background: @ui-option-hover;
     text-decoration: none;
     color:@ui-option-type-hover;
 }
 
-.umb-language-picker__dropdown a.umb-language-picker__dropdown-item--current {
+.umb-language-picker__dropdown .umb-language-picker__dropdown-item.umb-language-picker__dropdown-item--current {
     padding-left: 16px;
     border-left: 4px solid @ui-light-active-border;
     color:@ui-light-active-type;

src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html

@@ -6,13 +6,29 @@
 
         <div class="navigation-inner-container">
 
-            <div class="umb-language-picker" ng-if="currentSection === 'content' && languages.length > 1" on-outside-click="page.languageSelectorIsOpen = false">
-                <div class="umb-language-picker__toggle" ng-click="toggleLanguageSelector()">
-                    <div>{{selectedLanguage.name}}</div>
-                    <ins class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !page.languageSelectorIsOpen, 'icon-navigation-up': page.languageSelectorIsOpen}" class="icon-navigation-right">&nbsp;</ins>
-                </div>
+            <div class="umb-language-picker" ng-if="currentSection === 'content' && languages.length > 1" deep-blur="page.languageSelectorIsOpen = false" on-outside-click="page.languageSelectorIsOpen = false">
+                <button type="button" class="umb-language-picker__toggle" ng-click="toggleLanguageSelector()" aria-haspopup="true" aria-expanded="{{page.languageSelectorIsOpen}}">
+                    <span>
+                        <span class="sr-only">
+                            <localize key="visuallyHiddenTexts_currentLanguage">Current language</localize>
+                        </span>
+                        <span>: {{selectedLanguage.name}}</span>
+                    </span>
+                    <i class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !page.languageSelectorIsOpen, 'icon-navigation-up': page.languageSelectorIsOpen}" class="icon-navigation-right" aria-hidden="true"></i>
+                </button>
                 <div class="umb-language-picker__dropdown" ng-if="page.languageSelectorIsOpen">
-                    <a class="umb-language-picker__dropdown-item" ng-class="{'umb-language-picker__dropdown-item--current': language.active}" ng-click="selectLanguage(language)" ng-repeat="language in languages" href="">{{language.name}}</a>
+                    <button
+                        type="button"
+                        class="umb-language-picker__dropdown-item"
+                        ng-class="{'umb-language-picker__dropdown-item--current': language.active}"
+                        ng-click="selectLanguage(language)"
+                        ng-repeat="language in languages"
+                    >
+                    <span class="sr-only">
+                        <localize key="visuallyHiddenTexts_switchLanguage">Switch language to</localize>
+                    </span>
+                    <span>: {{language.name}}</span>
+                    </button>
                 </div>
             </div>
 

src/Umbraco.Web.UI/Umbraco/config/lang/da.xml

@@ -1711,5 +1711,7 @@ Mange hilsner fra Umbraco robotten
     <key alias="openBackofficeSearch">Åben backoffice søgning</key>
     <key alias="openCloseBackofficeHelp">Åben/Luk backoffice hjælp</key>
     <key alias="openCloseBackofficeProfileOptions">Åben/Luk dine profil indstillinger</key>
+    <key alias="currentLanguage">Aktivt sprog</key>
+    <key alias="switchLanguage">Skift sprog til</key>
   </area>
 </language>

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

@@ -2148,5 +2148,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="openBackofficeSearch">Open backoffice search</key>
     <key alias="openCloseBackofficeHelp">Open/Close backoffice help</key>
     <key alias="openCloseBackofficeProfileOptions">Open/Close your profile options</key>
+    <key alias="currentLanguage">Current language</key>
+    <key alias="switchLanguage">Switch language to</key>
   </area>
 </language>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -2162,5 +2162,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="openBackofficeSearch">Open backoffice search</key>
     <key alias="openCloseBackofficeHelp">Open/Close backoffice help</key>
     <key alias="openCloseBackofficeProfileOptions">Open/Close your profile options</key>
+    <key alias="currentLanguage">Current language</key>
+    <key alias="switchLanguage">Switch language to</key>
   </area>
 </language>