fix(a11y): keyboard navigation changes of expand and selection buttons (#7048)

* added key down events for expand buttons

- Added key down event function for expand all and expand tree buttons. To enable expand button for Enter and Space Keys.

* added key-down event for row header button

* formatting changes

* added key down event for expand all button

* updated key down event for selection button

* added tab index to enable navigation

* added tab index for keyboard navigation

Author: MsDev88

Diff for: packages/selection/src/js/selection.js

@@ -788,7 +788,7 @@
           }
 
           function selectButtonKeyDown(row, evt) {
-            if (evt.keyCode === 32) {
+            if (evt.keyCode === 32 || evt.keyCode === 13) {
               evt.preventDefault();
               selectButtonClick(row, evt);
             }

Diff for: packages/selection/src/templates/selectionRowHeaderButtons.html

@@ -1,6 +1,7 @@
 <div
   class="ui-grid-selection-row-header-buttons ui-grid-icon-ok clickable"
   ng-class="{'ui-grid-row-selected': row.isSelected}"
+  tabindex="0"
   ng-click="selectButtonClick(row, $event)"
   ng-keydown="selectButtonKeyDown(row, $event)"
   role="checkbox"

Diff for: packages/selection/src/templates/selectionSelectAllButtons.html

@@ -1,5 +1,6 @@
 <div
 	role="button"
+  tabindex="0"
   class="ui-grid-selection-row-header-buttons ui-grid-icon-ok"
   ng-class="{'ui-grid-all-selected': grid.selection.selectAll}"
   ng-click="headerButtonClick($event)"

Diff for: packages/tree-base/src/js/tree-base.js

@@ -1609,6 +1609,11 @@
           evt.stopPropagation();
           uiGridTreeBaseService.toggleRowTreeState(self, row, evt);
         };
+        $scope.treeButtonKeyDown = function (row, evt) {
+          if (evt.keyCode === 32 || evt.keyCode === 13) {
+            $scope.treeButtonClick(row, evt);
+          }
+        };
       }
     };
   }]);
@@ -1645,6 +1650,11 @@
             uiGridTreeBaseService.expandAllRows(self, evt);
           }
         };
+        $scope.headerButtonKeyDown = function (evt) {
+          if (evt.keyCode === 32 || evt.keyCode === 13) {
+            $scope.headerButtonClick(self, evt);
+          }
+        };
       }
     };
   }]);

Diff for: packages/tree-base/src/templates/treeBaseExpandAllButtons.html

@@ -1,5 +1,7 @@
 <div
   class="ui-grid-tree-base-row-header-buttons"
+  tabindex="0"
   ng-class="headerButtonClass()"
-  ng-click="headerButtonClick($event)">
+  ng-click="headerButtonClick($event)"
+  ng-keydown="headerButtonKeyDown($event)">
 </div>

Diff for: packages/tree-base/src/templates/treeBaseRowHeaderButtons.html

@@ -1,6 +1,8 @@
 <div
   class="ui-grid-tree-base-row-header-buttons"
   ng-class="{'ui-grid-tree-base-header': row.treeLevel > -1 }"
+  tabindex="0"
+  ng-keydown="treeButtonKeyDown(row, $event)"
   ng-click="treeButtonClick(row, $event)">
   <i
     ng-class="treeButtonClass(row)"