v8: Improvements to accessibility of translations section (#8383)

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>

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() {

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>

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>

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>

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>