diff --git a/.changeset/two-moose-cough.md b/.changeset/two-moose-cough.md new file mode 100644 index 0000000000..105733b3f6 --- /dev/null +++ b/.changeset/two-moose-cough.md @@ -0,0 +1,4 @@ +--- +"@patternfly/pfe-core": patch +--- +`InternalsController`: allows accessibility auditing tools to access element internals. diff --git a/core/pfe-core/controllers/internals-controller.ts b/core/pfe-core/controllers/internals-controller.ts index 84b8c7a6c3..153b175a48 100644 --- a/core/pfe-core/controllers/internals-controller.ts +++ b/core/pfe-core/controllers/internals-controller.ts @@ -4,20 +4,22 @@ import { type ReactiveControllerHost, } from 'lit'; -function isARIAMixinProp(key: string): key is keyof ARIAMixin { - return key === 'role' || key.startsWith('aria'); -} - type FACE = HTMLElement & { formDisabledCallback?(disabled: boolean): void; }; +interface InternalsControllerOptions extends Partial { + getHTMLElement?(): HTMLElement; +} + const protos = new WeakMap(); let constructingAllowed = false; -interface InternalsControllerOptions extends Partial { - getHTMLElement?(): HTMLElement; +globalThis._elementInternals ??= new WeakMap(); + +function isARIAMixinProp(key: string): key is keyof ARIAMixin { + return key === 'role' || key.startsWith('aria'); } /** @@ -263,6 +265,8 @@ export class InternalsController implements ReactiveController, ARIAMixin { this.initializeOptions(options); InternalsController.instances.set(host, this); this.#polyfillDisabledPseudo(); + // Expose internals to aXe Core + globalThis._elementInternals.set(this.host, this.internals); } /** @@ -335,6 +339,8 @@ export class InternalsController implements ReactiveController, ARIAMixin { /** @see https://w3c.github.io/aria/#ref-for-dom-ariamixin-ariaactivedescendantelement-1 */ declare global { + // https://github.com/webcomponents-cg/community-protocols/pull/75 + var _elementInternals: WeakMap; // eslint-disable-line no-var interface ARIAMixin { ariaActiveDescendantElement: Element | null; ariaControlsElements: readonly Element[] | null;