24_1 Accessibility Demo Fixes (#3192)

* Filtering Demo Fix Added aria-label * Master Detail API Demo Fix Added alt text * With List Demo Fix Added alt text * Using Intl Demo Fix Added aria-label * Row Template Demo Fix Added roles, alt text and tabindex * Column Template Added alt text * Row Selection Demo Fix Added alt text Added visibility switch to hide initial image without src * Custom New Record Position Demo Fix Added the text option, that used as icon label text * PDF Cell Customization Demo Fix Removed empty caption * ExcelJS Cell Customization Demo Fix Removed empty caption * Filter Panel Demo Fix Added aria-label Replaced editor options to an independent JS object * Filtering API Demo Fix Added alt texts * ExcelJS Export Images Demo FIx Added alt text * PDF Export Images Demo Fix Added alt text * Title Case Remove
DevExpress · Apr 23, 2024 · 904d467 · 904d467
1 parent 07830ec
commit 904d467
Show file tree

Hide file tree

Showing 28 changed files with 94 additions and 50 deletions.
diff --git a/MVCDemos/Views/DataGrid/ColumnTemplate.cshtml b/MVCDemos/Views/DataGrid/ColumnTemplate.cshtml
@@ -13,7 +13,7 @@
             .AllowSorting(false)
             .CellTemplate(@<text>
                 <div>
-                    <img src="<%- value %>" alt=""/>
+                    <img src="<%- value %>" alt="Picture of <%- data.FirstName %> <%- data.LastName %>"/>
                 </div>
             </text>);
 

diff --git a/MVCDemos/Views/DataGrid/CustomNewRecordPosition.cshtml b/MVCDemos/Views/DataGrid/CustomNewRecordPosition.cshtml
@@ -37,6 +37,7 @@
             .Buttons(b => {
                 b.Add()
                     .Icon("add")
+                    .Text("Add")
                     .OnClick("addButtonClicked")
                     .Visible(new JS("addButtonVisible"));
                 b.Add().Name("delete");

diff --git a/MVCDemos/Views/DataGrid/ExcelJSCellCustomization.cshtml b/MVCDemos/Views/DataGrid/ExcelJSCellCustomization.cshtml
@@ -27,7 +27,6 @@
             columns.Add().DataField("Phone")
                 .Format(new JS("phoneNumberFormat"));
             columns.Add().DataField("Website")
-                .Caption("")
                 .Alignment(HorizontalAlignment.Center)
                 .Width(100)
                 .CellTemplate(@<text>

diff --git a/MVCDemos/Views/DataGrid/ExcelJSExportImages.cshtml b/MVCDemos/Views/DataGrid/ExcelJSExportImages.cshtml
@@ -19,7 +19,7 @@
             .Width(90)
             .CellTemplate(@<text>
                 <div>
-                    <img src="<%- value %>" alt="" />
+                    <img src="<%- value %>" alt="Employee photo"/>
                 </div>
             </text>);
 

diff --git a/MVCDemos/Views/DataGrid/FilterPanel.cshtml b/MVCDemos/Views/DataGrid/FilterPanel.cshtml
@@ -43,7 +43,7 @@
         columns.AddFor(m => m.OrderDate);
         columns.AddFor(m => m.SaleAmount)
             .Format(Format.Currency)
-            .EditorOptions(new { format = "currency", showClearButton = true })
+            .EditorOptions(new JS("amountEditorOptions"))
             .HeaderFilter(filter => filter.DataSource(new[] {
                 new {
                     text = "Less than $3000",
@@ -73,6 +73,13 @@
 )
 
 <script>
+    var amountEditorOptions = {
+        format: 'currency',
+        showClearButton: true,
+        inputAttr: {
+            'aria-label': 'Filter cell',
+        },
+    };
     function calculateFilterExpression() {
         return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
     }

diff --git a/MVCDemos/Views/DataGrid/Filtering.cshtml b/MVCDemos/Views/DataGrid/Filtering.cshtml
@@ -50,7 +50,7 @@
         columns.AddFor(m => m.SaleAmount)
             .Alignment(HorizontalAlignment.Right)
             .Format(Format.Currency)
-            .EditorOptions(new { format = "currency", showClearButton = true })
+            .EditorOptions(new JS("amountEditorOptions"))
             .HeaderFilter(filter => filter.DataSource(new[] {
                 new {
                     text = "Less than $3000",
@@ -150,6 +150,14 @@
 </div>
 
 <script>
+    var amountEditorOptions = {
+        format: 'currency',
+        showClearButton: true,
+        inputAttr: {
+            'aria-label': 'Filter cell',
+        },
+    };
+
     function getOrderDay(rowData) {
         return (new Date(rowData.OrderDate)).getDay();
     }

diff --git a/MVCDemos/Views/DataGrid/FilteringAPI.cshtml b/MVCDemos/Views/DataGrid/FilteringAPI.cshtml
@@ -1,8 +1,8 @@
 
 <div class="left-side">
     <div class="logo">
-        <img src="../../Content/images/DataGrid/logo-devav.png" />
-        <img src="../../Content/images/DataGrid/logo-tasks.png" />
+        <img src="../../Content/images/DataGrid/logo-devav.png" alt="DEVAV"/>
+        <img src="../../Content/images/DataGrid/logo-tasks.png" alt="Tasks"/>
     </div>
 </div>
 <div class="right-side">

diff --git a/MVCDemos/Views/DataGrid/MasterDetailAPI.cshtml b/MVCDemos/Views/DataGrid/MasterDetailAPI.cshtml
@@ -35,7 +35,7 @@
         md.Enabled(false);
         md.Template(@<text>
             <div class="employeeInfo">
-                <img class="employeePhoto" src="<%- data.Picture %>" />
+                <img class="employeePhoto" alt="Employee photo" src="<%- data.Picture %>" />
                 <p class="employeeNotes"><%- data.Notes %></p>
             </div>
         </text>);

diff --git a/MVCDemos/Views/DataGrid/PDFCellCustomization.cshtml b/MVCDemos/Views/DataGrid/PDFCellCustomization.cshtml
@@ -26,7 +26,6 @@
             columns.Add().DataField("Phone")
                 .Format(new JS("phoneNumberFormat"));
             columns.Add().DataField("Website")
-                .Caption("")
                 .Alignment(HorizontalAlignment.Center)
                 .Width(100)
                 .CellTemplate(@<text>

diff --git a/MVCDemos/Views/DataGrid/PDFExportImages.cshtml b/MVCDemos/Views/DataGrid/PDFExportImages.cshtml
@@ -19,7 +19,7 @@
             .Width(90)
             .CellTemplate(@<text>
                 <div>
-                    <img src="<%- value %>" alt="" />
+                    <img src="<%- value %>" alt="Employee photo" />
                 </div>
             </text>);
 

diff --git a/MVCDemos/Views/DataGrid/RowSelection.cshtml b/MVCDemos/Views/DataGrid/RowSelection.cshtml
@@ -25,7 +25,7 @@
     .OnSelectionChanged("selection_changed")
 )
 <div id="employeeInfo">
-    <img class="employeePhoto" />
+    <img class="employeePhoto" alt="Employee photo" style="visibility: hidden"/>
     <p class="employeeNotes"></p>
 </div>
 
@@ -34,7 +34,7 @@
         var data = selectedItems.selectedRowsData[0];
         if(data) {
             $(".employeeNotes").text(data.Notes);
-            $(".employeePhoto").attr("src", data.Picture);
+            $(".employeePhoto").attr("src", data.Picture).attr('style', null);
         }
     }
 </script>
diff --git a/MVCDemos/Views/DataGrid/RowTemplate.cshtml b/MVCDemos/Views/DataGrid/RowTemplate.cshtml
@@ -9,19 +9,19 @@
     .RowAlternationEnabled(true)
     .HoverStateEnabled(true)
     .DataRowTemplate(@<text>
-        <tr class="main-row">
-            <td rowspan="2">
-                <img src="<%- data.Picture %>" alt=""/>
+        <tr role="row" class="main-row">
+            <td role="gridcell" rowspan="2">
+                <img src="<%- data.Picture %>" alt="Picture of <%- data.FirstName %> <%- data.LastName %>" tabindex="0"/>
             </td>
-            <td><%- data.Prefix %></td>
-            <td><%- data.FirstName %></td>
-            <td><%- data.LastName %></td>
-            <td><%- data.Position %></td>
-            <td><%- formatDate(new Date(data.BirthDate)) %></td>
-            <td><%- formatDate(new Date(data.HireDate)) %></td>
+            <td role="gridcell"><%- data.Prefix %></td>
+            <td role="gridcell"><%- data.FirstName %></td>
+            <td role="gridcell"><%- data.LastName %></td>
+            <td role="gridcell"><%- data.Position %></td>
+            <td role="gridcell"><%- formatDate(new Date(data.BirthDate)) %></td>
+            <td role="gridcell"><%- formatDate(new Date(data.HireDate)) %></td>
         </tr>
-        <tr class="notes-row">
-            <td colspan="6">
+        <tr role="row" class="notes-row">
+            <td role="gridcell" colspan="6">
                 <div><%- data.Notes %></div>
             </td>
         </tr>

diff --git a/MVCDemos/Views/FilterBuilder/WithList.cshtml b/MVCDemos/Views/FilterBuilder/WithList.cshtml
@@ -59,7 +59,7 @@
         .DataSourceOptions(d => d.Filter("$('#filterBuilder').dxFilterBuilder('instance').getFilterExpression()"))
         .ItemTemplate(@<text>
             <div class="product">
-                <img src="<%- ImageSrc %>">
+                <img src="<%- ImageSrc %>" alt="Picture of <%- Name %>">
                 <div><%- Name %></div>
                 <div class="price"><%- formatCurrency(Price) %></div>
             </div>

diff --git a/MVCDemos/Views/Localization/UsingIntl.cshtml b/MVCDemos/Views/Localization/UsingIntl.cshtml
@@ -21,7 +21,7 @@
                 .Caption(new JS("formatMessage('Amount')"))
                 .DataType(GridColumnDataType.Number)
                 .Format(Format.Currency)
-                .EditorOptions(new { format = "currency", showClearButton = true });
+                .EditorOptions(new JS("amountEditorOptions"));
             columns.Add().DataField("PaymentDate")
                 .Caption(new JS("formatMessage('PaymentDate')"))
                 .DataType(GridColumnDataType.Date);
@@ -58,6 +58,14 @@
 </div>
 
 <script>
+    var amountEditorOptions = {
+        format: 'currency',
+        showClearButton: true,
+        inputAttr: {
+            'aria-label': 'Filter cell',
+        },
+    };
+
     var dictionary = {
         "en": {
             "Number": "Number",

diff --git a/NetCoreDemos/Views/DataGrid/ColumnTemplate.cshtml b/NetCoreDemos/Views/DataGrid/ColumnTemplate.cshtml
@@ -13,7 +13,7 @@
             .AllowSorting(false)
             .CellTemplate(@<text>
                 <div>
-                    <img src="<%- value %>" alt=""/>
+                    <img src="<%- value %>" alt="Picture of <%- data.FirstName %> <%- data.LastName %>"/>
                 </div>
             </text>);
 

diff --git a/NetCoreDemos/Views/DataGrid/CustomNewRecordPosition.cshtml b/NetCoreDemos/Views/DataGrid/CustomNewRecordPosition.cshtml
@@ -37,6 +37,7 @@
             .Buttons(b => {
                 b.Add()
                     .Icon("add")
+                    .Text("Add")
                     .OnClick("addButtonClicked")
                     .Visible(new JS("addButtonVisible"));
                 b.Add().Name("delete");

diff --git a/NetCoreDemos/Views/DataGrid/ExcelJSCellCustomization.cshtml b/NetCoreDemos/Views/DataGrid/ExcelJSCellCustomization.cshtml
@@ -27,7 +27,6 @@
         columns.Add().DataField("Phone")
             .Format(new JS("phoneNumberFormat"));
         columns.Add().DataField("Website")
-            .Caption("")
             .Alignment(HorizontalAlignment.Center)
             .Width(100)
             .CellTemplate(@<text>

diff --git a/NetCoreDemos/Views/DataGrid/ExcelJSExportImages.cshtml b/NetCoreDemos/Views/DataGrid/ExcelJSExportImages.cshtml
@@ -19,7 +19,7 @@
                 .Width(90)
                 .CellTemplate(@<text>
                     <div>
-                        <img src="<%- value %>" alt="" />
+                        <img src="<%- value %>" alt="Employee photo"/>
                     </div>
                 </text>);
 

diff --git a/NetCoreDemos/Views/DataGrid/FilterPanel.cshtml b/NetCoreDemos/Views/DataGrid/FilterPanel.cshtml
@@ -43,7 +43,7 @@
         columns.AddFor(m => m.OrderDate);
         columns.AddFor(m => m.SaleAmount)
             .Format(Format.Currency)
-            .EditorOptions(new { format = "currency", showClearButton = true })
+            .EditorOptions(new JS("amountEditorOptions"))
             .HeaderFilter(filter => filter.DataSource(new[] {
                 new {
                     text = "Less than $3000",
@@ -73,6 +73,13 @@
 )
 
 <script>
+    var amountEditorOptions = {
+        format: 'currency',
+        showClearButton: true,
+        inputAttr: {
+            'aria-label': 'Filter cell',
+        },
+    };
     function calculateFilterExpression() {
         return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
     }

diff --git a/NetCoreDemos/Views/DataGrid/Filtering.cshtml b/NetCoreDemos/Views/DataGrid/Filtering.cshtml
@@ -49,7 +49,7 @@
         columns.AddFor(m => m.SaleAmount)
             .Alignment(HorizontalAlignment.Right)
             .Format(Format.Currency)
-            .EditorOptions(new { format = "currency", showClearButton = true })
+            .EditorOptions(new JS("amountEditorOptions"))
             .HeaderFilter(filter => filter.DataSource(new[] {
                 new {
                     text = "Less than $3000",
@@ -149,6 +149,14 @@
 </div>
 
 <script>
+    var amountEditorOptions = {
+        format: 'currency',
+        showClearButton: true,
+        inputAttr: {
+            'aria-label': 'Filter cell',
+        },
+    };
+
     function getOrderDay(rowData) {
         return (new Date(rowData.OrderDate)).getDay();
     }

diff --git a/NetCoreDemos/Views/DataGrid/FilteringAPI.cshtml b/NetCoreDemos/Views/DataGrid/FilteringAPI.cshtml
@@ -1,8 +1,8 @@
 
 <div class="left-side">
     <div class="logo">
-        <img src="~/images/DataGrid/logo-devav.png" />
-        <img src="~/images/DataGrid/logo-tasks.png" />
+        <img src="~/images/DataGrid/logo-devav.png" alt="DEVAV" />
+        <img src="~/images/DataGrid/logo-tasks.png" alt="Tasks" />
     </div>
 </div>
 <div class="right-side">

diff --git a/NetCoreDemos/Views/DataGrid/MasterDetailAPI.cshtml b/NetCoreDemos/Views/DataGrid/MasterDetailAPI.cshtml
@@ -35,7 +35,7 @@
         md.Enabled(false);
         md.Template(@<text>
             <div class="employeeInfo">
-                <img class="employeePhoto" src="<%- data.Picture %>" />
+                <img class="employeePhoto" alt="Employee photo" src="<%- data.Picture %>" />
                 <p class="employeeNotes"><%- data.Notes %></p>
             </div>
         </text>);

diff --git a/NetCoreDemos/Views/DataGrid/PDFCellCustomization.cshtml b/NetCoreDemos/Views/DataGrid/PDFCellCustomization.cshtml
@@ -26,7 +26,6 @@
         columns.Add().DataField("Phone")
             .Format(new JS("phoneNumberFormat"));
         columns.Add().DataField("Website")
-            .Caption("")
             .Alignment(HorizontalAlignment.Center)
             .Width(100)
             .CellTemplate(@<text>

diff --git a/NetCoreDemos/Views/DataGrid/PDFExportImages.cshtml b/NetCoreDemos/Views/DataGrid/PDFExportImages.cshtml
@@ -19,7 +19,7 @@
             .Width(90)
             .CellTemplate(@<text>
                 <div>
-                    <img src="<%- value %>" alt="" />
+                    <img src="<%- value %>" alt="Employee photo" />
                 </div>
             </text>);
 

diff --git a/NetCoreDemos/Views/DataGrid/RowSelection.cshtml b/NetCoreDemos/Views/DataGrid/RowSelection.cshtml
@@ -25,7 +25,7 @@
     .OnSelectionChanged("selection_changed")
 )
 <div id="employeeInfo">
-    <img class="employeePhoto" />
+    <img class="employeePhoto" alt="Employee photo" style="visibility: hidden"/>
     <p class="employeeNotes"></p>
 </div>
 
@@ -34,7 +34,7 @@
         var data = selectedItems.selectedRowsData[0];
         if(data) {
             $(".employeeNotes").text(data.Notes);
-            $(".employeePhoto").attr("src", data.Picture);
+            $(".employeePhoto").attr("src", data.Picture).attr('style', null);
         }
     }
 </script>
diff --git a/NetCoreDemos/Views/DataGrid/RowTemplate.cshtml b/NetCoreDemos/Views/DataGrid/RowTemplate.cshtml
@@ -9,19 +9,19 @@
     .RowAlternationEnabled(true)
     .HoverStateEnabled(true)
     .DataRowTemplate(@<text>
-        <tr class="main-row">
-            <td rowspan="2">
-                <img src="<%- data.Picture %>" alt=""/>
+        <tr role="row" class="main-row">
+            <td role="gridcell" rowspan="2">
+                <img src="<%- data.Picture %>" alt="Picture of <%- data.FirstName %> <%- data.LastName %>" tabindex="0"/>
             </td>
-            <td><%- data.Prefix %></td>
-            <td><%- data.FirstName %></td>
-            <td><%- data.LastName %></td>
-            <td><%- data.Position %></td>
-            <td><%- formatDate(new Date(data.BirthDate)) %></td>
-            <td><%- formatDate(new Date(data.HireDate)) %></td>
+            <td role="gridcell"><%- data.Prefix %></td>
+            <td role="gridcell"><%- data.FirstName %></td>
+            <td role="gridcell"><%- data.LastName %></td>
+            <td role="gridcell"><%- data.Position %></td>
+            <td role="gridcell"><%- formatDate(new Date(data.BirthDate)) %></td>
+            <td role="gridcell"><%- formatDate(new Date(data.HireDate)) %></td>
         </tr>
-        <tr class="notes-row">
-            <td colspan="6">
+        <tr role="row" class="notes-row">
+            <td role="gridcell" colspan="6">
                 <div><%- data.Notes %></div>
             </td>
         </tr>

diff --git a/NetCoreDemos/Views/FilterBuilder/WithList.cshtml b/NetCoreDemos/Views/FilterBuilder/WithList.cshtml
@@ -59,7 +59,7 @@
         .DataSourceOptions(d => d.Filter("$('#filterBuilder').dxFilterBuilder('instance').getFilterExpression()"))
         .ItemTemplate(@<text>
             <div class="product">
-                <img src="<%- ImageSrc %>">
+                <img src="<%- ImageSrc %>" alt="Picture of <%- Name %>">
                 <div><%- Name %></div>
                 <div class="price"><%- formatCurrency(Price) %></div>
             </div>

diff --git a/NetCoreDemos/Views/Localization/UsingIntl.cshtml b/NetCoreDemos/Views/Localization/UsingIntl.cshtml
@@ -21,7 +21,7 @@
                 .Caption(new JS("formatMessage('Amount')"))
                 .DataType(GridColumnDataType.Number)
                 .Format(Format.Currency)
-                .EditorOptions(new { format = "currency", showClearButton = true });
+                .EditorOptions(new JS("amountEditorOptions"));
             columns.Add().DataField("PaymentDate")
                 .Caption(new JS("formatMessage('PaymentDate')"))
                 .DataType(GridColumnDataType.Date);
@@ -58,6 +58,14 @@
 </div>
 
 <script>
+    var amountEditorOptions = {
+        format: 'currency',
+        showClearButton: true,
+        inputAttr: {
+            'aria-label': 'Filter сell',
+        },
+    };
+
     var dictionary = {
         "en": {
             "Number": "Number",