web/a11y: Modal revisions, behavior fixes by GirlBossRush · Pull Request #21206 · goauthentik/authentik

web/e2e/fixtures/FormFixture.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -162,6 +162,12 @@ export class FormFixture extends PageFixture { @@
             await expect(group, `Field "${groupName}" should be visible`).toBeVisible();
             const control = parent.getByRole("radio", { name: fieldName });
+            // await control.scrollIntoViewIfNeeded();
+            // await expect(control, `Option "${fieldName}" should be visible`).toBeVisible();
+            // TODO: setChecked seems to be buggy with our custom radio buttons, so we use click for now. Revisit this if we switch to native radios.
+            // await control.click();
+            // await expect(control, `Option "${fieldName}" should be checked`).toBeChecked();
             await control.setChecked(true);
         };
@@ Expand Down @@

web/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -57,6 +57,7 @@ @@
             "#styles/*.css": "./src/styles/*.css",
             "#styles/*": "./src/styles/*.js",
             "#common/*": "./src/common/*.js",
+            "#elements/dialogs": "./src/elements/dialogs/index.js",
             "#elements/*.css": "./src/elements/*.css",
             "#elements/*": "./src/elements/*.js",
             "#components/*.css": "./src/components/*.css",
@@ Expand Down @@

web/playwright.config.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,7 @@ export default defineConfig({ @@
             testIdAttribute: "data-test-id",
             baseURL,
             trace: "on-first-retry",
+            colorScheme: "dark",
             launchOptions: {
                 logger: {
                     isEnabled() {
@@ Expand Down @@

web/src/admin/admin-settings/AdminSettingsFooterLinks.ts

-Original file line number
+Diff line change
@@ Expand Up @@
         @queryAll(".ak-form-control")
         controls?: HTMLInputElement[];
-        json() {
+        @property({ type: String })
+        public name: string | null = null;
+        toJSON(): FooterLink {
             return Object.fromEntries(
                 Array.from(this.controls ?? []).map((control) => [control.name, control.value]),
             ) as unknown as FooterLink;
         }
-        get isValid() {
+        get valid() {
             const href = this.json()?.href ?? "";
             return hasLegalScheme(href) && URL.canParse(href);
         }
@@ Expand Down @@

web/src/admin/admin-settings/AdminSettingsForm.ts

-Original file line number
+Diff line change
@@ Expand Up @@
     import { DEFAULT_CONFIG } from "#common/api/config";
     import { Form } from "#elements/forms/Form";
+    import { SlottedTemplateResult } from "#elements/types";
     import { AdminApi, FooterLink, Settings, SettingsRequest } from "@goauthentik/api";
     import { msg } from "@lit/localize";
-    import { css, CSSResult, html, TemplateResult } from "lit";
+    import { css, CSSResult, html } from "lit";
     import { customElement, property } from "lit/decorators.js";
     import { ifDefined } from "lit/directives/if-defined.js";
@@ Expand Down Expand Up @@
             return result;
         }
-        protected override renderForm(): TemplateResult {
+        public override submitLabel = msg("Save changes");
+        public override renderHeader() {
+            return html`<div class="ak-c-form__header">
+                <h2 class="pf-c-title pf-m-2xl sr-only">${msg("Edit Settings")}</h2>
+                <div part="form-actions">${this.renderSubmitButton()}</div>
+            </div>`;
+        }
+        public override renderActions(): SlottedTemplateResult {
+            return null;
+        }
+        protected override renderForm(): SlottedTemplateResult {
             const { settings } = this;
             return html`
@@ Expand Down @@

web/src/admin/admin-settings/AdminSettingsPage.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -66,19 +66,18 @@ export class AdminSettingsPage extends AKElement {
  
            if (!this.settings) return nothing;

            return html`

                <section class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">

                <main class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">

                    <div class="pf-c-card">

                        <div class="pf-c-card__body">

                            <ak-admin-settings-form

                                id="form"

                                .settings=${this.settings}

                                action-label=${msg("Update settings")}

                                @ak-form-submitted=${{ handleEvent: this.#refresh, passive: true }}

                            >

                            </ak-admin-settings-form>

                        </div>

                    </div>

                </section>

                </main>

            `;

        }

web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,7 @@ const metadata: Meta<FooterLinkInput> = { @@
                             return;
                         }
                         const target = event.target as FooterLinkInput;
-                        messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.isValid ? "Yes" : "No"}`;
+                        messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.valid ? "Yes" : "No"}`;
                     });
                 }, 250);
@@ Expand Down @@

web/src/admin/admin-settings/stories/ak-array-input.stories.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,7 @@ const metadata: Meta<IArrayInput<unknown>> = { @@
                             return;
                         }
                         const target = event.target as FooterLinkInput;
-                        messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.isValid ? "Yes" : "No"}`;
+                        messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.valid ? "Yes" : "No"}`;
                     });
                 }, 250);
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

web/a11y: Modal revisions, behavior fixes #21206

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!