web/a11y: Modals, Command Palette (Merge branch) by GirlBossRush · Pull Request #17812 · goauthentik/authentik

GirlBossRush · 2025-10-30T01:27:53Z

This PR is a merge branch for <ak-modal>, a custom element built on the native <dialog> element, with support for lazy-loading and screen-reader compatibility.

Given our heavy use of modals in the UI, the new component is fully backwards compatible with existing implementations. To illustrate the migration path, this PR applies <ak-modal> to a few examples: About authentik, Create Application, and Edit Application.

About authentik extends the base modal class with an updated template. The modal is added to the DOM only when the button is clicked and removed when closed — ideal for infrequently used or content-heavy modals.
Create Application uses a renderModal utility function to trigger a modal from an event listener, with the same lazy-loading behaviour.
Edit Application is similar, but also demonstrates passing data to the modal without a bound event listener per table row.

Details

Introduces <ak-modal>, a new custom element built on the native <dialog> element, with support for lazy-loading, screen-reader accessibility (delegatesFocus, proper ARIA labeling), and a renderModal / modalInvoker utility API for programmatic and declarative usage.

Migrates modals across the admin UI to use <ak-modal>, replacing the legacy TableModal and ModalButton-based patterns. Affected areas include: application create/edit, user management (password reset, impersonation, bulk revoke, activate/deactivate), group/role member selection, provider selection, permission selection, RAC launch endpoint, policy bindings, About authentik, and more.
Removes deprecated components: TableModal, ProviderSelectModal, PermissionSelectModal, GroupSelectModal, and the old Modal/modal.css styles. Replaces them with leaner form-based equivalents (ProviderSelectForm, PermissionSelectForm, UserGroupSelectForm, MemberSelectForm).
Extracts form serialization into a dedicated serialization.ts module and validation error reporting into errors.ts, simplifying Form.ts.
Adds a new command palette (<ak-command-palette>) with admin and user variants, including keyboard navigation and search.
Refactors the wizard component (WizardStep.ts, ak-wizard-steps.ts) and the application wizard to align with the new modal system, cleaning up step types and provider form composition.
Moves several utility files to more appropriate locations (policies/utils.ts, sources/utils.ts, events/ObjectChangelog.ts, events/UserEvents.ts into admin/ or common/).

Migration highlights

Pattern	Before	After
Infrequent modals (e.g. About)	Always in DOM	Lazy — added on open, removed on close
Table row actions (e.g. Edit Application)	`TableModal` subclass with embedded table	`renderModal()` / `modalInvoker` directive with a plain form
Selection modals (e.g. Group/Provider/Permission select)	`*SelectModal` extending `TableModal`	`*SelectForm` rendered inside `<ak-modal>`
Programmatic open	Manual orchestration controller	`renderModal(MyForm, init)` returns a `Promise<void>`

Misc changes

TableModal is removed — any downstream subclasses must migrate to <ak-modal> + form pattern.
AkControlElement renamed to ControlElement.
Several internal module paths changed (see file renames above).

netlify · 2025-10-30T01:27:58Z

✅ Deploy Preview for authentik-docs ready!

Name	Link
🔨 Latest commit	`6176aef`
🔍 Latest deploy log	https://app.netlify.com/projects/authentik-docs/deploys/69c3512d0671af000814d7da
😎 Deploy Preview	https://deploy-preview-17812--authentik-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-30T01:27:58Z

✅ Deploy Preview for authentik-integrations ready!

Name	Link
🔨 Latest commit	`6176aef`
🔍 Latest deploy log	https://app.netlify.com/projects/authentik-integrations/deploys/69c3512d49544400080ef6b2
😎 Deploy Preview	https://deploy-preview-17812--authentik-integrations.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-30T01:28:35Z

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	`56195d2`
🔍 Latest deploy log	https://app.netlify.com/projects/authentik-storybook/deploys/69c37474d000b40008d845d3
😎 Deploy Preview	https://deploy-preview-17812--authentik-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2025-10-30T01:34:14Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.82%. Comparing base (5ff8400) to head (56195d2).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #17812   +/-   ##
=======================================
  Coverage   92.81%   92.82%           
=======================================
  Files        1000     1000           
  Lines       56589    56589           
  Branches      425      425           
=======================================
+ Hits        52525    52526    +1     
+ Misses       4064     4063    -1

Flag	Coverage Δ
conformance	`37.39% <ø> (+<0.01%)`	⬆️
e2e	`42.89% <ø> (-0.01%)`	⬇️
integration	`22.22% <ø> (+<0.01%)`	⬆️
rust	`0.23% <ø> (ø)`
unit	`91.72% <ø> (+<0.01%)`	⬆️
unit-migrate	`91.81% <ø> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2025-10-30T01:56:38Z

authentik PR Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-170904cf1ac2e4e623283b2160b4512bf867caf5
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

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-170904cf1ac2e4e623283b2160b4512bf867caf5

Afterwards, run the upgrade commands from the latest release notes.

kensternberg-authentik

Overall, this looks good, and I've run it to see that it doesn't seem broken. :-)

web/src/admin/applications/wizard/steps/ProviderChoices.ts

* main: (42 commits) endpoints/connectors: fix enabled flag not respected (#21144) web: bump vite from 7.3.1 to 8.0.2 in /web (#21109) website/docs: add a single page about our user interface, document Consent stage (#20533) website: bump the build group across 1 directory with 9 updates (#21127) web: bump knip from 5.88.1 to 6.0.5 in /web (#21129) core: bump drf-spectacular from 0.28.0 to 0.29.0 (#19420) packages/client-go: init (#21139) providers/proxy: Add a default maxResponseBodySize to Traefik Middleware (#21111) core: bump library/nginx from `dec7a90` to `7150b3a` in /website (#21137) core: bump gunicorn from 25.1.0 to 25.2.0 (#21134) core: bump github.com/getsentry/sentry-go from 0.43.0 to 0.44.1 (#21122) core: bump astral-sh/uv from 0.11.0 to 0.11.1 in /lifecycle/container (#21135) ci: bump taiki-e/install-action from 2.69.8 to 2.69.9 in /.github/actions/setup (#21136) web/a11y: Modals, Command Palette (Merge branch) (#17812) website/docs: document file picker values (#20994) packages/client-rust: init (#21117) core: bump sentry-sdk from 2.55.0 to 2.56.0 (#21124) events: add helper to log deprecation configuration_warning message (#21115) core: bump djangorestframework from 3.17.0 to 3.17.1 (#21126) core: bump twilio from 9.10.3 to 9.10.4 (#21123) ...

GirlBossRush added the area:frontend Features or issues related to the browser, TypeScript, Node.js, etc label Oct 30, 2025

GirlBossRush requested a review from a team as a code owner October 30, 2025 01:27

github-project-automation bot added this to authentik Core Oct 30, 2025

github-project-automation bot moved this to Todo in authentik Core Oct 30, 2025

GirlBossRush force-pushed the fix-wizard-typing branch from c7e2d9f to 9d7ce51 Compare October 30, 2025 01:41

kensternberg-authentik approved these changes Nov 3, 2025

View reviewed changes

web/src/admin/applications/wizard/steps/ProviderChoices.ts Outdated Show resolved Hide resolved

github-project-automation bot moved this from Todo to In Progress in authentik Core Nov 3, 2025

dewi-tik assigned GirlBossRush Nov 27, 2025

GirlBossRush force-pushed the fix-wizard-typing branch from 9d7ce51 to 2d6dbd3 Compare March 10, 2026 06:12

GirlBossRush force-pushed the fix-wizard-typing branch 3 times, most recently from b604703 to 978e587 Compare March 19, 2026 14:50

GirlBossRush requested a review from a team as a code owner March 20, 2026 16:01

GirlBossRush force-pushed the fix-wizard-typing branch 3 times, most recently from 739e34a to 95aa93b Compare March 24, 2026 02:19

GirlBossRush changed the title ~~web: Clarify Application Wizard types.~~ web/a11y: Modals, Command Palette (Merge branch) Mar 24, 2026

GirlBossRush added 8 commits March 25, 2026 04:05

Use project relative paths.

a1cea3a

Fix tests.

f5b0a6b

Fix types.

1b53f92

Clean up admin imports.

f08dac5

Move admin import.

6ab078e

Remove or replace references to admin.

c538721

Typo fix.

1e797ce

Flesh out ak-modal, about modal.

9883a1e

GirlBossRush added 16 commits March 25, 2026 04:06

Fix types, composition.

e43b11d

Fix labels, tests.

3f64ba9

Fix up impersonation, labels.

0bc539b

Flesh out. Fix refresh after submit.

6af5e88

Flesh out basic modal test.

dbdd0ba

Fix ARIA.

e706d87

Flesh out roles test.

cf3cdff

Revise selectors.

3f284dd

Clean up selectors.

16d5feb

Fix impersonation labels, form references.

73144a7

Fix messages appearing under modals.

1c80bd0

Ensure reason is parsed.

aa779cd

Flesh out impersonation test.

ee7df7e

Flesh out impersonate test.

4d712fb

Flesh out application tests. Clean up toolbar header, ARIA.

88394f0

Flesh out wizard test.

6176aef

GirlBossRush force-pushed the fix-wizard-typing branch from cec7b36 to 6176aef Compare March 25, 2026 03:06

GirlBossRush added 4 commits March 25, 2026 06:07

Refine weight, order.

9528b3e

Fix up initial values, selectors.

349472c

Fix tests.

170904c

Fix selector.

56195d2

GirlBossRush enabled auto-merge (squash) March 25, 2026 05:37

GirlBossRush removed the request for review from a team March 25, 2026 05:37

GirlBossRush merged commit b88d082 into main Mar 25, 2026
107 checks passed

GirlBossRush deleted the fix-wizard-typing branch March 25, 2026 06:07

github-project-automation bot moved this from In Progress to Done in authentik Core Mar 25, 2026

This was referenced Mar 25, 2026

web/a11y: Command Palette #20685

Closed

web/a11y: Modals #18916

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

web/a11y: Modals, Command Palette (Merge branch)#17812

web/a11y: Modals, Command Palette (Merge branch)#17812
GirlBossRush merged 63 commits intomainfrom
fix-wizard-typing

GirlBossRush commented Oct 30, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

netlify bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

codecov bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 30, 2025 •

edited

Loading

Uh oh!

kensternberg-authentik left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

GirlBossRush commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Migration highlights

Misc changes

Uh oh!

netlify bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for authentik-docs ready!

Uh oh!

netlify bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for authentik-integrations ready!

Uh oh!

netlify bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for authentik-storybook ready!

Uh oh!

codecov bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kensternberg-authentik left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

GirlBossRush commented Oct 30, 2025 •

edited

Loading

netlify bot commented Oct 30, 2025 •

edited

Loading

netlify bot commented Oct 30, 2025 •

edited

Loading

netlify bot commented Oct 30, 2025 •

edited

Loading

codecov bot commented Oct 30, 2025 •

edited

Loading

github-actions bot commented Oct 30, 2025 •

edited

Loading