From a564a73ebb38c6bb9c46e467d4bee0a5406b05c1 Mon Sep 17 00:00:00 2001 From: Teffen Ellis Date: Tue, 7 Oct 2025 05:02:43 +0200 Subject: [PATCH 1/3] web/a11y: Prefers more field contrast --- web/src/common/styles/authentik.css | 51 ++++++++++++++++++- web/src/common/styles/theme-dark.css | 10 +--- web/src/components/ak-search-ql/index.ts | 10 ++-- web/src/elements/forms/FormGroup.ts | 16 ++++++ .../SearchSelect/ak-search-select-view.ts | 14 ++++- 5 files changed, 85 insertions(+), 16 deletions(-) diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css index 9686f3d486da..37345c32453e 100644 --- a/web/src/common/styles/authentik.css +++ b/web/src/common/styles/authentik.css @@ -201,8 +201,28 @@ html > form > input { /* #region Form controls */ .pf-c-form-control { - --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--200); - --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--BackgroundColor--200); + /* !important is required to ensure priority when in compatibility mode. */ + + --pf-c-form-control--readonly--BackgroundColor: var( + --pf-global--BackgroundColor--200 + ) !important; + --pf-c-form-control--disabled--BackgroundColor: var( + --pf-global--BackgroundColor--200 + ) !important; + + --pf-c-form-control--BorderTopColor: transparent !important; + --pf-c-form-control--BorderRightColor: transparent !important; + --pf-c-form-control--BorderLeftColor: transparent !important; + + --pf-c-form-control--Color: FieldText !important; + --pf-c-form-control--BackgroundColor: transparent !important; + + @media (prefers-contrast: more) { + --pf-c-text-input-group--placeholder--Color: GrayText !important; + --pf-c-form-control--placeholder--Color: GrayText !important; + + --pf-c-form-control--BackgroundColor: Field !important; + } /* #region Caps Lock */ @@ -217,6 +237,33 @@ html > form > input { /* #endregion */ } +input.pf-c-form-control { + &[type="text"], + &[type="email"], + &[type="password"], + &[type="search"], + textarea { + @media not (prefers-contrast: more) { + border-inline: 0; + border-block-start-color: transparent; + } + + @media (prefers-contrast: more) { + border: 1px solid ButtonBorder !important; + + &:focus { + border: 1px solid Highlight !important; + } + } + } +} + +@media (prefers-contrast: less) { + input { + outline: none !important; + } +} + /* #region Buttons */ .pf-c-button { diff --git a/web/src/common/styles/theme-dark.css b/web/src/common/styles/theme-dark.css index ce8fadaa9f2b..6db9cb6a7dc1 100644 --- a/web/src/common/styles/theme-dark.css +++ b/web/src/common/styles/theme-dark.css @@ -206,13 +206,7 @@ select.pf-c-form-control { .pf-c-form-control { /* !important is required to ensure priority when in compatibility mode. */ - - --pf-c-form-control--BorderTopColor: transparent !important; - --pf-c-form-control--BorderRightColor: transparent !important; - --pf-c-form-control--BorderLeftColor: transparent !important; - --pf-global--BackgroundColor--100: var(--ak-dark-background-light) !important; - --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light) !important; - --pf-c-form-control--Color: var(--ak-dark-foreground) !important; + /* --pf-global--BackgroundColor--100: var(--ak-dark-background-light) !important; */ --pf-c-form-control--readonly--BackgroundColor: var(--ak-dark-background-light) !important; --pf-c-form-control--disabled--BackgroundColor: var(--ak-dark-background-light) !important; @@ -236,7 +230,7 @@ select.pf-c-form-control { } .pf-c-select__toggle.pf-m-typeahead { - --pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light); + --pf-c-select__toggle--BackgroundColor: Field; } .pf-c-select__menu { diff --git a/web/src/components/ak-search-ql/index.ts b/web/src/components/ak-search-ql/index.ts index 268cd50ba03f..f2819b27d005 100644 --- a/web/src/components/ak-search-ql/index.ts +++ b/web/src/components/ak-search-ql/index.ts @@ -66,6 +66,12 @@ export class QLSearch extends FormAssociatedElement implements FormAssoc outline: none; } + @media not (prefers-contrast: more) { + .pf-c-search-input__text::before { + border: none; + } + } + .pf-c-search-input[aria-expanded="true"] { .ql.pf-c-form-control { --pf-c-form-control--BorderBottomColor: var( @@ -111,10 +117,6 @@ export class QLSearch extends FormAssociatedElement implements FormAssoc --ak-dark-background-light ); } - - .pf-c-search-input__text::before { - border: 0; - } } .pf-c-search-input__menu { diff --git a/web/src/elements/forms/FormGroup.ts b/web/src/elements/forms/FormGroup.ts index 9d2ac2d58f33..9c248b18bdcc 100644 --- a/web/src/elements/forms/FormGroup.ts +++ b/web/src/elements/forms/FormGroup.ts @@ -30,6 +30,12 @@ export class AKFormGroup extends AKElement { :host([theme="dark"]) { --marker-color: var(--pf-global--Color--200); --marker-color-hover: var(--ak-dark-foreground-darker); + + details { + @media (prefers-contrast: more) { + background: var(--ak-dark-background-light); + } + } } .pf-c-form__field-group-header-description { @@ -37,10 +43,17 @@ export class AKFormGroup extends AKElement { } details { + @media (prefers-contrast: more) { + border: 1px solid var(--pf-global--BorderColor--200); + background: var(--pf-global--BackgroundColor--150); + } + &::details-content { padding-inline-start: var( --pf-c-form__field-group--GridTemplateColumns--toggle ); + padding-inline-end: var(--pf-global--spacer--md); + padding-block-end: var(--pf-global--spacer--md); } & > summary { @@ -52,6 +65,9 @@ export class AKFormGroup extends AKElement { cursor: pointer; user-select: none; + font-weight: bold; + text-decoration: underline; + &::marker { color: var(--marker-color, var(--pf-global--Color--200)); transition: var(--pf-c-form__field-group-toggle-icon--Transition); diff --git a/web/src/elements/forms/SearchSelect/ak-search-select-view.ts b/web/src/elements/forms/SearchSelect/ak-search-select-view.ts index 627d98a4a9fe..ef6b8ac479cf 100644 --- a/web/src/elements/forms/SearchSelect/ak-search-select-view.ts +++ b/web/src/elements/forms/SearchSelect/ak-search-select-view.ts @@ -9,7 +9,7 @@ import type { GroupedOptions, SelectOption, SelectOptions } from "#elements/type import { randomId } from "#elements/utils/randomId"; import { msg } from "@lit/localize"; -import { CSSResult, html, nothing, PropertyValues } from "lit"; +import { css, CSSResult, html, nothing, PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { createRef, ref, Ref } from "lit/directives/ref.js"; @@ -69,7 +69,17 @@ export interface ISearchSelectView { */ @customElement("ak-search-select-view") export class SearchSelectView extends AKElement implements ISearchSelectView { - static styles: CSSResult[] = [PFBase, PFForm, PFFormControl, PFSelect]; + static styles: CSSResult[] = [ + PFBase, + PFForm, + PFFormControl, + PFSelect, + css` + .pf-c-select { + --pf-c-select__toggle-wrapper--MaxWidth: unset; + } + `, + ]; //#region Properties From 0825a3a3ab83f2b30715d525b6a95372cb92b7d9 Mon Sep 17 00:00:00 2001 From: Teffen Ellis Date: Tue, 7 Oct 2025 17:56:24 +0200 Subject: [PATCH 2/3] web: Fix issue where Lit Analyzer cannot parse newer CSS. --- .../admin/AdminInterface/index.entrypoint.ts | 6 ++++-- web/src/components/ak-search-ql/index.ts | 14 ++++++++------ web/src/elements/ak-mdx/ak-mdx.tsx | 8 +++++--- web/src/elements/forms/FormGroup.ts | 11 ++++++----- web/src/elements/forms/Radio.ts | 4 +++- web/src/elements/table/Table.ts | 19 ++++++++++++------- 6 files changed, 38 insertions(+), 24 deletions(-) diff --git a/web/src/admin/AdminInterface/index.entrypoint.ts b/web/src/admin/AdminInterface/index.entrypoint.ts index 61be43a56fcb..95c27da7ef25 100644 --- a/web/src/admin/AdminInterface/index.entrypoint.ts +++ b/web/src/admin/AdminInterface/index.entrypoint.ts @@ -83,11 +83,13 @@ export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterfac PFButton, PFDrawer, PFNav, - css` + // HACK: Fixes Lit Analyzer's outdated parser. + (css as typeof css) /*css*/ ` .pf-c-page__main { scrollbar-gutter: stable; } - + `, + css` .pf-c-page__main, .pf-c-drawer__content, .pf-c-page__drawer { diff --git a/web/src/components/ak-search-ql/index.ts b/web/src/components/ak-search-ql/index.ts index f2819b27d005..f490d69b2d1e 100644 --- a/web/src/components/ak-search-ql/index.ts +++ b/web/src/components/ak-search-ql/index.ts @@ -66,12 +66,6 @@ export class QLSearch extends FormAssociatedElement implements FormAssoc outline: none; } - @media not (prefers-contrast: more) { - .pf-c-search-input__text::before { - border: none; - } - } - .pf-c-search-input[aria-expanded="true"] { .ql.pf-c-form-control { --pf-c-form-control--BorderBottomColor: var( @@ -126,6 +120,14 @@ export class QLSearch extends FormAssociatedElement implements FormAssoc max-height: 50vh; } `, + // HACK: Fixes Lit Analyzer's outdated parser. + (css as typeof css) /*css*/ ` + @media not (prefers-contrast: more) { + .pf-c-search-input__text::before { + border: none; + } + } + `, ]; //#region Properties diff --git a/web/src/elements/ak-mdx/ak-mdx.tsx b/web/src/elements/ak-mdx/ak-mdx.tsx index df8c1906d59b..afe91d0355df 100644 --- a/web/src/elements/ak-mdx/ak-mdx.tsx +++ b/web/src/elements/ak-mdx/ak-mdx.tsx @@ -57,13 +57,15 @@ export type Replacer = (input: string) => string; @customElement("ak-mdx") export class AKMDX extends AKElement { - @property({ type: String, reflect: true }) + // HACK: Fixes Lit Analyzer's parsing of TSX files with decorators. + + @((property as typeof property)({ type: String, reflect: true })) public url?: string; - @property() + @((property as typeof property)()) public content?: string; - @property({ attribute: false }) + @((property as typeof property)({ attribute: false })) public replacers: Replacer[] = []; #reactRoot: Root | null = null; diff --git a/web/src/elements/forms/FormGroup.ts b/web/src/elements/forms/FormGroup.ts index 9c248b18bdcc..093b7317e38a 100644 --- a/web/src/elements/forms/FormGroup.ts +++ b/web/src/elements/forms/FormGroup.ts @@ -25,7 +25,6 @@ export class AKFormGroup extends AKElement { PFForm, PFButton, PFFormControl, - css` :host([theme="dark"]) { --marker-color: var(--pf-global--Color--200); @@ -38,10 +37,6 @@ export class AKFormGroup extends AKElement { } } - .pf-c-form__field-group-header-description { - text-wrap: balance; - } - details { @media (prefers-contrast: more) { border: 1px solid var(--pf-global--BorderColor--200); @@ -86,6 +81,12 @@ export class AKFormGroup extends AKElement { } } `, + // HACK: Fixes Lit Analyzer's outdated parser. + (css as typeof css) /*css*/ ` + .pf-c-form__field-group-header-description { + text-wrap: balance; + } + `, ]; //region Properties diff --git a/web/src/elements/forms/Radio.ts b/web/src/elements/forms/Radio.ts index d1f2a8f325d9..4262bc82ccaf 100644 --- a/web/src/elements/forms/Radio.ts +++ b/web/src/elements/forms/Radio.ts @@ -56,7 +56,9 @@ export class Radio extends CustomEmitterElement(AKElement) { color: var(--pf-global--disabled-color--100); } } - + `, + // HACK: Fixes Lit Analyzer's outdated parser. + (css as typeof css) /*css*/ ` .pf-c-radio__description { text-wrap: balance; } diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index 0cefaef2153f..f788247d4126 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -80,10 +80,6 @@ export abstract class Table PFDropdown, PFPagination, css` - :host { - container-type: inline-size; - } - [part="table-container"] { @media (max-width: 1199px) { overflow-x: auto; @@ -94,9 +90,6 @@ export abstract class Table .presentational { --pf-c-table--cell--MinWidth: 0; } - @container (width > 1200px) { - --pf-c-table--cell--MinWidth: 9em; - } } /** @@ -220,6 +213,18 @@ export abstract class Table z-index: var(--pf-global--ZIndex--lg); } `, + // HACK: Fixes Lit Analyzer's outdated parser. + (css as typeof css) /*css*/ ` + :host { + container-type: inline-size; + } + + .pf-c-table { + @container (width > 1200px) { + --pf-c-table--cell--MinWidth: 9em; + } + } + `, ]; protected abstract apiEndpoint(): Promise>; From 819b35eb25b74ff91a72d7a84233263959246326 Mon Sep 17 00:00:00 2001 From: Teffen Ellis Date: Tue, 7 Oct 2025 21:43:48 +0200 Subject: [PATCH 3/3] web: Remove commented out code. --- web/src/common/styles/theme-dark.css | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/common/styles/theme-dark.css b/web/src/common/styles/theme-dark.css index 6db9cb6a7dc1..97a3420a19ae 100644 --- a/web/src/common/styles/theme-dark.css +++ b/web/src/common/styles/theme-dark.css @@ -206,7 +206,6 @@ select.pf-c-form-control { .pf-c-form-control { /* !important is required to ensure priority when in compatibility mode. */ - /* --pf-global--BackgroundColor--100: var(--ak-dark-background-light) !important; */ --pf-c-form-control--readonly--BackgroundColor: var(--ak-dark-background-light) !important; --pf-c-form-control--disabled--BackgroundColor: var(--ak-dark-background-light) !important;