diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js index 281afdc3..47cec5d8 100644 --- 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 index 997216eb..16d56d97 100644 --- 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 index 59e896a9..243b6602 100644 --- 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 index 705b553c..7ec9a25d 100644 --- a/examples/example-optimizing-dataview.html +++ b/examples/example-optimizing-dataview.html @@ -69,8 +69,6 @@

View Source:

- - @@ -86,7 +84,7 @@

View Source:

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,7 +118,7 @@

View Source:

} - $(function () { + (function () { // prepare the data for (var i = 0; i < 500000; i++) { data[i] = new DataItem(i); @@ -128,7 +126,7 @@

View Source:

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 @@

View Source:

dataView.setFilter(myFilter); dataView.setFilterArgs(0); dataView.endUpdate(); - }) + })(); diff --git a/plugins/slick.cellmenu.js b/plugins/slick.cellmenu.js index a73a024f..6c8ea935 100644 --- 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 index a31980e7..993d20de 100644 --- 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 index b2fe6ef7..597aab2f 100644 --- 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 index 67a4511b..c6343f90 100644 --- 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 index affec7a1..62accdf5 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -1724,7 +1724,7 @@ if (typeof Slick === "undefined") { continue; } - const resizeableHandle = utils.template("
", colElm); + const resizeableHandle = utils.template("