web: Form validation regressions, consistency fixes by GirlBossRush · Pull Request #15894 · goauthentik/authentik

GirlBossRush · 2025-07-30T23:36:03Z

Details

This PR resolves a collection of form validation issues, as well as a partial fix for our WebDriverIO tests to run while Playwright is in review.

Fixed Issues

ErrorProps containing strings are now parsed correctly instead of defaulting to a generic network error
Single-step modal forms perform client-side validation before submitting their data
Wizards now perform client-side validation before progressing to the next step
Form Groups no longer fight for focus when multiple invalid inputs exist.
Form Groups no longer scroll into view when a previously invalid field becomes valid
Invalid inputs within Form Groups now wait for their parent to expand before attempting to focus the element while still hidden
Both server and client-side errors now trigger Form Group expansion.
Inputs with server-side errors are now marked with ARIA attributes to match their status
The inner form element getter within AKForm now uses renderRoot over shadowRoot, fixing selector issues when in compatibility mode.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.76%. Comparing base (e154fee) to head (31db063).
⚠️ Report is 8 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15894      +/-   ##
==========================================
- Coverage   92.83%   92.76%   -0.07%     
==========================================
  Files         836      836              
  Lines       45160    45166       +6     
==========================================
- Hits        41924    41900      -24     
- Misses       3236     3266      +30

Flag	Coverage Δ
e2e	`46.60% <ø> (-0.09%)`	⬇️
integration	`23.59% <ø> (+0.01%)`	⬆️
unit	`90.91% <ø> (+<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-07-30T23:57:47Z

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-31db063e479c1c0ed00fef1f8d9dd22dc8808117
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-31db063e479c1c0ed00fef1f8d9dd22dc8808117

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

GirlBossRush · 2025-08-12T00:51:37Z

web/package.json

-        "@web/test-runner": "^0.20.2"
+        "@web/test-runner": "^0.20.2",
+        "chromedriver": "^139.0.0"


WebDriver is still plagued with download issues, but this inclusion will let the legacy e2e test suite run when Chromium is manually installed.

GirlBossRush · 2025-08-12T00:52:29Z

web/src/admin/applications/wizard/ApplicationWizardStep.ts

+    }
+
+    /**
+     * @todo This defaults to true when the form is not yet available


TOOD: Circle back on this after #16010 gives us a reusable pattern with form internals

GirlBossRush · 2025-08-12T00:54:00Z

web/src/admin/applications/wizard/ApplicationWizardStep.ts

+        if (!this.form) {
+            throw new TypeError("Form reference is not set");
+        }


Unlikely but this has been technically possible with all uses of @query

GirlBossRush · 2025-08-12T00:54:48Z

web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts

+    public get form(): HTMLFormElement | null {
+        return this.renderRoot.querySelector("form#applicationform");
+    }


Switch to getter to allow for overriding in application provider steps

GirlBossRush · 2025-08-12T00:56:05Z

web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts

        }

-        if (!values.metaLaunchUrl || !URL.canParse(values.metaLaunchUrl)) {
+        if (values.metaLaunchUrl && !URL.canParse(values.metaLaunchUrl)) {


TODO: This was subtle fix. Circle back on something like an <ak-url-input> to handle this sort of check.

GirlBossRush · 2025-08-12T00:57:09Z

web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts

+        const providerForm = this.element.form;
+
+        if (!providerForm) {
+            // TODO: This needs to be removed once all steps can report their validity.


AFAICT this is only true of the bindings step which has no form. Leaving it in for now to reduce the number of changes.

GirlBossRush · 2025-08-12T00:58:43Z

web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts

 import { property, query } from "lit/decorators.js";

-export class ApplicationWizardProviderForm<T extends OneOfProvider> extends AKElement {
+export abstract class ApplicationWizardProviderForm<T extends OneOfProvider> extends AKElement {


ApplicationWizardStep should also be abstract, but our typing on CustomEmitterElement makes this difficult to achieve without a lot of detangling.

GirlBossRush · 2025-08-12T01:02:42Z

web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts

                ${renderForm(
                    provider ?? {},
-                    errors,
+                    errors.provider ?? {},


AFAICT not showing field errors in the provider step seems to be a long standing bug we managed to surface when error parsing was introduced.

I suspect that ak-application-wizard-submit-step also has an expectation of field error name spacing that doesn't apply anymore.

GirlBossRush · 2025-08-12T01:03:56Z

web/src/common/styles/authentik.css

+.pf-c-form__group {
+    --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: minmax(max-content, 9.375rem);
+    column-gap: var(--pf-global--spacer--md);
+}
+
+.pf-c-form__group-label {
+    display: flex;
+    user-select: none;
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+
+    /* Increase the pressable area of the label. */
+    .pf-c-form__label {
+        display: block;
+        flex: 1 1 auto;
+    }
+}
+
+.pf-c-form__label[aria-required] .pf-c-form__label-text::after {
+    content: "*";
+    user-select: none;
+    margin-left: var(--pf-c-form__label-required--MarginLeft);
+    font-size: var(--pf-c-form__label-required--FontSize);
+    color: var(--pf-c-form__label-required--Color);
+}
+


Largely moved out of horizontal form for better consistency in inputs across all interfaces.

GirlBossRush · 2025-08-12T01:04:57Z

web/src/components/ak-label.ts

+    required?: boolean;
+}
+
+export const AKLabel: LitFC<FormLabelProps> = (


See #16119 for how this works with label input association.

…tion.

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

… editing existing entities. - We need to make the component have a better understanding of this concept.

GirlBossRush requested a review from a team as a code owner July 30, 2025 23:36

GirlBossRush requested a review from kensternberg-authentik July 30, 2025 23:36

GirlBossRush assigned kensternberg-authentik Jul 30, 2025

GirlBossRush mentioned this pull request Jul 30, 2025

web: Playwright E2E #15879

Closed

6 tasks

GirlBossRush force-pushed the a11y-functional-label-components branch 4 times, most recently from 9f9e667 to 27a772a Compare August 3, 2025 17:33

GirlBossRush mentioned this pull request Aug 3, 2025

web/a11y: Flow Search #15876

Merged

6 tasks

GirlBossRush changed the base branch from main to a11y-form-errors August 3, 2025 17:49

GirlBossRush force-pushed the a11y-functional-label-components branch from 6cd91f9 to fa9e7fc Compare August 3, 2025 18:09

GirlBossRush force-pushed the a11y-form-errors branch from a5958a8 to 89b9496 Compare August 4, 2025 09:56

GirlBossRush force-pushed the a11y-functional-label-components branch from fa9e7fc to bb636e7 Compare August 4, 2025 09:56

GirlBossRush force-pushed the a11y-form-errors branch from 89b9496 to 989c152 Compare August 4, 2025 16:04

GirlBossRush force-pushed the a11y-functional-label-components branch 2 times, most recently from 921644b to 9ca6463 Compare August 4, 2025 19:19

GirlBossRush requested a review from a team as a code owner August 4, 2025 19:19

GirlBossRush force-pushed the a11y-form-errors branch from 989c152 to d2994a6 Compare August 4, 2025 19:20

GirlBossRush changed the base branch from a11y-form-errors to main August 4, 2025 19:21

GirlBossRush removed the request for review from a team August 4, 2025 19:21

GirlBossRush force-pushed the a11y-functional-label-components branch 4 times, most recently from 50deedb to 7ab6db0 Compare August 6, 2025 17:13

GirlBossRush mentioned this pull request Aug 6, 2025

web/a11y: Brand form #16011

Merged

GirlBossRush added the a11y Features or issues related to accessibility label Aug 12, 2025

GirlBossRush changed the title ~~web/a11y: Labels, Functional components.~~ web/a11y: Form validation Aug 12, 2025

GirlBossRush changed the title ~~web/a11y: Form validation~~ web: Fix form validation regressions, expand coverage of validation Aug 12, 2025

GirlBossRush changed the title ~~web: Fix form validation regressions, expand coverage of validation~~ web: Form validation regressions, consistency fixes Aug 12, 2025

GirlBossRush commented Aug 12, 2025

View reviewed changes

GirlBossRush added 4 commits August 12, 2025 03:09

web: Fix issue where wizard steps do not consistently use form valida…

99af847

…tion.

web: Fix issue where render root is not preferred.

928bd45

web: Fix import path.

4787ee9

web: Fix selectors.

144d377

GirlBossRush force-pushed the a11y-functional-label-components branch from 37a52d6 to 144d377 Compare August 12, 2025 01:09

keep labels aligned

0878d6b

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

GirlBossRush enabled auto-merge (squash) August 12, 2025 13:04

GirlBossRush disabled auto-merge August 12, 2025 13:06

web: Fix field nesting.

49ba493

GirlBossRush force-pushed the a11y-functional-label-components branch from 1acb244 to 9a37950 Compare August 12, 2025 13:27

web: Fix issue where required secret text inputs fail validation when…

d01b0b9

… editing existing entities. - We need to make the component have a better understanding of this concept.

GirlBossRush force-pushed the a11y-functional-label-components branch from 9a37950 to d01b0b9 Compare August 12, 2025 13:48

web: Fix slot alignment on legacy elements.

31db063

GirlBossRush enabled auto-merge (squash) August 12, 2025 14:00

GirlBossRush merged commit 1bc2daa into main Aug 12, 2025
107 checks passed

GirlBossRush deleted the a11y-functional-label-components branch August 12, 2025 14:34

Uh oh!

Conversation

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

Uh oh!

Details

Fixed Issues

See also

Uh oh!

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

Uh oh!

✅ Deploy Preview for authentik-docs canceled.

Uh oh!

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

Uh oh!

✅ Deploy Preview for authentik-integrations canceled.

Uh oh!

netlify bot commented Jul 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 Jul 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 Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

GirlBossRush commented Jul 30, 2025 •

edited

Loading

netlify bot commented Jul 30, 2025 •

edited

Loading

netlify bot commented Jul 30, 2025 •

edited

Loading

netlify bot commented Jul 30, 2025 •

edited

Loading

codecov bot commented Jul 30, 2025 •

edited

Loading

github-actions bot commented Jul 30, 2025 •

edited

Loading

GirlBossRush Aug 12, 2025 •

edited

Loading

GirlBossRush Aug 12, 2025 •

edited

Loading