web: Fix user library colors, modal z-indexes, table progress bars

web/src/admin/AdminInterface/index.entrypoint.css

@@ -14,13 +14,6 @@
     }
 }
 
-.pf-c-page__main,
-.pf-c-drawer__content,
-.pf-c-page__drawer {
-    z-index: auto !important;
-    background-color: transparent;
-}
-
 .display-none {
     display: none;
 }

web/src/admin/endpoints/DeviceAccessGroupsListPage.ts

@@ -40,17 +40,20 @@ export class DeviceAccessGroupsListPage extends TablePage<DeviceAccessGroup> {
     row(item: DeviceAccessGroup): SlottedTemplateResult[] {
         return [
             html`${item.name}`,
-            html`<ak-forms-modal>
-                <span slot="submit">${msg("Update")}</span>
-                <span slot="header">${msg("Update Group")}</span>
-                <ak-endpoints-device-access-groups-form slot="form" .instancePk=${item.pbmUuid}>
-                </ak-endpoints-device-access-groups-form>
-                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
-            </ak-forms-modal>`,
+            html`<div>
+                <ak-forms-modal>
+                    <span slot="submit">${msg("Update")}</span>
+                    <span slot="header">${msg("Update Group")}</span>
+                    <ak-endpoints-device-access-groups-form slot="form" .instancePk=${item.pbmUuid}>
+                    </ak-endpoints-device-access-groups-form>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit" aria-hidden="true"></i>
+                        </pf-tooltip>
+                    </button>
+                </ak-forms-modal>
+                <div></div>
+            </div>`,
         ];
     }
 

web/src/admin/endpoints/connectors/ConnectorsListPage.ts

@@ -44,23 +44,25 @@ export class ConnectorsListPage extends TablePage<Connector> {
         return [
             html`<a href="#/endpoints/connectors/${item.connectorUuid}">${item.name}</a>`,
             html`${item.verboseName}`,
-            html`<ak-forms-modal>
-                <span slot="submit">${msg("Update")}</span>
-                <span slot="header">${msg("Update Connector")}</span>
-                <ak-proxy-form
-                    slot="form"
-                    .args=${{
-                        instancePk: item.connectorUuid,
-                    }}
-                    type=${ifDefined(item.component)}
-                >
-                </ak-proxy-form>
-                <button slot="trigger" class="pf-c-button pf-m-plain">
-                    <pf-tooltip position="top" content=${msg("Edit")}>
-                        <i class="fas fa-edit" aria-hidden="true"></i>
-                    </pf-tooltip>
-                </button>
-            </ak-forms-modal>`,
+            html`<div>
+                <ak-forms-modal>
+                    <span slot="submit">${msg("Update")}</span>
+                    <span slot="header">${msg("Update Connector")}</span>
+                    <ak-proxy-form
+                        slot="form"
+                        .args=${{
+                            instancePk: item.connectorUuid,
+                        }}
+                        type=${ifDefined(item.component)}
+                    >
+                    </ak-proxy-form>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit" aria-hidden="true"></i>
+                        </pf-tooltip>
+                    </button>
+                </ak-forms-modal>
+            </div>`,
         ];
     }
 

web/src/admin/flows/FlowListPage.ts

@@ -85,7 +85,8 @@ export class FlowListPage extends TablePage<Flow> {
             html`${item.name}`,
             html`${Array.from(item.stages || []).length}`,
             html`${Array.from(item.policies || []).length}`,
-            html` <ak-forms-modal>
+            html`<div>
+                <ak-forms-modal>
                     <span slot="submit">${msg("Update")}</span>
                     <span slot="header">${msg("Update Flow")}</span>
                     <ak-flow-form slot="form" .instancePk=${item.slug}> </ak-flow-form>
@@ -121,7 +122,8 @@ export class FlowListPage extends TablePage<Flow> {
                     <pf-tooltip position="top" content=${msg("Export")}>
                         <i class="fas fa-download" aria-hidden="true"></i>
                     </pf-tooltip>
-                </a>`,
+                </a>
+            </div>`,
         ];
     }
 

web/src/elements/ak-progress-bar.ts

@@ -1,11 +1,11 @@
 import { PFSize } from "#common/enums";
 
 import { AKElement } from "#elements/Base";
-
-import { spread } from "@open-wc/lit-helpers";
+import { ifPresent } from "#elements/utils/attributes";
 
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 import PFProgress from "@patternfly/patternfly/components/Progress/progress.css";
 
@@ -21,19 +21,35 @@ export class ProgressBar extends AKElement {
             .pf-c-progress {
                 overflow: hidden;
             }
+
             .pf-c-progress.pf-m-indeterminate {
                 --pf-c-progress__bar--Height: 2px;
                 --pf-c-progress--GridGap: 0;
                 margin-bottom: calc(var(--pf-c-progress__bar--Height) * -1);
                 z-index: 1;
                 position: relative;
             }
-            .pf-c-progress.pf-m-indeterminate .pf-c-progress__bar .pf-c-progress__indicator {
-                width: 100%;
-                height: 100%;
-                animation: indeterminateAnimation 1s infinite linear;
-                transform-origin: 0% 50%;
+
+            .pf-c-progress.pf-m-indeterminate {
+                transition: opacity 0.2s linear;
+                transition-delay: 0.2s;
+
+                .pf-c-progress__bar .pf-c-progress__indicator {
+                    width: 100%;
+                    height: 100%;
+                    animation: indeterminateAnimation 1s infinite linear;
+                    transform-origin: 0% 50%;
+                }
+            }
+
+            :host([inert]) .pf-c-progress.pf-m-indeterminate {
+                opacity: 0;
+
+                .pf-c-progress__bar .pf-c-progress__indicator {
+                    animation-iteration-count: 1;
+                }
             }
+
             @keyframes indeterminateAnimation {
                 0% {
                     transform: translateX(0) scaleX(0);
@@ -49,31 +65,28 @@ export class ProgressBar extends AKElement {
     ];
 
     @property({ type: Number })
-    min = 0;
+    public min = 0;
+
     @property({ type: Number })
-    max = 100;
+    public max = 100;
+
     @property({ type: Number })
-    value = 0;
+    public value = 0;
 
     @property({ type: Boolean })
-    indeterminate = false;
-
-    @property()
-    size: PFSize = PFSize.Medium;
-
-    render() {
-        const barAttrs: { [key: string]: unknown } = {};
-        const indicatorAttrs: { [key: string]: unknown } = {};
-        if (!this.indeterminate) {
-            barAttrs["aria-valuemin"] = this.min;
-            barAttrs["aria-valuemax"] = this.max;
-            barAttrs["aria-valuenow"] = this.value;
-            indicatorAttrs.style = `"width:${Math.min(this.value, 100)}%;";`;
-        }
+    public indeterminate = false;
+
+    @property({ type: String })
+    public size: PFSize = PFSize.Medium;
+
+    @property({ type: String })
+    public label = "";
+
+    protected render() {
         return html`<div
             class="pf-c-progress ${this.classList} ${this.indeterminate
                 ? "pf-m-indeterminate"
-                : ""} ${this.size.toString()}"
+                : ""} ${this.size}"
         >
             ${this.hasSlotted("description")
                 ? html`
@@ -91,8 +104,21 @@ export class ProgressBar extends AKElement {
                       </div>
                   `
                 : nothing}
-            <div class="pf-c-progress__bar" role="progressbar" ${spread(barAttrs)}>
-                <div class="pf-c-progress__indicator" ${spread(indicatorAttrs)}></div>
+            <div
+                class="pf-c-progress__bar"
+                role="progressbar"
+                aria-valuemin=${this.min}
+                aria-valuemax=${this.max}
+                aria-valuenow=${ifPresent(this.indeterminate, this.value)}
+                aria-label=${ifPresent(this.label)}
+                aria-describedby=${this.hasSlotted("description") ? "description" : nothing}
+            >
+                <div
+                    class="pf-c-progress__indicator"
+                    style=${styleMap({
+                        width: this.indeterminate ? "100%" : `${Math.min(this.value, 100)}%`,
+                    })}
+                ></div>
             </div>
         </div> `;
     }

web/src/elements/table/Table.ts

@@ -868,8 +868,18 @@ export abstract class Table<T extends object>
     }
 
     protected renderLoadingBar() {
-        if (!this.loading) return nothing;
-        return html`<ak-progress-bar indeterminate></ak-progress-bar>`;
+        return guard(
+            [this.loading, this.label],
+            () =>
+                html`<ak-progress-bar
+                    indeterminate
+                    ?inert=${!this.loading}
+                    label=${msg(str`Loading ${this.label ?? "table"} data`, {
+                        id: "table-loading-bar-label",
+                        desc: "Label for progress bar shown when table data is loading",
+                    })}
+                ></ak-progress-bar>`,
+        );
     }
 
     protected renderTable(): TemplateResult {
@@ -889,6 +899,8 @@ export abstract class Table<T extends object>
             ${this.renderToolbarContainer()}
             <div part="table-container">
                 <table
+                    aria-live="polite"
+                    aria-busy=${this.loading.toString()}
                     aria-label=${this.label ? msg(str`${this.label} table`) : msg("Table content")}
                     aria-rowcount=${totalItemCount}
                     class="pf-c-table pf-m-compact pf-m-grid-md pf-m-expandable"

web/src/elements/utils/pointer.ts

@@ -1,5 +1,5 @@
 const InteractiveElementsQuery =
-    "[href],input,button,[role='button'],select,[tabindex]:not([tabindex='-1'])";
+    "[href],input,button,i,[role='button'],select,[tabindex]:not([tabindex='-1'])";
 
 /**
  * Whether a pointer event is targeting the element itself or one of its children.

web/src/styles/authentik/components/Page/page.css

@@ -2,6 +2,8 @@
  * Extensions of PF4's sidebar color to better match our existing dark theme.
  */
 .pf-c-page {
+    --pf-c-page__header--ZIndex: auto;
+    --pf-c-page__main--ZIndex: auto;
     --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--200);
     --pf-c-page__sidebar--m-dark--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
@@ -53,7 +55,7 @@ ak-tabs::part(row) {
         --pf-global--BackgroundColor--300
     );
     --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-dark--BackgroundColor);
-    --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
+    --pf-c-page__header--BackgroundColor: transparent;
 
     /**
      * cf. Color reversal.

web/src/user/LibraryPage/ak-library-impl.css

@@ -5,7 +5,7 @@
 
 .pf-c-page {
     --pf-c-page--BackgroundColor: transparent;
-    --pf-c-page__main-section--BackgroundColor: transparent;
+    --pf-c-page__main-section--BackgroundColor: transparent !important;
 }
 
 .pf-c-page__header {
@@ -45,7 +45,6 @@
 }
 
 .pf-c-page__main-section {
-    background-color: transparent;
     padding-inline: 0;
 }
 

web/src/user/LibraryPage/ak-library.ts

@@ -107,7 +107,10 @@ export class LibraryPage extends AKElement {
             </ak-empty-state>`;
         }
 
-        return html`<ak-library-impl .apps=${this.apps}></ak-library-impl>`;
+        return html`<ak-library-impl
+            exportparts="search-input, app-list, app-group, app-group-header, app-group-separator, card-wrapper, card, card-header-icon"
+            .apps=${this.apps}
+        ></ak-library-impl>`;
     }
 }
 

web/src/user/index.entrypoint.css

@@ -1,19 +1,12 @@
-.pf-c-drawer__panel {
-    z-index: var(--pf-global--ZIndex--md);
-}
-
-.pf-c-page__main,
-.pf-c-drawer__content,
-.pf-c-page__drawer {
-    z-index: auto !important;
-    background-color: transparent !important;
+.pf-c-page {
+    --pf-c-page__header--BackgroundColor: transparent;
+    --pf-c-page--BackgroundColor: transparent !important;
+    --pf-c-page__main-section--BackgroundColor: transparent !important;
+    --ak-user-interface--slant-m-light: var(--pf-global--BackgroundColor--100);
+    --ak-user-interface--slant-m-dark: var(--pf-global--BackgroundColor--200);
 }
 
 .pf-c-page__header {
-    background-color: transparent !important;
-    box-shadow: none !important;
-    color: black !important;
-
     .pf-c-button {
         --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
         --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
@@ -22,12 +15,6 @@
     }
 }
 
-.pf-c-page {
-    background-color: transparent !important;
-    --ak-user-interface--slant-m-light: var(--pf-global--BackgroundColor--100);
-    --ak-user-interface--slant-m-dark: var(--pf-global--BackgroundColor--200);
-}
-
 .display-none {
     display: none;
 }
@@ -46,7 +33,7 @@
     color: #2b9af3;
 }
 
-.background-wrapper {
+[part="background-wrapper"] {
     height: 100dvh;
     width: 100%;
     position: fixed;
@@ -56,7 +43,7 @@
     background-color: var(--ak-user-interface--slant-m-dark);
 }
 
-.background-default-slant {
+[part="background-default-slant"] {
     background-color: var(--ak-user-interface--slant-m-light);
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
     height: 50dvh;
@@ -67,6 +54,12 @@
     --ak-user-interface--slant-m-dark: var(--pf-global--BackgroundColor--100);
 }
 
+.pf-c-drawer {
+    /* TODO: Revisit this after native <dialog> modals are implemented. */
+    --pf-c-drawer__panel--ZIndex: auto;
+    --pf-c-drawer__content--ZIndex: auto;
+}
+
 .pf-c-drawer__main {
     min-height: calc(100vh - 76px);
     max-height: calc(100vh - 76px);