fix: add missing aria accessibility (#764)

- closes #586, #587, #588 and #678
6pac · May 9, 2023 · 897cc55 · 897cc55
1 parent 2405fe6
commit 897cc55
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 27 deletions.
diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
@@ -129,6 +129,7 @@
 
         const liElm = document.createElement('li');
         liElm.className = excludeCssClass;
+        liElm.ariaLabel = columns[i] && columns[i].name;
 
         const checkboxElm = document.createElement('input');
         checkboxElm.type = 'checkbox';
@@ -163,6 +164,7 @@
         let forceFitTitle = (_options.columnPicker && _options.columnPicker.forceFitTitle) || _options.forceFitTitle;
 
         const liElm = document.createElement('li');
+        liElm.ariaLabel = forceFitTitle;
         _listElm.appendChild(liElm);
 
         const forceFitCheckboxElm = document.createElement('input');
@@ -185,6 +187,7 @@
         let syncResizeTitle = (_options.columnPicker && _options.columnPicker.syncResizeTitle) || _options.syncResizeTitle;
 
         const liElm = document.createElement('li');
+        liElm.ariaLabel = syncResizeTitle;
         _listElm.appendChild(liElm);
 
         const syncResizeCheckboxElm = document.createElement('input');

diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js
@@ -204,6 +204,7 @@
       if (showButton) {
         _buttonElm = document.createElement('button');
         _buttonElm.className = 'slick-gridmenu-button';
+        _buttonElm.ariaLabel = 'Grid Menu';
 
         if (_options.gridMenu && _options.gridMenu.iconCssClass) {
           _buttonElm.classList.add(_options.gridMenu.iconCssClass);
@@ -241,6 +242,7 @@
 
       _customMenuElm = document.createElement('div');
       _customMenuElm.className = 'slick-gridmenu-custom';
+      _customMenuElm.role = 'menu';
 
       _menuElm.appendChild(_customMenuElm);
 
@@ -326,6 +328,7 @@
 
         const liElm = document.createElement('div');
         liElm.className = 'slick-gridmenu-item';
+        liElm.role = 'menuitem';
 
         if (item.divider || item === "divider") {
           liElm.classList.add("slick-gridmenu-item-divider");
@@ -394,6 +397,7 @@
       _bindingEventService.bind(_menuElm, 'click', updateColumn);
       _listElm = document.createElement('span');
       _listElm.className = 'slick-gridmenu-list';
+      _listElm.role = 'menu';
     }
 
     /** Delete and then Recreate the Grid Menu (for example when we switch from regular to a frozen grid) */
@@ -426,7 +430,7 @@
         return;
       }
 
-      // notify of the onBeforeMenuShow only works when 
+      // notify of the onBeforeMenuShow only works when
       // this mean that we cannot notify when the grid menu is attach to a button event
       if (typeof e.stopPropagation === "function") {
         if (_self.onBeforeMenuShow.notify(callbackArgs, e, _self).getReturnValue() == false) {
@@ -441,6 +445,7 @@
 
         const liElm = document.createElement('li');
         liElm.className = excludeCssClass;
+        liElm.ariaLabel = columns[i] && columns[i].name;
 
         const checkboxElm = document.createElement('input');
         checkboxElm.type = 'checkbox';
@@ -476,6 +481,8 @@
         let forceFitTitle = (_options.gridMenu && _options.gridMenu.forceFitTitle) || _defaults.forceFitTitle;
 
         const liElm = document.createElement('li');
+        liElm.ariaLabel = forceFitTitle;
+        liElm.role = 'menuitem';
         _listElm.appendChild(liElm);
 
         const forceFitCheckboxElm = document.createElement('input');
@@ -498,6 +505,7 @@
         let syncResizeTitle = (_options.gridMenu && _options.gridMenu.syncResizeTitle) || _defaults.syncResizeTitle;
 
         const liElm = document.createElement('li');
+        liElm.ariaLabel = syncResizeTitle;
         _listElm.appendChild(liElm);
 
         const syncResizeCheckboxElm = document.createElement('input');

diff --git a/controls/slick.pager.js b/controls/slick.pager.js
@@ -15,16 +15,16 @@
     let statusElm;
     let _options;
     let _defaults = {
-      showAllText: "Showing all {rowCount} rows",
-      showPageText: "Showing page {pageNum} of {pageCount}",
-      showCountText: "From {countBegin} to {countEnd} of {rowCount} rows",
+      showAllText: 'Showing all {rowCount} rows',
+      showPageText: 'Showing page {pageNum} of {pageCount}',
+      showCountText: 'From {countBegin} to {countEnd} of {rowCount} rows',
       showCount: false,
       pagingOptions: [
-        { data: 0, name: "All" },
-        { data: -1, name: "Auto" },
-        { data: 25, name: "25" },
-        { data: 50, name: "50" },
-        { data: 100, name: "100" }
+        { data: 0, name: 'All', ariaLabel: 'Show All Pages' },
+        { data: -1, name: 'Auto', ariaLabel: 'Auto Page Size' },
+        { data: 25, name: '25', ariaLabel: 'Show 25 rows per page' },
+        { data: 50, name: '50', ariaLabel: 'Show 50 rows per page' },
+        { data: 100, name: '100', ariaLabel: 'Show 100 rows per page' },
       ],
       showPageSizes: false
     };
@@ -127,6 +127,7 @@
 
         const anchorElm = document.createElement('a');
         anchorElm.textContent = p.name;
+        anchorElm.ariaLabel = p.ariaLabel;
         anchorElm.dataset.val = p.data;
         pagerSettingsElm.appendChild(anchorElm);
 
@@ -151,6 +152,8 @@
       const displayPaginationContainer = document.createElement('span');
       const displayIconElm = document.createElement('span');
       displayPaginationContainer.className = 'ui-state-default ui-corner-all ui-icon-container';
+      displayIconElm.ariaLabel = 'Show Pagination Options';
+      displayIconElm.role = 'button';
       displayIconElm.className = 'ui-icon ui-icon-lightbulb slick-icon-lightbulb';
       displayPaginationContainer.appendChild(displayIconElm);
 
@@ -160,20 +163,22 @@
       });
       settingsElm.appendChild(displayPaginationContainer);
 
-      const directions = [
-        { key: 'first', callback: gotoFirst },
-        { key: 'prev', callback: gotoPrev },
-        { key: 'next', callback: gotoNext },
-        { key: 'end', callback: gotoLast },
+      const pageButtons = [
+        { key: 'first', ariaLabel: 'First Page', callback: gotoFirst },
+        { key: 'prev', ariaLabel: 'Previous Page', callback: gotoPrev },
+        { key: 'next', ariaLabel: 'Next Page', callback: gotoNext },
+        { key: 'end', ariaLabel: 'Last Page', callback: gotoLast },
       ];
 
-      directions.forEach(direction => {
+      pageButtons.forEach(pageBtn => {
         const iconElm = document.createElement('span');
         iconElm.className = 'ui-state-default ui-corner-all ui-icon-container';
 
         const innerIconElm = document.createElement('span');
-        innerIconElm.className = `ui-icon ui-icon-seek-${direction.key} slick-icon-seek-${direction.key}`;
-        _bindingEventService.bind(innerIconElm, 'click', direction.callback);
+        innerIconElm.role = 'button';
+        innerIconElm.ariaLabel = pageBtn.ariaLabel;
+        innerIconElm.className = `ui-icon ui-icon-seek-${pageBtn.key} slick-icon-seek-${pageBtn.key}`;
+        _bindingEventService.bind(innerIconElm, 'click', pageBtn.callback);
 
         iconElm.appendChild(innerIconElm);
         navElm.appendChild(iconElm);

diff --git a/examples/example-optimizing-dataview.html b/examples/example-optimizing-dataview.html
@@ -69,8 +69,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-
-<script src="../lib/jquery-3.1.0.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -86,7 +84,7 @@ <h2>View Source:</h2>
   var data = [];
   var columns = [
     {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
-    {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title"},
+    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title"},
     {id: "duration", name: "Duration", field: "duration"},
     {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
     {id: "start", name: "Start", field: "start", minWidth: 60},
@@ -120,15 +118,15 @@ <h2>View Source:</h2>
   }
 
 
-  $(function () {
+  (function () {
     // prepare the data
     for (var i = 0; i < 500000; i++) {
       data[i] = new DataItem(i);
     }
 
     dataView = new Slick.Data.DataView({ inlineFilters: true });
     grid = new Slick.Grid("#myGrid", dataView, columns, options);
-    var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
+    var pager = new Slick.Controls.Pager(dataView, grid, "#pager");
 
     // wire up model events to drive the grid
     dataView.onRowCountChanged.subscribe(function (e, args) {
@@ -176,7 +174,7 @@ <h2>View Source:</h2>
     dataView.setFilter(myFilter);
     dataView.setFilterArgs(0);
     dataView.endUpdate();
-  })
+  })();
 </script>
 </body>
 </html>
diff --git a/plugins/slick.cellmenu.js b/plugins/slick.cellmenu.js
@@ -219,6 +219,7 @@
 
       _menuElm = document.createElement('div');
       _menuElm.className = `slick-cell-menu ${_gridUid}`;
+      _menuElm.role = 'menu';
       _menuElm.style.width = width;
       _menuElm.style.maxHeight = maxHeight;
       _menuElm.style.top = `${e.pageY + 5}px`;
@@ -241,6 +242,7 @@
       if (!_cellMenuProperties.hideOptionSection && optionItems.length > 0) {
         const optionMenuElm = document.createElement('div');
         optionMenuElm.className = 'slick-cell-menu-option-list';
+        optionMenuElm.role = 'menu';
 
         if (!_cellMenuProperties.hideCloseButton) {
           _bindingEventService.bind(closeButtonElm, 'click', handleCloseButtonClicked);
@@ -260,6 +262,7 @@
       if (!_cellMenuProperties.hideCommandSection && commandItems.length > 0) {
         const commandMenuElm = document.createElement('div');
         commandMenuElm.className = 'slick-cell-menu-command-list';
+        commandMenuElm.role = 'menu';
 
         if (!_cellMenuProperties.hideCloseButton && (optionItems.length === 0 || _cellMenuProperties.hideOptionSection)) {
           _bindingEventService.bind(closeButtonElm, 'click', handleCloseButtonClicked);
@@ -443,7 +446,7 @@
       }
 
       // user could pass a title on top of the Options section
-      if (cellMenu && cellMenu.optionTitle) {        
+      if (cellMenu && cellMenu.optionTitle) {
         _optionTitleElm = document.createElement('div');
         _optionTitleElm.className = 'title';
         _optionTitleElm.textContent = cellMenu.optionTitle;
@@ -471,6 +474,7 @@
 
         const liElm = document.createElement('div');
         liElm.className = 'slick-cell-menu-item';
+        liElm.role = 'menuitem';
 
         if (item.divider || item === "divider") {
           liElm.classList.add("slick-cell-menu-item-divider");
@@ -561,6 +565,7 @@
 
         const liElm = document.createElement('div');
         liElm.className = 'slick-cell-menu-item';
+        liElm.role = 'menuitem';
 
         if (item.divider || item === "divider") {
           liElm.classList.add("slick-cell-menu-item-divider");

diff --git a/plugins/slick.contextmenu.js b/plugins/slick.contextmenu.js
@@ -243,6 +243,7 @@
 
       _menuElm = document.createElement('div');
       _menuElm.className = `slick-context-menu ${_gridUid}`;
+      _menuElm.role = 'menu';
       _menuElm.style.width = width;
       _menuElm.style.maxHeight = maxHeight;
       _menuElm.style.top = `${targetEvent.pageY}px`;
@@ -265,6 +266,7 @@
       if (!_contextMenuProperties.hideOptionSection && isColumnOptionAllowed && optionItems.length > 0) {
         const optionMenuElm = document.createElement('div');
         optionMenuElm.className = 'slick-context-menu-option-list';
+        optionMenuElm.role = 'menu';
 
         if (!_contextMenuProperties.hideCloseButton) {
           _bindingEventService.bind(closeButtonElm, 'click', handleCloseButtonClicked);
@@ -284,6 +286,7 @@
       if (!_contextMenuProperties.hideCommandSection && isColumnCommandAllowed && commandItems.length > 0) {
         const commandMenuElm = document.createElement('div');
         commandMenuElm.className = 'slick-context-menu-command-list';
+        commandMenuElm.role = 'menu';
 
         if (!_contextMenuProperties.hideCloseButton && (!isColumnOptionAllowed || optionItems.length === 0 || _contextMenuProperties.hideOptionSection)) {
           _bindingEventService.bind(closeButtonElm, 'click', handleCloseButtonClicked);
@@ -426,6 +429,7 @@
 
         const liElm = document.createElement('div');
         liElm.className = 'slick-context-menu-item';
+        liElm.role = 'menuitem';
 
         if (item.divider || item === "divider") {
           liElm.classList.add("slick-context-menu-item-divider");
@@ -451,6 +455,7 @@
         }
 
         const iconElm = document.createElement('div');
+        iconElm.role = 'button';
         iconElm.className = 'slick-context-menu-icon';
 
         liElm.appendChild(iconElm);
@@ -516,6 +521,7 @@
 
         const liElm = document.createElement('div');
         liElm.className = 'slick-context-menu-item';
+        liElm.role = 'menuitem';
 
         if (item.divider || item === "divider") {
           liElm.classList.add("slick-context-menu-item-divider");

diff --git a/plugins/slick.headerbuttons.js b/plugins/slick.headerbuttons.js
@@ -128,6 +128,8 @@
 
           const btn = document.createElement('div');
           btn.className = options.buttonCssClass;
+          btn.ariaLabel = 'Header Button';
+          btn.role = 'button';
 
           if (button.disabled) {
             btn.classList.add("slick-header-button-disabled");

diff --git a/plugins/slick.headermenu.js b/plugins/slick.headermenu.js
@@ -167,6 +167,8 @@
 
         const elm = document.createElement('div');
         elm.className = "slick-header-menubutton";
+        elm.ariaLabel = 'Header Menu';
+        elm.role = 'button';
 
         if (options.buttonCssClass) {
           elm.classList.add(options.buttonCssClass);
@@ -209,6 +211,7 @@
       if (!_menuElm) {
         _menuElm = document.createElement('div');
         _menuElm.className = 'slick-header-menu';
+        _menuElm.role = 'menu';
         _menuElm.style.minWidth = `${options.minWidth}px`;
         _menuElm.setAttribute('aria-expanded', 'true');
         const containerNode = _grid.getContainerNode();
@@ -241,6 +244,7 @@
 
         const menuItem = document.createElement('div');
         menuItem.className = 'slick-header-menuitem';
+        menuItem.role = 'menuitem';
 
         if (item.divider || item === "divider") {
           menuItem.classList.add("slick-header-menuitem-divider");

diff --git a/slick.grid.js b/slick.grid.js
@@ -1724,7 +1724,7 @@ if (typeof Slick === "undefined") {
           continue;
         }
 
-        const resizeableHandle = utils.template("<div class='slick-resizable-handle' />", colElm);
+        const resizeableHandle = utils.template("<div class='slick-resizable-handle' role='separator' aria-orientation='horizontal' />", colElm);
         _bindingEventService.bind(resizeableHandle, "dblclick", handleResizeableHandleDoubleClick);
 
         slickResizableInstances.push(
@@ -2134,7 +2134,7 @@ if (typeof Slick === "undefined") {
         });
         v.forEach(function (val) {
           cellHeightDiff += utils.toFloat(style[val]);
-        })
+        });
       }
       r.remove();
 
@@ -3556,7 +3556,7 @@ if (typeof Slick === "undefined") {
         }
       }
 
-      stringArray.push("<div class='" + cellCss + (addlCssClasses ? ' ' + addlCssClasses : '') + "' " + toolTip + customAttrStr + ">");
+      stringArray.push(`<div class="${cellCss + (addlCssClasses ? ' ' + addlCssClasses : '')}" ${toolTip + customAttrStr}>`);
 
       // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
       if (item) {