From 0a01601523cedfccafe12e1a6839e244557c664a Mon Sep 17 00:00:00 2001
From: Rachel Breeze <RachBreeze@users.noreply.github.com>
Date: Wed, 22 Jul 2020 18:08:18 +0100
Subject: [PATCH] v8: Improvements to accessibility of translations section
 (#8383)

---
 .../src/views/dictionary/create.html            |  8 +++++---
 .../dictionary/dictionary.create.controller.js  |  1 -
 .../src/views/dictionary/edit.html              |  2 +-
 .../src/views/dictionary/list.html              | 17 +++++++++++------
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml   |  3 +++
 .../Umbraco/config/lang/en_us.xml               |  3 +++
 6 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/create.html b/src/Umbraco.Web.UI.Client/src/views/dictionary/create.html
index 88a67aaf18..9e628464b2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/create.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/create.html
@@ -1,7 +1,7 @@
 <div class="umbracoDialog umb-dialog-body with-footer" ng-controller="Umbraco.Editors.Dictionary.CreateController as vm">
   
   <div class="umb-pane">
-    <h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
+    <h5 tabindex="0"><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
   </div>
   
   <div class="umb-pane">
@@ -9,8 +9,10 @@
             ng-submit="vm.createItem()"
             val-form-manager>
 
-          <umb-control-group label="@general_name" hide-label="false">
-              <input type="text" name="itemKey" ng-model="vm.itemKey" class="umb-textstring textstring input-block-level" umb-auto-focus required />
+          <umb-control-group label="@general_name" hide-label="false" alias="itemKey">
+              <input type="text" name="itemKey" id="itemKey" ng-model="vm.itemKey" class="umb-textstring textstring input-block-level"
+                     umb-auto-focus required
+                     maxlength="1000"/>
           </umb-control-group>
 
           <button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.create.controller.js b/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.create.controller.js
index 82c4e6e7b5..03a4bc85cf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.create.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/dictionary.create.controller.js
@@ -11,7 +11,6 @@ function DictionaryCreateController($scope, $location, dictionaryResource, navig
     var vm = this;
 
     vm.itemKey = "";
-
     vm.createItem = createItem;
 
     function createItem() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html b/src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html
index c2b0adec6f..846a53c5ea 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/edit.html
@@ -23,7 +23,7 @@
                     <umb-box-content>
                         <p ng-bind-html="vm.description"></p>
                         <umb-property ng-repeat="translation in vm.content.translations" property="translation.property">
-                            <textarea ng-model="translation.translation"></textarea>
+                            <textarea ng-model="translation.translation" id="{{translation.isoCode}}" maxlength="1000"></textarea>
                         </umb-property>
                     </umb-box-content>
                 </umb-box>
diff --git a/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html b/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
index dfb126cc8e..2102ae0b28 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dictionary/list.html
@@ -24,6 +24,7 @@
             </umb-box>
 
             <table class="table table-hover" ng-if="vm.items.length > 0">
+                <caption class="sr-only"><localize key="visuallyHiddenTexts_dictionaryListCaption"></localize></caption>
                 <thead>
                     <tr>
                         <th><localize key="general_name">Name</localize></th>
@@ -31,13 +32,17 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr ng-repeat="item in vm.items track by item.id" ng-click="vm.clickItem(item.id)" style="cursor: pointer;">
-                        <td>
-                            <span class="bold" ng-style="item.style">{{item.name}}</span>
-                        </td>
+                    <tr ng-repeat="item in vm.items track by item.id" style="cursor: pointer;">
+                        <th>
+                            <span class="bold" ng-style="item.style"><a href="" ng-click="vm.clickItem(item.id)">{{item.name}}</a></span>
+                        </th>
                         <td ng-repeat="column in item.translations">
-                            <i ng-if="column.hasTranslation" class="icon-check color-green"></i>
-                            <i ng-if="!column.hasTranslation" class="icon-alert color-red"></i>
+                            <a href="" ng-click="vm.clickItem(item.id)">
+                                <i ng-if="column.hasTranslation" class="icon-check color-green" aria-hidden="true"></i>
+                                <p ng-if="column.hasTranslation" class="sr-only"><localize key="visuallyHiddenTexts_hasTranslation"></localize></p>
+                                <i ng-if="!column.hasTranslation" class="icon-alert color-red" aria-hidden="true"></i>
+                                <p ng-if="!column.hasTranslation" class="sr-only"><localize key="visuallyHiddenTexts_noTranslation"></localize></p>
+                            </a>
                         </td>
                     </tr>
                 </tbody>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 0150a5542d..4e4bf467a1 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2255,6 +2255,9 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="name">Name</key>
     <key alias="addNewRow">Add new row</key>
     <key alias="tabExpand">View more options</key>
+      <key alias="hasTranslation">Has translation</key>
+      <key alias="noTranslation">Missing translation</key>
+      <key alias="dictionaryListCaption">Dictionary items</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>
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 6700818ee0..7b3b6bb49c 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2276,6 +2276,9 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="name">Name</key>
     <key alias="addNewRow">Add new row</key>
     <key alias="tabExpand">View more options</key>
+      <key alias="hasTranslation">Has translation</key>
+      <key alias="noTranslation">Missing translation</key>
+      <key alias="dictionaryListCaption">Dictionary items</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>