@ui-grid/core - npm Package Compare versions

Comparing version 4.10.1 to 4.10.2

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log
 
+## [4.10.2](https://github.com/angular-ui/ui-grid/compare/v4.10.1...v4.10.2) (2021-06-14)
+
+
+### Bug Fixes
+
+* 🐛 improve accessibility in the grid menus and selection ([e5ae7c0](https://github.com/angular-ui/ui-grid/commit/e5ae7c085f4ac314dfbd4fab15b24f20730ee5cd))
+* **core:** use allowFloatWidth property to allow float calculations for width ([bb28b2f](https://github.com/angular-ui/ui-grid/commit/bb28b2fb523f5e47aa61a80bf70e4aabc49ab1e7))
+* **core:** use allowFloatWidth property to allow float calculations for width ([f4d3e22](https://github.com/angular-ui/ui-grid/commit/f4d3e222965d91a7faf0f4886ad6d4906789df9e))
+
+
+
+
+
 ## [4.10.1](https://github.com/angular-ui/ui-grid/compare/v4.10.0...v4.10.1) (2021-05-28)
@@ -8,0 +21,0 @@

package.json

 {
   "name": "@ui-grid/core",
-  "version": "4.10.1",
+  "version": "4.10.2",
   "description": "A data grid for Angular",
@@ -35,3 +35,3 @@ "main": "index.js",
   "license": "MIT",
-  "gitHead": "355559aca8b7300fc599ab1ad79784d301fbf3d0"
+  "gitHead": "63e49b12abdf978aacdfe4537849e46e1deca6c6"
 }

src/js/directives/ui-grid-column-menu.js

@@ -313,2 +313,7 @@ (function() {
 
+      function updateCurrentColStatus(menuShown) {
+        if ($scope.col) {
+          $scope.col.menuShown = menuShown;
+        }
+      }
 
@@ -328,4 +333,7 @@ /**
       $scope.showMenu = function(column, $columnElement, event) {
+        // Update the menu status for the current column
+        updateCurrentColStatus(false);
         // Swap to this column
         $scope.col = column;
+        updateCurrentColStatus(true);
 
@@ -364,2 +372,3 @@ // Get the position information for the column element
         $scope.menuShown = false;
+        updateCurrentColStatus(false);
         if ( !broadcastTrigger ) {
@@ -366,0 +375,0 @@ $scope.$broadcast('hide-menu');

src/js/directives/ui-grid-header-cell.js

@@ -72,2 +72,3 @@ (function() {
             $scope.menuShown = false;
+            $scope.col.menuShown = false;
 
@@ -351,9 +352,4 @@ // Put asc and desc sort directions in scope
               // If the shift key is being held down, add this column to the sort
-              var add = false;
-              if (event.shiftKey) {
-                add = true;
-              }
-
               // Sort this column then rebuild the grid's rows
-              uiGridCtrl.grid.sortColumn($scope.col, add)
+              uiGridCtrl.grid.sortColumn($scope.col, event.shiftKey)
                 .then(function () {
@@ -366,3 +362,3 @@ if (uiGridCtrl.columnMenuScope) { uiGridCtrl.columnMenuScope.hideMenu(); }
             $scope.headerCellArrowKeyDown = function(event) {
-              if (event.keyCode === 32 || event.keyCode === 13) {
+              if (event.keyCode === uiGridConstants.keymap.SPACE || event.keyCode === uiGridConstants.keymap.ENTER) {
                 event.preventDefault();
@@ -374,19 +370,10 @@ $scope.toggleMenu(event);
             $scope.toggleMenu = function(event) {
-
               event.stopPropagation();
 
-              // If the menu is already showing...
-              if (uiGridCtrl.columnMenuScope.menuShown) {
-                // ... and we're the column the menu is on...
-                if (uiGridCtrl.columnMenuScope.col === $scope.col) {
-                  // ... hide it
-                  uiGridCtrl.columnMenuScope.hideMenu();
-                }
-                // ... and we're NOT the column the menu is on
-                else {
-                  // ... move the menu to our column
-                  uiGridCtrl.columnMenuScope.showMenu($scope.col, $elm);
-                }
+              // If the menu is already showing and we're the column the menu is on
+              if (uiGridCtrl.columnMenuScope.menuShown && uiGridCtrl.columnMenuScope.col === $scope.col) {
+                // ... hide it
+                uiGridCtrl.columnMenuScope.hideMenu();
               }
-              // If the menu is NOT showing
+              // If the menu is NOT showing or is showing in a different column
               else {
@@ -393,0 +380,0 @@ // ... show it on our column

src/js/directives/ui-grid-menu-button.js

@@ -379,2 +379,12 @@ (function() {
 
+      $scope.toggleOnKeydown = function(event) {
+        if (
+          event.keyCode === uiGridConstants.keymap.ENTER ||
+          event.keyCode === uiGridConstants.keymap.SPACE ||
+          (event.keyCode === uiGridConstants.keymap.ESC && $scope.shown)
+        ) {
+          $scope.toggleMenu();
+        }
+      };
+
       $scope.toggleMenu = function () {
@@ -381,0 +391,0 @@ if ( $scope.shown ) {

src/js/directives/ui-grid-menu.js

@@ -115,4 +115,2 @@ (function() {
         angular.element(document).off('click touchstart', applyHideMenu);
-        $elm.off('keyup', checkKeyUp);
-        $elm.off('keydown', checkKeyDown);
 
@@ -122,4 +120,2 @@ // Turn on the document click handler, but in a timeout so it doesn't apply to THIS click if there is one
           angular.element(document).on(docEventType, applyHideMenu);
-          $elm.on('keyup', checkKeyUp);
-          $elm.on('keydown', checkKeyDown);
         });
@@ -149,4 +145,2 @@ };
         angular.element(document).off('click touchstart', applyHideMenu);
-        $elm.off('keyup', checkKeyUp);
-        $elm.off('keydown', checkKeyDown);
       };
@@ -179,16 +173,10 @@
 
-      // close menu on ESC and keep tab cyclical
-      var checkKeyUp = function(event) {
-        if (event.keyCode === 27) {
-          $scope.hideMenu();
-        }
-      };
-
-      var checkKeyDown = function(event) {
+      $scope.checkKeyDown = function(event) {
         var setFocus = function(elm) {
           elm.focus();
           event.preventDefault();
-          return false;
         };
-        if (event.keyCode === 9) {
+        if (event.keyCode === uiGridConstants.keymap.ESC) {
+          $scope.hideMenu();
+        } else if (event.keyCode === uiGridConstants.keymap.TAB) {
           var firstMenuItem, lastMenuItem;
@@ -199,5 +187,5 @@ var menuItemButtons = $elm[0].querySelectorAll('button:not(.ng-hide)');
             lastMenuItem = menuItemButtons[menuItemButtons.length - 1];
-            if (event.target === lastMenuItem && !event.shiftKey) {
+            if (event.target.parentElement.id === lastMenuItem.parentElement.id && !event.shiftKey) {
               setFocus(firstMenuItem);
-            } else if (event.target === firstMenuItem && event.shiftKey) {
+            } else if (event.target.parentElement.id === firstMenuItem.parentElement.id && event.shiftKey) {
               setFocus(lastMenuItem);
@@ -220,4 +208,2 @@ }
         angular.element(document).off('click touchstart', applyHideMenu);
-        $elm.off('keyup', checkKeyUp);
-        $elm.off('keydown', checkKeyDown);
       });
@@ -224,0 +210,0 @@

src/js/en.js

@@ -40,3 +40,7 @@ /**
         selection: {
-          selectAll: 'Select All'
+          aria: {
+            row: 'Row'
+          },
+          selectAll: 'Select All',
+          displayName: 'Row Selection Checkbox'
         },
@@ -43,0 +47,0 @@ menu: {

src/js/factories/GridColumn.js

@@ -263,2 +263,14 @@ (function() {
    * @ngdoc property
+   * @name allowFloatWidth
+   * @propertyOf ui.grid.class:GridOptions.columnDef
+   * @description Allows float number in column width calculation
+   * @example
+   * <pre>  $scope.gridOptions.columnDefs = [ { field: 'field1', width: 50.5, allowFloatWidth: true},
+   *                                          { field: 'field2', width: '20%', allowFloatWidth: true},
+   *                                          { field: 'field3', width: '*', allowFloatWidth: true }]; </pre>
+   *
+   */
+
+  /**
+   * @ngdoc property
    * @name minWidth
@@ -265,0 +277,0 @@ * @propertyOf ui.grid.class:GridOptions.columnDef

src/js/factories/GridRenderContainer.js

@@ -609,3 +609,8 @@ (function() {
         // pixel width, set to this value
-        width = parseInt(column.width, 10);
+        if (column.colDef.allowFloatWidth) {
+          width = parseFloat(column.width);
+        } else {
+          width = parseInt(column.width, 10);
+        }
+
         usedWidthSum = usedWidthSum + width;
@@ -619,4 +624,9 @@ column.drawnWidth = width;
         var percentageIntegerValue = parseInt(column.width.replace(/%/g, ''), 10);
-        width = parseInt(percentageIntegerValue / 100 * availableWidth);
+        if (column.colDef.allowFloatWidth) {
+          width = parseFloat(percentageIntegerValue / 100 * availableWidth);
+        } else {
+          width = parseInt(percentageIntegerValue / 100 * availableWidth, 10);
+        }
 
+
         if (width > column.maxWidth) {
@@ -652,2 +662,7 @@ width = column.maxWidth;
 
+        if (column.colDef.allowFloatWidth) {
+          width = parseFloat(column.width.length * asteriskVal);
+        }
+
+
         if (width > column.maxWidth) {
@@ -654,0 +669,0 @@ width = column.maxWidth;

src/js/factories/GridRow.js

@@ -34,2 +34,10 @@ (function() {
 
+    /**
+      *  @ngdoc object
+      *  @name index
+      *  @propertyOf  ui.grid.class:GridRow
+      *  @description The current position of the row in the array
+      */
+     this.index = index;
+
      /**
@@ -36,0 +44,0 @@ *  @ngdoc object

test/core/directives/ui-grid-column-menu.spec.js

@@ -582,2 +582,6 @@ describe('ui-grid-column-menu uiGridColumnMenuService', function() {
       });
+      it('should update the extended state of the relate menu button', function() {
+        expect($('.ui-grid-column-menu-button').first().attr('aria-expanded')).toEqual('true');
+      });
+
       it('should raise the sortChanged event when unsort is clicked', function() {
@@ -584,0 +588,0 @@ $($('.ui-grid-menu-item')[2]).click();

test/core/directives/ui-grid-header-cell.spec.js

 describe('uiGridHeaderCell', function() {
 	'use strict';
 
-	var grid, $scope, $compile, $document, $q, $timeout, $window, recompile, $animate, uiGridConstants, gridUtil, $httpBackend,
-		downEvent, upEvent, clickEvent,
+	var grid, $scope, $compile, $document, $timeout, recompile, uiGridConstants, gridUtil, $httpBackend,
+		downEvent, clickEvent,
 		data = [
@@ -29,10 +29,7 @@ {name: 'Ethel Price', gender: 'female', company: 'Enersol'},
 
-		inject(function(_$compile_, $rootScope, _$document_, _$q_, _$timeout_, _$window_, _$animate_, _uiGridConstants_, _gridUtil_, _$httpBackend_) {
+		inject(function(_$compile_, $rootScope, _$document_, _$timeout_, _uiGridConstants_, _gridUtil_, _$httpBackend_) {
 			$scope = $rootScope;
 			$compile = _$compile_;
 			$document = _$document_;
-			$q = _$q_;
 			$timeout = _$timeout_;
-			$window = _$window_;
-			$animate = _$animate_;
 			uiGridConstants = _uiGridConstants_;
@@ -46,7 +43,5 @@ gridUtil = _gridUtil_;
 			downEvent = 'touchstart';
-			upEvent = 'touchend';
 			clickEvent = 'touchstart';
 		} else {
 			downEvent = 'mousedown';
-			upEvent = 'mouseup';
 			clickEvent = 'click';
@@ -53,0 +48,0 @@ }

test/core/directives/ui-grid-menu-button.spec.js

@@ -459,3 +459,37 @@ describe('ui-grid-menu-button uiGridGridMenuService', function() {
 		});
+		describe('toggleOnKeydown method', function() {
+			var event;
+
+			beforeEach(function() {
+				event = $.Event('keydown');
+				$scope.$broadcast('hide-menu');
+				spyOn(uiGridGridMenuService, 'getMenuItems').and.callThrough();
+			});
+			afterEach(function() {
+				uiGridGridMenuService.getMenuItems.calls.reset();
+			});
+			it('should toggle the menu on ENTER', function() {
+				event.keyCode = 13;
+				element.find('.ui-grid-icon-container').trigger(event);
+				expect(uiGridGridMenuService.getMenuItems).toHaveBeenCalled();
+			});
+			it('should toggle the menu on SPACE', function() {
+				event.keyCode = 32;
+				element.find('.ui-grid-icon-container').trigger(event);
+				expect(uiGridGridMenuService.getMenuItems).toHaveBeenCalled();
+			});
+			it('should not try to toggle the menu on ESC if it is closed', function() {
+				event.keyCode = 27;
+				element.find('.ui-grid-icon-container').trigger(event);
+				expect(uiGridGridMenuService.getMenuItems).not.toHaveBeenCalled();
+			});
+			it('should hide the menu on ESC if the menu is open', function() {
+				element.find('.ui-grid-icon-container').trigger('click');
+				uiGridGridMenuService.getMenuItems.calls.reset();
+				event.keyCode = 27;
+				element.find('.ui-grid-icon-container').trigger(event);
+				expect(uiGridGridMenuService.getMenuItems).not.toHaveBeenCalled();
+			});
+		});
 	});
 });

test/core/directives/ui-grid-menu.spec.js

@@ -229,4 +229,5 @@ describe('ui-grid-menu', function() {
 
-	describe('keyUp and keyDown actions', function() {
-		var timeout, menuItemButtons;
+	describe('keyDown actions', function() {
+		var timeout, menuItemButtons, e, focusSpy, hideSpy;
+
 		beforeEach(inject(function($timeout) {
@@ -239,12 +240,14 @@ timeout = $timeout;
 			timeout.flush();
+			e = $.Event("keydown");
+			menuItemButtons = menu.find('button');
+			focusSpy = spyOn(menuItemButtons[0], 'focus');
+			hideSpy = spyOn(isolateScope, 'hideMenu');
 		});
 
 		it('should focus on the first menu item after tabbing from the last menu item', function() {
-			menuItemButtons = menu.find('button');
-			var e = $.Event("keydown");
 			e.keyCode = 9;
-			var focusSpy = jasmine.createSpy('focusSpy');
-			focusSpy(menuItemButtons[0], 'focus');
+			e.target = menuItemButtons[menuItemButtons.length - 1];
+
 			// mock has 4 items, last one his hidden
-			$(menuItemButtons[2]).trigger(e);
+			isolateScope.checkKeyDown(e);
 			expect(focusSpy).toHaveBeenCalled();
@@ -254,9 +257,13 @@ });
 		it('should call hideMenu if ESC is pressed', function() {
-			var hideSpy = jasmine.createSpy('hideMenuSpy');
-			hideSpy(isolateScope, 'hideMenu');
-			var e = $.Event("keyup");
 			e.keyCode = 27;
-			$(menu).trigger(e);
+			isolateScope.checkKeyDown(e);
 			expect(hideSpy).toHaveBeenCalled();
 		});
+
+		it('should do nothing when other keys are pressed', function() {
+			e.keyCode = 13;
+			isolateScope.checkKeyDown(e);
+			expect(hideSpy).not.toHaveBeenCalled();
+			expect(focusSpy).not.toHaveBeenCalled();
+		});
 	});
@@ -263,0 +270,0 @@

test/core/factories/GridRow.spec.js

@@ -1,3 +0,3 @@
-describe('GridRow factory', function () {
-  var $q, $scope, grid, Grid, GridRow, gridUtil, gridClassFactory, $timeout;
+describe('GridRow factory', function() {
+  var $q, $scope, Grid, GridRow, gridUtil, gridClassFactory, $timeout;
 
@@ -16,6 +16,6 @@ beforeEach(module('ui.grid'));
 
-
- describe('binding', function() {
+  describe('binding', function() {
     var grid;
     var entity;
+
     beforeEach(inject(function (_$q_, _$rootScope_, _Grid_, _GridRow_, _gridUtil_) {
@@ -40,2 +40,3 @@ grid = new Grid({id: 'a'});
       };
+      expect(gridRow.index).toBe(0);
       expect(gridRow.getQualifiedColField(col)).toBe('row.entity[\'simpleProp\']');
@@ -45,12 +46,11 @@ });
     it('binds correctly to $$this', function() {
-      var gridRow = new GridRow(entity,0,grid);
+      var gridRow = new GridRow(entity, 1, grid);
       var col = {
         field: '$$this'
       };
+      expect(gridRow.index).toBe(1);
       expect(gridRow.getQualifiedColField(col)).toBe('row.entity');
     });
-
   });
 
-
   describe('row visibility', function() {
@@ -75,3 +75,3 @@ var grid;
 
-    it('should set then unset forceInvisible on visible row, raising visible rows changed event', function () {
+    it('should set then unset forceInvisible on visible row, raising visible rows changed event', function() {
       grid.api.core.on.rowsVisibleChanged( $scope, function() { rowsVisibleChanged = true; });
@@ -104,3 +104,3 @@
 
-    it('should set forceInvisible on invisible row, then clear forceInvisible visible row, doesn\'t raise visible rows changed event', function () {
+    it('should set forceInvisible on invisible row, then clear forceInvisible visible row, doesn\'t raise visible rows changed event', function() {
       grid.api.core.on.rowsVisibleChanged( $scope, function() { rowsVisibleChanged = true; });
@@ -124,3 +124,3 @@ grid.rows[0].visible = false;
 
-    it('row not found is OK, no event raised', function () {
+    it('row not found is OK, no event raised', function() {
       grid.api.core.on.rowsVisibleChanged( $scope, function() { rowsVisibleChanged = true; });
@@ -159,3 +159,3 @@
 
-    it('should flag the grid render containers to upate canvas heights', function () {
+    it('should flag the grid render containers to upate canvas heights', function() {
       var gridRow = grid.rows[0];
@@ -166,3 +166,2 @@ grid.renderContainers.body.getCanvasHeight();
 
-
       gridRow.height = grid.options.rowHeight * 2;
@@ -173,8 +172,3 @@ expect(grid.renderContainers.body.canvasHeightShouldUpdate).toBe(true);
     });
-
-
-
   });
-
 });
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1464200

increased by0.39%

Lines of code

29697

increased by0.31%

No dependency changes