-
Notifications
You must be signed in to change notification settings - Fork 6.8k
feat(aria/grid): create the aria grid #32092
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Deployed dev-app for 497fa53 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. |
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What happens if there are multiple widgets inside of the cell?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 the 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it possible to store and track this data in the cells themselves?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's not optimize this right now. If this becomes an issue we can refactor this internally affecting the public api.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Reviewed for infra
{{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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Things are (mostly) done
ngGrid
,ngGridRow
,ngGridCell
,ngGridCellWidget
directives.Next up