Skip to content

web/a11y: Modals#18916

Closed
GirlBossRush wants to merge 6 commits intomainfrom
a11y-modals
Closed

web/a11y: Modals#18916
GirlBossRush wants to merge 6 commits intomainfrom
a11y-modals

Conversation

@GirlBossRush
Copy link
Contributor

@GirlBossRush GirlBossRush commented Dec 17, 2025

Details

This PR implements <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 three 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.

To keep this PR manageable, only these three modals have been migrated. The rest will follow in subsequent PRs. The new component is available for use in new modals immediately.

@GirlBossRush GirlBossRush changed the title A11y modals web/a11y: Modals Dec 17, 2025
@netlify
Copy link

netlify bot commented Dec 17, 2025

Deploy Preview for authentik-storybook ready!

Name Link
🔨 Latest commit d4a8703
🔍 Latest deploy log https://app.netlify.com/projects/authentik-storybook/deploys/69b0d917adf87e0008a97348
😎 Deploy Preview https://deploy-preview-18916--authentik-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Dec 17, 2025

Deploy Preview for authentik-docs ready!

Name Link
🔨 Latest commit d4a8703
🔍 Latest deploy log https://app.netlify.com/projects/authentik-docs/deploys/69b0d9171d35210008e199d2
😎 Deploy Preview https://deploy-preview-18916--authentik-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Dec 17, 2025

Deploy Preview for authentik-integrations ready!

Name Link
🔨 Latest commit d4a8703
🔍 Latest deploy log https://app.netlify.com/projects/authentik-integrations/deploys/69b0d9175955210008254b52
😎 Deploy Preview https://deploy-preview-18916--authentik-integrations.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

codecov bot commented Dec 17, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.45%. Comparing base (949d1ea) to head (d4a8703).
⚠️ Report is 183 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@           Coverage Diff           @@
##             main   #18916   +/-   ##
=======================================
  Coverage   93.45%   93.45%           
=======================================
  Files         993      993           
  Lines       55968    55968           
=======================================
+ Hits        52305    52306    +1     
+ Misses       3663     3662    -1     
Flag Coverage Δ
conformance 37.54% <ø> (+<0.01%) ⬆️
e2e 43.05% <ø> (ø)
integration 22.28% <ø> (+<0.01%) ⬆️
unit 91.62% <ø> (+<0.01%) ⬆️
unit-migrate 91.71% <ø> (+<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
Copy link
Contributor

github-actions bot commented Feb 27, 2026

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-d18d1340acdcb628dfd3445420641a6fd7c297fa
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-d18d1340acdcb628dfd3445420641a6fd7c297fa

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

@GirlBossRush GirlBossRush marked this pull request as ready for review March 2, 2026 06:52
@GirlBossRush GirlBossRush requested a review from a team as a code owner March 2, 2026 06:52
@GirlBossRush GirlBossRush added a11y Features or issues related to accessibility area:frontend Features or issues related to the browser, TypeScript, Node.js, etc labels Mar 2, 2026
@GirlBossRush GirlBossRush self-assigned this Mar 2, 2026
@GirlBossRush GirlBossRush force-pushed the a11y-modals branch 3 times, most recently from 7915aeb to d18d134 Compare March 5, 2026 01:54
@GirlBossRush
Copy link
Contributor Author

Closed via #17812

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y Features or issues related to accessibility area:frontend Features or issues related to the browser, TypeScript, Node.js, etc

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant