docs: add examples for aria directives #32233
Conversation
andrewseguin
requested review from
crisbeto,
tjshiu and
wagnermaciel
and removed request for
a team,
crisbeto and
tjshiu
andrewseguin
force-pushed
the
aria-themes
branch
from
67cb4fe to
733dae9
Compare
| <div ngCombobox> | ||
| <input ngComboboxInput #comboboxInput="ngComboboxInput" | ||
| (click)="open.set(true)" | ||
| cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin"/> |
There was a problem hiding this comment.
You don't need to apply the overlay origin directive here, for a while we've supported passing in an element as an orign instead. E.g. <input #origin/> <ng-template [cdkConnectedOverlay]="{origin}".
There was a problem hiding this comment.
Ah yeah thanks, I forgot to update this Combobox example. I ended up developing the autocomplete one more.
In general I was mostly checking this in for Wagner to iterate off, and we'll probably end up removing these over time. But it's our current "simplest-case" examples (e.g. no typescript)
| cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin"/> | ||
|
|
||
| <ng-template | ||
| cdkConnectedOverlay |
There was a problem hiding this comment.
Should we use the new API from #32227 here? E.g. [cdkConnectedOverlay]="{...}".
| [cdkConnectedOverlayAsPopover]="true" | ||
| [cdkConnectedOverlayOrigin]="overlayOrigin" | ||
| [cdkConnectedOverlayOpen]="open()"> | ||
| <ng-template ngComboboxPopupContainer> |
There was a problem hiding this comment.
This ng-template shouldn't be necessary.
| content: '◯'; | ||
| } | ||
|
|
||
| [ngTabList] { |
There was a problem hiding this comment.
Since view encapsulation is disabled for this example, these styles can leak into the rest of the dev app. I was fixing something similar in #32103. I think we can remove the ViewEncapsulation.None from the example since that's what most Angular users will be using.
There was a problem hiding this comment.
Ah good catch - Ill remove ViewEncapsulation
| @@ -0,0 +1,56 @@ | |||
| [ngComboboxInput] { | |||
There was a problem hiding this comment.
Same note here about view encapsulation.
wagnermaciel
added
the
dev-app preview
|
Deployed dev-app for c698dc1 to: https://ng-dev-previews-comp--pr-angular-components-32233-dev-essru9x3.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
|
I'm not sure I understand the distinction between docs examples and the current aria examples. What's the rationale for adding a new tab instead of making these changes in-place? |
|
This is a quick prototype-y check-in of work, starting initially as "here's a skeleton version of all the components with minimal styles", then turning into "here's a.dev examples with scoped styles". We can add these as examples directly to the original tabs (and probably should). But we need to sort out the styles better since the current implementation is to share the same stylesheets across directives. On a.dev, we should have each example only display the CSS it needs, instead of a shared set across examples. That said, we can leave this PR open/closed and avoid merging it. I just wanted to make sure my examples lived somewhere here to reference later in some form of version control |
3 participants
No description provided.