Enabling accessibility for slickgrid

.gitattributes

@@ -0,0 +1,3 @@
+*.css text=auto
+*.js text=auto
+*.htm* text=auto

.gitignore

@@ -0,0 +1,6 @@
+.gitk*
+.idea/*
+.DS_Store
+node_modules/*
+SlickgridRelease*
+nuget*

.npmignore

@@ -0,0 +1,7 @@
+.DS_Store
+examples
+.gitk*
+.idea/*
+nuget*
+SlickgridRelease*
+tests

MIT-LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2009-2019 Michael Leibman and Ben McIntyre, http://github.com/6pac/slickgrid
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,11 @@
+## This is the 6pac SlickGrid repo
+
+Check out the NEW SlickGrid Website! http://slickgrid.net/
+
+This is the acknowledged most active non-customised fork of SlickGrid.
+
+It aims to be a viable alternative master repo, building on the legacy of the mleibman/SlickGrid master branch, keeping libraries up to date and applying small, safe core patches and enhancements without turning into a personalised build.
+
+Check out the [examples](https://github.com/6pac/SlickGrid/wiki/Examples) for examples demonstrating new features and use cases, such as dynamic grid creation and editors with third party controls.
+
+Also check out the [wiki](https://github.com/6pac/SlickGrid/wiki) for news and documentation.

SlickGrid/slick.editors.js

@@ -531,7 +531,7 @@
       var $container = $("body");
       var navOnLR = args.grid.getOptions().editorCellNavOnLRKeys;
 
-      $wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
+      $wrapper = $("<DIV role='dialog' aria-label='editor' style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
           .appendTo($container);
 
       $input = $("<TEXTAREA hidefocus rows=5 style='background:white;width:250px;height:80px;border:0;outline:0'>")

SlickGrid/slick.formatters.js

@@ -47,19 +47,20 @@
     } else {
       color = "green";
     }
-
-    return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
+    // The text inside the span is needed to let the screen reader users read the value. Maybe there's a better solution so that the text doesn't appear yet is spoken by the screen reader?
+    return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'>" + value + "% </span>";
   }
 
   function YesNoFormatter(row, cell, value, columnDef, dataContext) {
     return value ? "Yes" : "No";
   }
 
   function CheckboxFormatter(row, cell, value, columnDef, dataContext) {
-    return '<img class="slick-edit-preclick" src="../images/' + (value ? "CheckboxY" : "CheckboxN") + '.png">';
+    // Using [ ] as alt text for an unchecked box seems to result in rendering only the opening bracket in the screen reader so we use [-] instead.
+    return '<img class="slick-edit-preclick" src="../images/' + (value ? "CheckboxY" : "CheckboxN") + '.png" alt=' + (value ? "[X]" : "[-]") + '>';
   }
 
   function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
-    return value ? "<img src='../images/tick.png'>" : "";
+    return value ? "<img src='../images/tick.png' alt='[X]'>" : "";
   }
 })(jQuery);

SlickGrid/slick.grid.js

@@ -141,7 +141,6 @@ if (typeof Slick === "undefined") {
     var $container;
     var uid = "slickgrid_" + Math.round(1000000 * Math.random());
     var self = this;
-    var $focusSink, $focusSink2;
     var $groupHeaders = $();
     var $headerScroller;
     var $headers;
@@ -340,22 +339,23 @@ if (typeof Slick === "undefined") {
           .css("overflow", "hidden")
           .css("outline", 0)
           .addClass(uid)
-          .addClass("ui-widget");
-
+          .addClass("ui-widget")
+          .attr("role", treeColumns.hasDepth() ? "treegrid" : "grid")
+          .attr("aria-colcount", columns.length)
+          .attr("aria-rowcount", data.length);
+
       // set up a positioning container if needed
       if (!/relative|absolute|fixed/.test($container.css("position"))) {
         $container.css("position", "relative");
       }
 
-      $focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container);
-
       // Containers used for scrolling frozen columns and rows
-      $paneHeaderL = $("<div class='slick-pane slick-pane-header slick-pane-left' tabIndex='0' />").appendTo($container);
-      $paneHeaderR = $("<div class='slick-pane slick-pane-header slick-pane-right' tabIndex='0' />").appendTo($container);
-      $paneTopL = $("<div class='slick-pane slick-pane-top slick-pane-left' tabIndex='0' />").appendTo($container);
-      $paneTopR = $("<div class='slick-pane slick-pane-top slick-pane-right' tabIndex='0' />").appendTo($container);
-      $paneBottomL = $("<div class='slick-pane slick-pane-bottom slick-pane-left' tabIndex='0' />").appendTo($container);
-      $paneBottomR = $("<div class='slick-pane slick-pane-bottom slick-pane-right' tabIndex='0' />").appendTo($container);
+      $paneHeaderL = $("<div class='slick-pane slick-pane-header slick-pane-left' tabIndex='-1' />").appendTo($container);
+      $paneHeaderR = $("<div class='slick-pane slick-pane-header slick-pane-right' tabIndex='-1' />").appendTo($container);
+      $paneTopL = $("<div class='slick-pane slick-pane-top slick-pane-left' tabIndex='-1' />").appendTo($container);
+      $paneTopR = $("<div class='slick-pane slick-pane-top slick-pane-right' tabIndex='-1' />").appendTo($container);
+      $paneBottomL = $("<div class='slick-pane slick-pane-bottom slick-pane-left' tabIndex='-1' />").appendTo($container);
+      $paneBottomR = $("<div class='slick-pane slick-pane-bottom slick-pane-right' tabIndex='-1' />").appendTo($container);
 
       if (options.createPreHeaderPanel) {
         $preHeaderPanelScroller = $("<div class='slick-preheader-panel ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($paneHeaderL);
@@ -429,10 +429,10 @@ if (typeof Slick === "undefined") {
       }
 
       // Append the viewport containers
-      $viewportTopL = $("<div class='slick-viewport slick-viewport-top slick-viewport-left' tabIndex='0' hideFocus />").appendTo($paneTopL);
-      $viewportTopR = $("<div class='slick-viewport slick-viewport-top slick-viewport-right' tabIndex='0' hideFocus />").appendTo($paneTopR);
-      $viewportBottomL = $("<div class='slick-viewport slick-viewport-bottom slick-viewport-left' tabIndex='0' hideFocus />").appendTo($paneBottomL);
-      $viewportBottomR = $("<div class='slick-viewport slick-viewport-bottom slick-viewport-right' tabIndex='0' hideFocus />").appendTo($paneBottomR);
+      $viewportTopL = $("<div class='slick-viewport slick-viewport-top slick-viewport-left' tabIndex='-1' hideFocus />").appendTo($paneTopL);
+      $viewportTopR = $("<div class='slick-viewport slick-viewport-top slick-viewport-right' tabIndex=-1' hideFocus />").appendTo($paneTopR);
+      $viewportBottomL = $("<div class='slick-viewport slick-viewport-bottom slick-viewport-left' tabIndex='-1' hideFocus />").appendTo($paneBottomL);
+      $viewportBottomR = $("<div class='slick-viewport slick-viewport-bottom slick-viewport-right' tabIndex='-1' hideFocus />").appendTo($paneBottomR);
 
       // Cache the viewports
       $viewport = $().add($viewportTopL).add($viewportTopR).add($viewportBottomL).add($viewportBottomR);
@@ -442,10 +442,10 @@ if (typeof Slick === "undefined") {
       $activeViewportNode = $viewportTopL;
 
       // Append the canvas containers
-      $canvasTopL = $("<div class='grid-canvas grid-canvas-top grid-canvas-left' tabIndex='0' hideFocus />").appendTo($viewportTopL);
-      $canvasTopR = $("<div class='grid-canvas grid-canvas-top grid-canvas-right' tabIndex='0' hideFocus />").appendTo($viewportTopR);
-      $canvasBottomL = $("<div class='grid-canvas grid-canvas-bottom grid-canvas-left' tabIndex='0' hideFocus />").appendTo($viewportBottomL);
-      $canvasBottomR = $("<div class='grid-canvas grid-canvas-bottom grid-canvas-right' tabIndex='0' hideFocus />").appendTo($viewportBottomR);
+      $canvasTopL = $("<div class='grid-canvas grid-canvas-top grid-canvas-left' tabIndex='-1' hideFocus />").appendTo($viewportTopL);
+      $canvasTopR = $("<div class='grid-canvas grid-canvas-top grid-canvas-right' tabIndex='-1' hideFocus />").appendTo($viewportTopR);
+      $canvasBottomL = $("<div class='grid-canvas grid-canvas-bottom grid-canvas-left' tabIndex='-1' hideFocus />").appendTo($viewportBottomL);
+      $canvasBottomR = $("<div class='grid-canvas grid-canvas-bottom grid-canvas-right' tabIndex='-1' hideFocus />").appendTo($viewportBottomR);
       if (options.viewportClass) $viewport.toggleClass(options.viewportClass, true);
 
       // Cache the canvases
@@ -487,8 +487,6 @@ if (typeof Slick === "undefined") {
         }
       }
 
-      $focusSink2 = $focusSink.clone().appendTo($container);
-
       if (!options.explicitInitialization) {
         finishInitialization();
       }
@@ -562,9 +560,7 @@ if (typeof Slick === "undefined") {
               .on("scroll", handlePreHeaderPanelScroll);
         }
 
-        $focusSink.add($focusSink2)
-            .on("keydown", handleKeyDown);
-        $canvas
+       $canvas
             .on("keydown", handleKeyDown)
             .on("click", handleClick)
             .on("dblclick", handleDblClick)
@@ -1101,6 +1097,8 @@ if (typeof Slick === "undefined") {
             .html("<span class='slick-column-name'>" + m.name + "</span>")
             .attr("id", "" + uid + m.id)
             .attr("title", m.toolTip || "")
+            .attr("aria-colindex", i)
+            .attr("role", "columnheader")
             .data("column", m)
             .addClass(m.headerCssClass || "")
             .addClass(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn? 'frozen': '')
@@ -1199,10 +1197,12 @@ if (typeof Slick === "undefined") {
         var $headerRowTarget = hasFrozenColumns() ? ((i <= options.frozenColumn) ? $headerRowL : $headerRowR) : $headerRowL;
 
         var header = $("<div class='ui-state-default slick-header-column' />")
-            .html("<span class='slick-column-name'>" + m.name + "</span>")
+            .html("<span class='slick-column-name'> " + m.name + "  </span>")
             .width(m.width - headerColumnWidthDiff)
             .attr("id", "" + uid + m.id)
             .attr("title", m.toolTip || "")
+            .attr("role", "columnheader")
+            .attr("aria-colindex", i + 1)
             .data("column", m)
             .addClass(m.headerCssClass || "")
             .addClass(hasFrozenColumns() && i <= options.frozenColumn? 'frozen': '')
@@ -1215,6 +1215,7 @@ if (typeof Slick === "undefined") {
         }
 
         if (m.sortable) {
+          header.attr("aria-sort", "none");
           header.addClass("slick-header-sortable");
           header.append("<span class='slick-sort-indicator"
             + (options.numberedMultiColumnSort && !options.sortColNumberInSeparateSpan ? " slick-sort-indicator-numbered" : "" ) + "' />");
@@ -1228,7 +1229,7 @@ if (typeof Slick === "undefined") {
         });
 
         if (options.showHeaderRow) {
-          var headerRowCell = $("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "'></div>")
+          var headerRowCell = $("<div class='ui-state-default slick-headerrow-column l" + i + " r" + i + "' role=row aria-rowindex=1></div>")
               .data("column", m)
               .addClass(hasFrozenColumns() && i <= options.frozenColumn? 'frozen': '')
               .appendTo($headerRowTarget);
@@ -2220,6 +2221,7 @@ if (typeof Slick === "undefined") {
             .addClass("slick-header-column-sorted")
               .find(".slick-sort-indicator")
                 .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc");
+                headerColumnEls.eq(columnIndex).attr("aria-sort", col.sortAsc ? "ascending" : "descending");
           if (numberCols) {
             headerColumnEls.eq(columnIndex)
               .find(".slick-sort-indicator-numbered")
@@ -2575,9 +2577,11 @@ if (typeof Slick === "undefined") {
 
       var frozenRowOffset = getFrozenRowOffset(row);
 
+
       var rowHtml = "<div class='ui-widget-content " + rowCss + "' style='top:"
         + (getRowTop(row) - frozenRowOffset )
-        + "px'>";
+        + "px'"
+        + "role='row' aria-rowindex=" + (parseInt(row)+1) + ">" // + 2 because index is one based and one for the headers
 
       stringArrayL.push(rowHtml);
 
@@ -2661,9 +2665,7 @@ if (typeof Slick === "undefined") {
       var addlCssClasses = trigger(self.onBeforeAppendCell, { row: row, cell: cell, value: value, dataContext: item }) || '';
       addlCssClasses += (formatterResult && formatterResult.addClasses ? (addlCssClasses ? ' ' : '') + formatterResult.addClasses : '');
       var toolTip = formatterResult && formatterResult.toolTip ? "title='" + formatterResult.toolTip + "'" : '';
-
-      stringArray.push("<div class='" + cellCss + (addlCssClasses ? ' ' + addlCssClasses : '') + "' " + toolTip + ">");
-
+      stringArray.push("<div role='gridcell' aria-colindex='" + (parseInt(cell)+1) + "' class='" + cellCss + (addlCssClasses ? ' ' + addlCssClasses : '') + "' " + toolTip + ">");
       // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
       if (item) {
         stringArray.push(Object.prototype.toString.call(formatterResult)  !== '[object Object]' ? formatterResult : formatterResult.text);
@@ -3723,6 +3725,9 @@ if (typeof Slick === "undefined") {
               node = getCellNode(row, getColumnIndex(columnId));
               if (node) {
                 $(node).removeClass(removedRowHash[columnId]);
+                if(removedRowHash[columnId] == options.selectedCellCssClass) {
+                  $(node).attr("aria-selected", false);
+                }
               }
             }
           }
@@ -3734,6 +3739,9 @@ if (typeof Slick === "undefined") {
               node = getCellNode(row, getColumnIndex(columnId));
               if (node) {
                 $(node).addClass(addedRowHash[columnId]);
+                if(addedRowHash[columnId] == options.selectedCellCssClass) {
+                  $(node).attr("aria-selected", true);
+                }
               }
             }
           }
@@ -3876,9 +3884,15 @@ if (typeof Slick === "undefined") {
                }
             }
             if (e.which == keyCode.HOME) {
-               handled = (e.ctrlKey) ? navigateTop() : navigateRowStart();
+               if(e.ctrlKey) {
+                 handled = navigateTop()
+               }
+               navigateRowStart();
             } else if (e.which == keyCode.END) {
-               handled = (e.ctrlKey) ? navigateBottom() : navigateRowEnd();
+               if(e.ctrlKey) {
+                 handled = navigateBottom()
+               }
+               navigateRowEnd();
             }
          }
       }
@@ -3933,6 +3947,20 @@ if (typeof Slick === "undefined") {
         }
       }
 
+      // enter editing when pressing F2 or an alphanumeric key on an editable cell as specified by the WAI.
+      var inp = String.fromCharCode(e.keyCode);
+      if (/[a-zA-Z0-9-_]/.test(inp)) {
+        if (options.editable) {
+          if (!currentEditor) {
+            if (getEditorLock().commitCurrentEdit()) {
+              makeActiveCellEditable(undefined, undefined, e);
+              handled = true;
+            }
+          }
+        }
+
+      }
+
       if (handled) {
         // the event has been handled so don't let parent element (bubbling/propagation) or browser (default) handle it
         e.stopPropagation();
@@ -3951,7 +3979,7 @@ if (typeof Slick === "undefined") {
       if (!currentEditor) {
         // if this click resulted in some cell child node getting focus,
         // don't steal it back - keyboard events will still bubble up
-        // IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly.
+        // IE9+ seems to default DIVs to s=0 instead of -1, so check for cell clicks directly.
         if (e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
           setFocus();
         }
@@ -4175,11 +4203,7 @@ if (typeof Slick === "undefined") {
     }
 
     function setFocus() {
-      if (tabbingDirection == -1) {
-        $focusSink[0].focus();
-      } else {
-        $focusSink2[0].focus();
-      }
+      setActiveCellInternal(getCellNode(activeRow, activeCell), false);
     }
 
     function scrollCellIntoView(row, cell, doPaging) {
@@ -4242,6 +4266,8 @@ if (typeof Slick === "undefined") {
         activeCell = activePosX = activeCell = activePosX = getCellFromNode(activeCellNode);
 
         $activeCellNode.addClass("active");
+        $activeCellNode.attr("tabindex", "0");
+        $activeCellNode.focus();
         if (rowsCache[activeRow]) {
           $(rowsCache[activeRow].rowNode).addClass('active');
         }
@@ -4939,11 +4965,11 @@ if (typeof Slick === "undefined") {
           ) {
           scrollCellIntoView(pos.row, pos.cell, !isAddNewRow && options.emulatePagingWhenScrolling);
         }
-        setActiveCellInternal(getCellNode(pos.row, pos.cell));
+        setActiveCellInternal(getCellNode(pos.row, pos.cell), false);
         activePosX = pos.posX;
         return true;
       } else {
-        setActiveCellInternal(getCellNode(activeRow, activeCell));
+        setActiveCellInternal(getCellNode(activeRow, activeCell), false);
         return false;
       }
     }