fix(switch): implement internals controller

.changeset/violet-wombats-tell.md

@@ -0,0 +1,17 @@
+---
+"@patternfly/elements": major
+---
+
+`<pf-switch>`: Reimplemented label API improving accessibility.
+
+```html
+<!-- BEFORE: -->
+<pf-switch id="checked" checked show-check-icon></pf-switch>
+<label for="checked" data-state="on">Message when on</label>
+<label for="checked" data-state="off">Message when off</label>
+<!-- AFTER: -->
+<pf-switch id="checked" checked show-check-icon></pf-switch>
+<label for="checked">
+  <span data-state="on">Message when on</span>
+  <span data-state="off" hidden>Message when off</span>
+</label>

elements/pf-switch/BaseSwitch.css

@@ -19,7 +19,7 @@ svg {
   cursor: not-allowed;
 }
 
-:host(:disabled:focus-within) #container {
+:host(:disabled:is(:focus,:focus-within)) {
   outline: none;
 }
 

elements/pf-switch/BaseSwitch.ts

@@ -1,61 +1,65 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
-import styles from './BaseSwitch.css';
 
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
+import styles from './BaseSwitch.css';
 /**
  * Switch
  */
 export abstract class BaseSwitch extends LitElement {
   static readonly styles = [styles];
 
-  static readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, };
-
   static readonly formAssociated = true;
 
   declare shadowRoot: ShadowRoot;
 
-  #internals = this.attachInternals();
-
-  #initiallyDisabled = this.hasAttribute('disabled');
+  #internals = InternalsController.of(this, { role: 'switch' });
 
   @property({ reflect: true }) label?: string;
 
   @property({ reflect: true, type: Boolean, attribute: 'show-check-icon' }) showCheckIcon = false;
 
   @property({ reflect: true, type: Boolean }) checked = false;
 
-  disabled = this.#initiallyDisabled;
+  @property({ reflect: true, type: Boolean }) disabled = false;
 
   get labels(): NodeListOf<HTMLLabelElement> {
     return this.#internals.labels as NodeListOf<HTMLLabelElement>;
   }
 
   override connectedCallback(): void {
     super.connectedCallback();
-    this.setAttribute('role', 'checkbox');
+    this.tabIndex = 0;
     this.addEventListener('click', this.#onClick);
     this.addEventListener('keyup', this.#onKeyup);
+    this.addEventListener('keydown', this.#onKeyDown);
     this.#updateLabels();
   }
 
   formDisabledCallback(disabled: boolean) {
     this.disabled = disabled;
-    this.requestUpdate();
   }
 
   override render() {
     return html`
-      <div id="container" tabindex="0">
-        <svg id="toggle" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
-          <path ?hidden=${!this.showCheckIcon} d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
+      <div id="container">
+        <svg id="toggle"
+             role="presentation"
+             fill="currentColor"
+             height="1em"
+             width="1em"
+             viewBox="0 0 512 512"
+             ?hidden=${!this.showCheckIcon}>
+          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
         </svg>
       </div>
     `;
   }
 
-  override updated() {
-    this.#internals.ariaChecked = String(this.checked);
-    this.#internals.ariaDisabled = String(this.disabled);
+  override willUpdate() {
+    this.#internals.ariaChecked = String(!!this.checked);
+    this.#internals.ariaDisabled = String(!!this.disabled);
   }
 
   #onClick(event: Event) {
@@ -75,11 +79,17 @@ export abstract class BaseSwitch extends LitElement {
   }
 
   #onKeyup(event: KeyboardEvent) {
-    switch (event.key) {
-      case ' ':
-      case 'Enter':
-        event.preventDefault();
-        this.#toggle();
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#toggle();
+    }
+  }
+
+  #onKeyDown(event: KeyboardEvent) {
+    if (event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
     }
   }
 
@@ -95,10 +105,13 @@ export abstract class BaseSwitch extends LitElement {
 
   #updateLabels() {
     const labelState = this.checked ? 'on' : 'off';
-    if (this.labels.length > 1) {
-      for (const label of this.labels) {
-        label.hidden = label.dataset.state !== labelState;
-      }
-    }
+    this.labels.forEach(label => {
+      const states = label.querySelectorAll<HTMLElement>('[data-state]');
+      states.forEach(state => {
+        if (state) {
+          state.hidden = state.dataset.state !== labelState;
+        }
+      });
+    });
   }
 }

elements/pf-switch/demo/checked.html

@@ -3,8 +3,10 @@
     <fieldset>
       <legend>Checked with label</legend>
       <pf-switch id="checked" checked show-check-icon></pf-switch>
-      <label for="checked" data-state="on">Message when on</label>
-      <label for="checked" data-state="off">Message when off</label>
+      <label for="checked">
+        <span data-state="on">Message when on</span>
+        <span data-state="off" hidden>Message when off</span>
+      </label>
     </fieldset>
   </form>
 </section>

elements/pf-switch/demo/disabled.html

@@ -3,13 +3,17 @@
     <fieldset>
       <legend>Checked and Disabled</legend>
       <pf-switch id="checked-disabled" checked disabled></pf-switch>
-      <label for="checked-disabled" data-state="on">Message when on</label>
-      <label for="checked-disabled" data-state="off">Message when off</label>
+      <label for="checked-disabled">
+        <span data-state="on">Message when on</span>
+        <span data-state="off" hidden>Message when off</span>
+      </label>
     </fieldset>
     <fieldset>
       <pf-switch id="default-disabled" disabled></pf-switch>
-      <label for="default-disabled" data-state="on">Message when on</label>
-      <label for="default-disabled" data-state="off">Message when off</label>
+      <label for="default-disabled">
+        <span data-state="on">Message when on</span>
+        <span data-state="off" hidden>Message when off</span>
+      </label>
     </fieldset>
   </form>
 </section>

elements/pf-switch/demo/pf-switch.html

@@ -4,8 +4,10 @@
     <fieldset id="fieldset-a">
       <legend>Option A</legend>
       <pf-switch id="a" checked></pf-switch>
-      <label for="a" data-state="on">Message when on</label>
-      <label for="a" data-state="off" hidden>Message when off</label>
+      <label for="a">
+        <span data-state="on">Message when on</span>
+        <span data-state="off" hidden>Message when off</span>
+      </label>
     </fieldset>
 
     <fieldset id="fieldset-b">
@@ -16,20 +18,28 @@
     <fieldset id="form-disabled">
       <legend>Form Disabled State</legend>
       <pf-switch id="disable-a" aria-controls="fieldset-a"></pf-switch>
-      <label for="disable-a" data-state="on">Fieldset A is disabled</label>
-      <label for="disable-a" data-state="off" hidden>Fieldset A is enabled</label>
+      <label for="disable-a">
+        <span data-state="on">Fieldset A is disabled</span>
+        <span data-state="off" hidden>Fieldset A is enabled</span>
+      </label>
 
       <pf-switch id="disable-a-switch" aria-controls="a"></pf-switch>
-      <label for="disable-a-switch" data-state="on">Switch A is disabled</label>
-      <label for="disable-a-switch" data-state="off" hidden>Switch A is enabled</label>
+      <label for="disable-a-switch">
+        <span data-state="on">Fieldset A is disabled</span>
+        <span data-state="off" hidden>Fieldset A is enabled</span>
+      </label>
 
       <pf-switch id="disable-b" aria-controls="fieldset-b"></pf-switch>
-      <label for="disable-b" data-state="on">Fieldset B is disabled</label>
-      <label for="disable-b" data-state="off" hidden>Fieldset B is enabled</label>
+      <label for="disable-b">
+        <span data-state="on">Fieldset B is disabled</span>
+        <span data-state="off" hidden>Fieldset B is enabled</span>
+      </label>
 
       <pf-switch id="disable-b-switch" aria-controls="b"></pf-switch>
-      <label for="disable-b-switch" data-state="on">Switch B is disabled</label>
-      <label for="disable-b-switch" data-state="off" hidden>Switch B is enabled</label>
+      <label for="disable-b-switch">
+        <span data-state="on">Switch B is disabled</span>
+        <span data-state="off" hidden>Switch B is enabled</span>
+      </label>
     </fieldset>
   </form>
 </section>

elements/pf-switch/demo/reversed.html

@@ -2,8 +2,10 @@
   <form>
     <fieldset>
       <legend>Reversed</legend>
-      <label for="reversed" data-state="on">Message when on</label>
-      <label for="reversed" data-state="off">Message when off</label>
+      <label for="reversed">
+        <span data-state="on">Message when on</span>
+        <span data-state="off" hidden>Message when off</span>
+      </label>
       <pf-switch id="reversed" reversed></pf-switch>
     </fieldset>
   </form>

elements/pf-switch/docs/pf-switch.md

@@ -5,16 +5,20 @@
   provide a more explicit, visible representation on a setting.
 
   <pf-switch id="overview-switch" checked></pf-switch>
-  <label for="overview-switch" data-state="on">Message when on</label>
-  <label for="overview-switch" data-state="off" hidden>Message when off</label>
+  <label for="overview-switch">
+    <span data-state="on">Message when on</span>
+    <span data-state="off" hidden>Message when off</span>
+  </label>
 {% endrenderOverview %}
 
 {% band header="Usage" %}
   ### Basic
   {% htmlexample %}
   <pf-switch id="color-scheme-toggle"></pf-switch>
-  <label for="color-scheme-toggle" data-state="on">Message when on</label>
-  <label for="color-scheme-toggle" data-state="off" hidden>Message when off</label>
+  <label for="color-scheme-toggle">
+    <span data-state="on">Message when on</span>
+    <span data-state="off" hidden>Message when off</span>
+  </label>  
   {% endhtmlexample %}
 
   ### Without label
@@ -25,8 +29,10 @@
   ### Checked with label
   {% htmlexample %}
   <pf-switch id="checked" checked show-check-icon></pf-switch>
-  <label for="checked" data-state="on">Message when on</label>
-  <label for="checked" data-state="off">Message when off</label>
+  <label for="checked">
+    <span data-state="on">Message when on</span>
+    <span data-state="off" hidden>Message when off</span>
+  </label>    
   {% endhtmlexample %}
 
   ### Disabled
@@ -35,14 +41,17 @@
     <fieldset>
       <legend>Checked and Disabled</legend>
       <pf-switch id="checked-disabled" checked disabled></pf-switch>
-      <label for="checked-disabled" data-state="on">Message when on</label>
-      <label for="checked-disabled" data-state="off">Message when off</label>
+      <label for="checked-disabled">
+        <span data-state="on">Message when on</span>
+        <span data-state="off" hidden>Message when off</span>
+      </label>      
     </fieldset>
-
     <fieldset>
       <pf-switch id="default-disabled" disabled></pf-switch>
-      <label for="default-disabled" data-state="on">Message when on</label>
-      <label for="default-disabled" data-state="off">Message when off</label>
+      <label for="default-disabled">
+        <span data-state="on">Message when on</span>
+        <span data-state="off" hidden>Message when off</span>
+      </label>        
     </fieldset>
   </form>
   {% endhtmlexample %}

elements/pf-switch/pf-switch.css

@@ -82,7 +82,11 @@
     var(--pf-c-switch__toggle--before--Transition, translate .25s ease 0s)); ;
 }
 
-:host(:focus-within) #container {
+:host {
+  outline: none;
+}
+
+:host(:is(:focus,:focus-within)) #container {
   outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth,
     var(--pf-global--BorderWidth--md, 2px)) solid var(--pf-c-switch__input--focus__toggle--OutlineColor,
       var(--pf-global--primary-color--100, #06c));