web/a11y: Modal revisions, behavior fixes#21206
Closed
GirlBossRush wants to merge 16 commits intomainfrom
Closed
Conversation
GirlBossRush
added
the
area:frontend
✅ Deploy Preview for authentik-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
GirlBossRush
force-pushed
the
modal-revisions-2
branch
from
5037bc0 to
76bda71
Compare
GirlBossRush
force-pushed
the
modal-revisions-3
branch
from
0eaab7e to
26e1ee6
Compare
GirlBossRush
force-pushed
the
modal-revisions-3
branch
from
26e1ee6 to
2508e26
Compare
✅ Deploy Preview for authentik-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #21206 +/- ##
==========================================
+ Coverage 92.26% 92.28% +0.01%
==========================================
Files 1032 1032
Lines 59658 59658
Branches 2537 2537
==========================================
+ Hits 55045 55055 +10
+ Misses 4548 4540 -8
+ Partials 65 63 -2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
Contributor
|
authentik PR Installation instructions Instructions for docker-composeAdd the following block to your AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-773c7f7f087c92a70911158b2df48525bd396f42
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)sAfterwards, run the upgrade commands from the latest release notes. Instructions for KubernetesAdd the following block to your authentik:
outposts:
container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
global:
image:
repository: ghcr.io/goauthentik/dev-server
tag: gh-773c7f7f087c92a70911158b2df48525bd396f42Afterwards, run the upgrade commands from the latest release notes. |
GirlBossRush
force-pushed
the
modal-revisions-3
branch
2 times, most recently
from
f97f88c to
d8adf3c
Compare
GirlBossRush
force-pushed
the
modal-revisions-3
branch
from
b9d1eca to
8e4a01b
Compare
✅ Deploy Preview for authentik-integrations ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
kensternberg-authentik
left a comment
kensternberg-authentik
left a comment
There was a problem hiding this comment.
-
The first thing in the PR, “NavigatorFixture,” is just an upgrade to the flexibility of the fixture. Nothing that depends on it now will break. It could be its own PR.
-
The fixes for ChipGroup.ts, Chip.ts, RelatedUserList.ts (which uses those) and common.css (which adds
ak-m-plceholderas a class) are independent of all the other stuff in the PR. Make that a separate PR, please. -
The changes to
intersectionObserver(./elements/decorators/intersection-observer) are pretty important, but they’re only used in the patch toTablelater. CouldintersectionObserverbe its own PR without breaking anything? -
The Safari CSS fix is a thing by itself. It should be its own PR.
-
The Table.css changes could be a PR by themselves.
-
The Wizard background removal in
./components/Wizard/wizard.csscould be its own PR. -
So could the “orange color scheme” stuff.
-
The places where you use the dropdown button could be their own PR. I love this new addition, but it’s just drowned in this massive PR. Please split this into a PR of its own– the new button, and where you use it.
-
The Form Header and Form Submit button (
./elements/forms/Form.ts,./elements/forms/Form.css, and the parts of AdminSettingsForm (./admin/admin-settings/AdminSettingsForm.ts) are all adjustments to make ARIA work better and be more visible in the code. They could be their own PR.
After this, break out the "modal to dialog" stuff into its own PR. I'm not sure how you'd break that up, it's huge, but aside from the changes inside it, it's a mechanical fix that someone can eyeball with ripgrep, and at least it's one thing on its own.
Consider if the changes to AKElement (@localized, hostStyles, the big rename of hasSlot to findSlot) can be their own PR.
There's a bunch of other stuff in there that makes me go "Why is this here?" like the skeleton stuff, the change to test timeouts, and so on that I haven't even looked at carefully enough yet, but I bet they could be separated out as well. Even if you only use Skeleton in the dialogs, having that as a separate PR would be a hell of a good thing.
And for some of this, please add Storybooks so we can see what we're up against.
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
GirlBossRush
force-pushed
the
modal-revisions-3
branch
8 times, most recently
from
5958c9f to
a12733f
Compare
1 task
This was referenced Apr 9, 2026
GirlBossRush
force-pushed
the
modal-revisions-3
branch
from
a12733f to
773c7f7
Compare
Rename the slot-inspection helper on `AKElement` from `hasSlotted` to `findSlotted` and return the first matching element rather than a boolean, so callers can both check for presence and reach the node. Update every call site in the tree (default callers pass no argument instead of `null`). Along the way, tidy `AKElement`'s host-style plumbing: expose `hostStyles` as a getter/setter backed by a `CSSStyleSheet` cache and move the adoption logic into `attachHostStyles` / `detachHostStyles` class methods, so subclasses can share the lifecycle. Drop the now unused `@localized` decorator import. Also add a `findAssignedSlot` helper in `elements/utils/slots.ts` for light-DOM → slot lookups, and give `EmptyState` an explicit `display: block` so empty-state placement doesn't collapse when wrapped.
Make `ChipGroup` generic over its chip value type, expose a `placeholder` property that renders an inline placeholder when the default slot is empty, and intercept clicks that land on child chips so outer handlers can tell "clicked the group" apart from "clicked a chip". Give the host an explicit `display: block` so the group participates in layout correctly. Move the removal tooltip on `Chip` to the right so it doesn't clip at the top of the row. In `base/common.css`, add the `ak-m-placeholder` class used by the new chip-group placeholder and extend `.ak-fade-in` with an opt-in `ak-m-delayed` modifier that animates height alongside the fade via `interpolate-size`, so loading cards can slide in without jank.
Introduce `elements/utils/scrollbars.ts` with `measureScrollbarWidth` and `applyScrollbarClass`, and call it from `Interface` so the root document picks up `ak-m-visible-scrollbars` / `ak-m-overlay-scrollbars` depending on the platform. Add an `ak-m-thin-scrollbar` selector to the thin-scrollbar rule in `base/scrollbars.css` so ad-hoc containers can opt in. Refresh `Table.css`: expose `search-form`, `search-input`, `pagination-bottom`, and `table` parts; introduce `--ak-c-table--expandable-overlay--Color` theming for expandable rows (including a nested-table background pass); add an `ak-c-table__actions` helper so per-row action buttons wrap consistently; and teach the host to honor `display-box="contents"` so tables embedded in `display: contents` parents still participate in layout checks. Drop the unused `elements/utils/isVisible.ts`; the only live `isVisible` helpers live beside their callers under SearchSelect.
Teach `ak-dropdown` to recognize a PatternFly split-button toggle — look for `.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button:last-child` first and fall back to the single-button selector — so a primary action and a menu trigger can coexist in one dropdown. Drop the workaround that skipped wiring menu-item click handlers: now that dropdowns live inside native dialogs, letting a menu-item click bubble no longer closes the parent modal. Switch the private fields to `protected` so subclasses can reach them, and anchor the AKRefreshEvent and outside-click listeners at `window` explicitly (matching the new `@listen` default). In `@listen`, flip the default target from `window` to `this`. A component's own element is the more intuitive default for a decorator attached to an instance method, and call sites that want the window now opt in explicitly. Extend `Dropdown/dropdown.css` with `--pf-c-dropdown__toggle--*` padding variables so split-button variants get consistent spacing.
Add a sticky `ak-c-form__header` row to `Form.css` with a `form-actions` part so form headers can host an inline title and action cluster without each form reinventing the layout. In `Form/form.css`, add a `.ak-m-content-center` variant for forms that center their body inside a fixed-size container, and introduce a PatternFly-compatible grid-based Radio label so the input and its description align cleanly and the whole row is clickable. Tighten the `FormGroup` summary spacing (use `spacer--sm` inline and `spacer-xs` block) and hoist the high-contrast overrides onto the open group so the details marker stays aligned. Make `AKControlElement` abstract (requiring a `name`), rename `isValid` → `valid`, declare it as implementing the new `FormField<T>` interface, and mark it deprecated in favor of `FormAssociatedElement`. Make `FormField` generic over the JSON value type, extend `HTMLElement`, and drop the `Jsonifiable` runtime import in favor of a type-only import. `HorizontalFormElement` now searches for either legacy control elements or the new `FormField` shape when picking its focus target.
Replace the bespoke modal stack with an `<ak-modal>` built on the browser's native `<dialog>`, and collect every piece of the new infrastructure under `#elements/dialogs`: * `ak-modal.ts` / `ak-modal.css` — the element + its PatternFly compatible styles. * `dialog.css` — the global `ak-c-dialog` token and backdrop rules, imported via the new `components/Modal/modal.css` entry point (replacing the old `base/modal.css` import in `base.css` and `interface.global.css`). * `shared.ts` — the `TransclusionChildElement` / `TransclusionChildSymbol` contract plus the parent-side helpers (`isTransclusionParentElement`, `slottedElementUpdatedAt`), so forms and tables hosted inside a modal can signal re-render hints to the dialog wrapper. * `directives.ts` / `invokers.ts` / `utils.ts` — the `modalInvoker`, `renderModal`, and `DialogInit` helpers that declarative call sites use to open a modal from a button without imperatively mounting the element. * `components/` — the ready-made invoker buttons (`ModalInvokerButton`, `IconEditButton`, `IconEditButtonByTagName`, `IconPermissionButton`) and the `components.ts` barrel. * `components/Modal/modal.css` — the short host wrapper that pulls `dialog.css` into the bundled base stylesheet chain. Rewire the existing modal consumers to use the new contract: * `Form` now implements `TransclusionChildElement`, exposes `verboseName`/`verboseNamePlural`/`createLabel`/`submitVerb` statics, tracks visibility via `intersectionObserver`, and forwards `asModalInvoker` / `showModal` through the new `modalInvoker` / `renderModal` helpers. `ModalForm` and `ModelForm` follow the same shape. `ModalButton` drops its own `pf-c-modal-box` padding fix (the dialog handles it). * `Table` implements `TransclusionChildElement`, dispatches refresh via `AKRefreshEvent`, and exposes `display-box="contents"` so tables embedded in dialogs participate in layout checks. `TablePage` / `TableSearch` widen types and surface `search-form` / `search-input` parts for dialog-scoped styling. * `ak-about-modal`, `ObjectPermissionModal`, `RACLaunchEndpointModal`, the command palette, and the admin/user interface roots all move off `#elements/modals` and onto `#elements/dialogs`. * `AdminSettingsForm` / `AdminSettingsPage` render their header / actions through the new `ak-c-form__header` + `form-actions` slots introduced in the prior Form CSS commit, and swap the outermost `<section>` for `<main>` for better landmark semantics. * `elements/utils/render-roots.ts` and `elements/utils/unsafe.ts` gain dialog-aware helpers (notably a directive-based replacement for the old `unsafe` builder). * `base/globals.css` disables overscroll while any dialog is open via `html[data-dialog-count]`; `package.json` adds the `#elements/dialogs` barrel alias. Delete the old `elements/modals/` directory (`ak-modal.ts`, `shared.ts`, `styles.css`, `utils.ts`) and `styles/authentik/base/modal.css` now that nothing imports them.
Rebuild the shared Wizard primitives on top of the new <dialog> contract: split CreateWizard/utils out of Wizard, rename admin *Wizard.ts entry points to ak-*-wizard.ts (Policy, Provider, Source, Stage, PropertyMapping, ServiceConnection), and port the Application wizard steps to the new WizardStep base. Adds the user wizard and recovery invoker plus the refreshed Wizard component styles. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Port every admin form, list page, and RBAC surface to the new TransclusionChildElement / asModalInvoker contract introduced with the native <dialog> migration. Replace the old ModalButton-driven helpers with the new modalInvoker/renderModal flow, add the shared IconCopyButton/IconTokenCopyButton/IconEnrollmentTokenCopyButton components (with .ak-c-button--icon__progress styling), and refresh messages, notifications, flow inspector, and user portal consumers to match. Includes small common/element utility updates picked up along the way. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adjust application, group, session, and user browser tests to the new wizard and modal selectors introduced by the <dialog> migration and relax a handful of timeouts that were tight against the old ModalButton animation sequence. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
GirlBossRush
force-pushed
the
modal-revisions-3
branch
2 times, most recently
from
afb2285 to
268ff51
Compare
GirlBossRush
force-pushed
the
modal-revisions-3
branch
from
268ff51 to
545175a
Compare
3 tasks
Contributor
Author
|
Resolved in #21336 |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Details