Accessibility: v24.2 changes (DevExpress#6816)

Author: vladaskorohodova

concepts/05 UI Components/Calendar/03 Accessibility/05 Accessibility Features Overview.md

@@ -39,7 +39,7 @@
     </tr>
     <tr>
         <td><a href="https://www.access-board.gov/ict/" target="_blank">Section 508</a> Support</td>
-        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-warning"/></svg></td>
     </tr>
     <tr>
         <td><a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">WCAG 2.x</a> Support</td>

concepts/05 UI Components/Calendar/03 Accessibility/10 Accessibility Standards Compliance.md

@@ -6,11 +6,6 @@ The Calendar component meets a variety of <a href="https://www.access-board.gov/
         <th>WCAG 2.x criteria</th>
         <th>Exception description</th>
     </tr>
-    <tr>
-        <td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
-        <td>1.3.1 Info and Relationships (Level A)</td>
-        <td>Calendar does not pronounce selected range in multiselect mode.</td>
-    </tr>
     <tr>
         <td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
         <td>1.4.3 Contrast (Minimum) (Level AA) <br> 1.4.11 Non-text Contrast (Level AA 2.1 and 2.2)</td>

concepts/05 UI Components/Chat/10 Accessibility/00 Accessibility.md

@@ -0,0 +1,55 @@
+[note] The overall accessibility level of your application depends on the Chat features you use.
+
+<table class="dx-table">
+    <tr>
+        <th class="dx-table-row__width-80">Accessibility Requirement</th>
+        <th>Support Level</th>
+    </tr>
+    <tr>
+        <td>Right-to-Left Support</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+    </tr>
+    <tr>
+        <td>Keyboard Navigation Support</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+    </tr>
+    <tr>
+        <td>Screen Reader Support</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+    </tr>
+    <tr>
+        <td>Contrast Color Theme</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-warning"/></svg></td>
+    </tr>
+    <tr>
+        <td>Mobile Device Support</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+    </tr>
+    <tr>
+        <td><a href="https://developer.chrome.com/docs/lighthouse/" target="_blank">Lighthouse</a> Accessibility Validation</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+    </tr>
+    <tr>
+        <td><a href="https://www.deque.com/axe/" target="_blank">Axe</a> Accessibility Validation</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+    </tr>
+    <tr>
+        <td><a href="https://wave.webaim.org/" target="_blank">WAVE</a> Accessibility Validation</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-warning"/></svg></td>
+    </tr>
+    <tr>
+        <td><a href="https://www.access-board.gov/ict/" target="_blank">Section 508</a> Support</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+    </tr>
+    <tr>
+        <td><a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">WCAG 2.x</a> Support</td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
+    </tr>
+</table>
+
+<ul style="list-style-type: none;">
+   <li style="display: flex; align-items: center;"><svg width="18" height="18" style="padding: 2px 4px 0px 0px;"><use xlink:href="#svg-icon-success"/></svg> - All component features meet the requirement</li>
+   <li style="display: flex; align-items: center;"><svg width="18" height="18" style="padding: 2px 4px 0px 0px;"><use xlink:href="#svg-icon-warning"/></svg> - Some component features may not meet the requirement</li>
+   <li style="display: flex; align-items: center;"><svg width="18" height="18" style="padding: 2px 4px 0px 0px;"><use xlink:href="#svg-icon-error"/></svg> - Accessibility requirement is not supported</li>
+</ul>
+

concepts/05 UI Components/Chat/10 Accessibility/05 Accessibility Features Overview.md

@@ -0,0 +1,14 @@
+The Chat component meets a variety of <a href="https://www.access-board.gov/ict/" target="_blank">Section 508</a> and <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">WCAG 2.x</a> compliance standards. Known exceptions:  
+
+<table class="dx-table">
+    <tr>
+        <th>Section 508 criteria</th>
+        <th>WCAG 2.x criteria</th>
+        <th>Exception description</th>
+    </tr>
+    <tr>
+        <td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
+        <td>1.4.3 Contrast (Minimum) (Level AA) <br> 1.4.11 Non-text Contrast (Level AA 2.1 and 2.2)</td>
+        <td>Chat does not support Windows High Contrast themes.</td>
+    </tr>
+</table>

concepts/05 UI Components/Chat/10 Accessibility/10 Accessibility Standards Compliance.md

@@ -0,0 +1,14 @@
+A user can use the following keys to interact with the Chat component: 
+
+<table class="dx-table">
+    <tr>
+        <th>Key</th>
+        <th>Action</th>
+    </tr>
+    <tr>
+        <td>Enter</td>
+        <td>Enters a message.</td>
+    </tr>
+</table>
+
+#include common-code-register-key-handler

concepts/05 UI Components/Chat/10 Accessibility/15 Keyboard Navigation.md

@@ -0,0 +1 @@
+The Chat component supports screen readers and complies to <a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank">WAI-ARIA</a> standards. 

concepts/05 UI Components/Chat/10 Accessibility/20 Screen Reader Support.md

@@ -16,6 +16,11 @@ The ColorBox component meets a variety of <a href="https://www.access-board.gov/
         <td>2.4.3 Focus Order (Level A)</td>
         <td>The ColorBox component does not meet this criterion.</td>
     </tr>
+    <tr>
+        <td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
+        <td>2.4.7 Focus Visible (Level AA) </td>
+        <td>The ColorBox palette handle does not have a focus indicator.</td>
+    </tr>
     <tr>
         <td>-</td>
         <td>2.5.8 Target Size (Minimum) (Level AA 2.2 only)</td>

concepts/05 UI Components/ColorBox/05 Accessibility/10 Accessibility Standards Compliance.md

@@ -14,28 +14,17 @@ The DataGrid component meets a variety of <a href="https://www.access-board.gov/
     <tr>
         <td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
         <td>1.3.1 Info and Relationships (Level A)</td>
-        <td>
-            The column fixing feature does not meet this criterion. <br>
-            The filter menu button in filter row does not supply any accessibility information. 
-        </td>
+        <td>The filter menu button in filter row does not supply any accessibility information.</td>
     </tr>
     <tr>
         <td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
         <td>1.4.3 Contrast (Minimum) (Level AA) <br> 1.4.11 Non-text Contrast (Level AA 2.1 and 2.2)</td>
         <td>DataGrid does not support Windows High Contrast themes.</td>
     </tr>
-    <tr>
-        <td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
-        <td>1.3.2 Meaningful Sequence (Level A) <br> 2.4.3 Focus Order (Level A)</td>
-        <td>The column fixing feature in DataGrid does not meet this criterion.</td>
-    </tr>
     <tr>
         <td>11.5.2.12 Execution of available actions</td>
         <td>2.1.1 Keyboard (Level A)</td>
-        <td><ul>
-                <li>Keyboard navigation is not supported for ColumnChooser items in 'drag' mode.</li>
-            </ul>    
-        </td>
+        <td>Keyboard navigation is not supported for ColumnChooser items in 'drag' mode.</td>
     </tr>
     <tr>
         <td>-</td>
@@ -59,15 +48,10 @@ The DataGrid component meets a variety of <a href="https://www.access-board.gov/
         <td>Command buttons and icons.</td>
     </tr>
     <tr>
-        <td>-</td>
+        <td>11.5.2.15 Change notification </td>
         <td>4.1.3 Status Messages (Level AA 2.1 and 2.2)</td>
         <td>DataGrid summaries when <a href="/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/summary/#recalculateWhileEditing">recalculateWhileEditing</a> is enabled. </td>
     </tr>
-    <tr>
-        <td>502.3.3 Row, Column, and Headers</td>
-        <td>-</td>
-        <td>DataGrid does not convey information about headers if the column fixing feature is enabled.</td>
-    </tr>
     <tr>
         <td>504.2.2 PDF Export</td>
         <td>-</td>

concepts/05 UI Components/DataGrid/05 Accessibility/10 Accessibility Standards Compliance.md

@@ -43,7 +43,7 @@
     </tr>
     <tr>
         <td><a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">WCAG 2.x</a> Support</td>
-        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-warning"/></svg></td>
+        <td class="dx-table-row__center"><svg width="18" height="18"><use xlink:href="#svg-icon-success"/></svg></td>
     </tr>
 </table>