From 0762edb6b5f6c7c50f7c7c115d1237d81e635abf Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Tue, 1 Oct 2019 21:43:07 +0200
Subject: [PATCH 1/4] Add dicitionary keys for non-visual texts

---
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml    | 2 ++
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml    | 2 ++
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 2d8a699c1f77..be5fbd4e75c1 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1636,5 +1636,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>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 2d54ce1e2a55..59887b878d44 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2150,5 +2150,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>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 96387b7d2651..9cd3247344ad 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2164,5 +2164,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>

From 7348a9a562f2700834aad090cf1f8d530eea1924 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Tue, 1 Oct 2019 21:43:52 +0200
Subject: [PATCH 2/4] Refactor anchors to be buttons, add sr-only texts,
 aria-attributes and deep-blur directive

---
 .../application/umb-navigation.html           | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
index 737253feb2c8..7f37e71a4894 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
+++ b/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>
+                        {{selectedLanguage.name}}
+                    </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>
+                            {{language.name}}
+                    </button>
                 </div>
             </div>
 

From 3b1a946a481cea25fbfe4d601e09a4c97485ef15 Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Tue, 1 Oct 2019 21:44:26 +0200
Subject: [PATCH 3/4] Refactor the styling

---
 .../application/umb-language-picker.less        | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
index 527c74238220..7d91783e3292 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
+++ b/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;

From c0f70a3549a001936729ad50559c09a8a95c3b3e Mon Sep 17 00:00:00 2001
From: BatJan <jaskov@gmail.com>
Date: Wed, 2 Oct 2019 07:00:01 +0200
Subject: [PATCH 4/4] Move the : out of the language files

---
 .../src/views/components/application/umb-navigation.html  | 8 ++++----
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml             | 4 ++--
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml             | 4 ++--
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml          | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
index 7f37e71a4894..7fcabda57bf9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
@@ -10,9 +10,9 @@
                 <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>
+                            <localize key="visuallyHiddenTexts_currentLanguage">Current language</localize>
                         </span>
-                        {{selectedLanguage.name}}
+                        <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>
@@ -25,9 +25,9 @@
                         ng-repeat="language in languages"
                     >
                     <span class="sr-only">
-                        <localize key="visuallyHiddenTexts_switchLanguage">Switch language to: </localize>
+                        <localize key="visuallyHiddenTexts_switchLanguage">Switch language to</localize>
                     </span>
-                            {{language.name}}
+                    <span>: {{language.name}}</span>
                     </button>
                 </div>
             </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index be5fbd4e75c1..af1ed670e209 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -1636,7 +1636,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>
+    <key alias="currentLanguage">Aktivt sprog</key>
+    <key alias="switchLanguage">Skift sprog til</key>
   </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 59887b878d44..4a11e10dface 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2150,7 +2150,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>
+    <key alias="currentLanguage">Current language</key>
+    <key alias="switchLanguage">Switch language to</key>
   </area>
 </language>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 9cd3247344ad..8fb27032b887 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2164,7 +2164,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>
+    <key alias="currentLanguage">Current language</key>
+    <key alias="switchLanguage">Switch language to</key>
   </area>
 </language>