ContextDialog: Accessibility improvements (#9045)

* Add role and aria attributes as well as a screen reader only description * Add translations to language files
umbraco · Nov 22, 2020 · 8549d1a · 8549d1a
1 parent 98610b5
commit 8549d1a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umbcontextdialog/umb-context-dialog.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umbcontextdialog/umb-context-dialog.html
@@ -1,6 +1,14 @@
-<div id="dialog" class="umb-modalcolumn fill shadow" on-outside-click="outSideClick()">
+<div id="dialog"
+     class="umb-modalcolumn fill shadow"
+     on-outside-click="outSideClick()"
+     role="dialog"
+     aria-labelledby="contextdialog-title"
+     aria-describedby="contextdialog-description">
     <div class="umb-modalcolumn-header">
-        <h1>{{dialogTitle}}</h1>
+        <h1 id="contextdialog-title">{{dialogTitle}}</h1>
+        <p id="contextdialog-description" class="sr-only">
+            <localize key="visuallyHiddenTexts_contextDialogDescription" tokens="[dialogTitle,currentNode.name]">Perform action {{dialogTitle}} on the {{currentNode.name}} node</localize>
+        </p>
     </div>
     <div class="umb-modalcolumn-body" ng-include="view"></div>
 </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2278,6 +2278,7 @@ To manage your website, simply open the Umbraco back office and start adding con
       <key alias="hasTranslation">Has translation</key>
       <key alias="noTranslation">Missing translation</key>
       <key alias="dictionaryListCaption">Dictionary items</key>
+      <key alias="contextDialogDescription">Perform action %0% on the %1% node</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
@@ -2300,6 +2300,7 @@ To manage your website, simply open the Umbraco back office and start adding con
       <key alias="hasTranslation">Has translation</key>
       <key alias="noTranslation">Missing translation</key>
       <key alias="dictionaryListCaption">Dictionary items</key>
+      <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>