-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(datagrid): expand selection click target to entire selection cell
New WCAG 2.2 success criteria (published December 2022) stipulates a minimum click target of 24x24 pixels. This also helps improve general multi-select UX by increasing the click target area for selecting rows. closes #462
- Loading branch information
1 parent
22fb36f
commit d1ba45c
Showing
5 changed files
with
60 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
projects/angular/src/data/datagrid/datagrid-selection-cell.directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
/* | ||
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved. | ||
* This software is released under MIT license. | ||
* The full license information can be found in LICENSE in the root directory of this project. | ||
*/ | ||
|
||
import { Directive, HostListener } from '@angular/core'; | ||
|
||
import { Selection } from './providers/selection'; | ||
|
||
@Directive({ | ||
selector: '.datagrid-select', | ||
}) | ||
export class ClrDatagridSelectionCellDirective { | ||
constructor(private readonly selection: Selection) {} | ||
|
||
@HostListener('click', ['$event']) | ||
private onSelectionCellClick(event: MouseEvent & { target: HTMLElement }) { | ||
// We want to effectively expand the selection click target to the entire selection cell. | ||
|
||
// If row selection is enabled, do nothing because the entire selection cell is already clickable. | ||
if (this.selection.rowSelectionMode) { | ||
return; | ||
} | ||
|
||
// If click was outside the label/input, forward the click to the input. | ||
if (event.target.tagName !== 'LABEL' && event.target.tagName !== 'INPUT') { | ||
event.target.querySelector('input').click(); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters