feat(aria/grid): create the aria grid #32092
Conversation
ok7sai
added
the
dev-app preview
|
Deployed dev-app for dc071d7 to: https://ng-dev-previews-comp--pr-angular-components-32092-dev-d6byq9uh.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
src/aria/grid/grid.ts
Outdated
| readonly element = computed(() => this._elementRef.nativeElement); | ||
|
|
||
| /** Whether grid navigation should be paused, usually because this widget has focus. */ | ||
| readonly pauseGridNavigation = model<boolean>(false); |
There was a problem hiding this comment.
This seems like something that shouldn't be exposed for developers to control
| /** Gets the `tabindex` for the widget within the cell. */ | ||
| widgetTabIndex(): -1 | 0 { | ||
| return this._tabIndex(); | ||
| } |
There was a problem hiding this comment.
What happens if there are multiple widgets inside of the cell?
There was a problem hiding this comment.
Really appreciate this work, super excited to see @angular/aria expanding to cover the grid pattern.
Just wanted to mention a use case where multiple widgets inside of a cell might make sense.
There's React Aria's "grid-list" pattern where each row is a single cell with multiple interactive elements inside. Think a file list where each item has separate buttons for open, selection, download, delete, etc.
It’d be great if this use case could be supported.
There was a problem hiding this comment.
Thanks for the ideas! Use case of multiple widgets is certainly going to be supported. The widget concept here is more of a container that allows widget/widgets inside a cell to take over the keyboard control from the grid. E.g. allowing a list of widgets or even another grid of widgets in a cell. We are still sorting out the widget stories aim to provide out of box experience for canonical use cases and meanwhile making the API flexible enough for complex use cases.
| /** The main class that orchestrates the grid behaviors. */ | ||
| export class Grid<T extends GridCell> { | ||
| /** The underlying data structure for the grid. */ | ||
| readonly data: GridData<T>; |
There was a problem hiding this comment.
Is it possible to store and track this data in the cells themselves?
There was a problem hiding this comment.
Let's not optimize this right now. If this becomes an issue we can refactor this internally affecting the public api.
| {{item.label}} | ||
| </div> | ||
| <div ngGridCell class="example-pill-action example-stateful example-grid-cell"> | ||
| <button ngGridCellWidget class="example-pill-button" (click)="removeItem(i)"> |
There was a problem hiding this comment.
Noticed something in the “Pill List” example: when removing a pill, focus seems to leave the grid entirely. After that, keyboard navigation no longer works until I tab back into the grid.
In the WAI-ARIA grid example, focus stays within the grid, after removing a pill it moves to the next one (or the previous if it was the last). Angular Material chips input extend this pattern: when the last chip is removed, focus shifts to the input.
In addition, those implementations treat the input as a separate tab stop from the grid, which allows moving between the pill list and input with a single Tab key press, a pattern that works well for this type of list.
There was a problem hiding this comment.
Thank you so much for testing out the demo! Yes I am aware of the losing focus issue and am working on the restoring focus logic when a deletion happen. The input is how I tested out the cell widget behavior and I will switch to something similar to the APG example once I have another example demonstrating the widget usage.
angular-robot
bot
added
the
area: build & ci
ok7sai
added
action: merge
|
Something to look into after this lands: |
4 participants
Things are (mostly) done
ngGrid,ngGridRow,ngGridCell,ngGridCellWidgetdirectives.Next up