feat(button): add a11y attributes typing

ithaka · Dec 6, 2023 · 6b216fc · 6b216fc
1 parent cbb694c
commit 6b216fc
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 70 deletions.
diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts
@@ -17,21 +17,6 @@ export type ButtonType = 'button' | 'submit' | 'reset';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'overlay';
 
-// undefined means no state has been expressed at all and won't render; 'undefined' is an explicit state
-export type PressedState = 'false' | 'true' | 'mixed' | 'undefined' | undefined;
-
-export type ExpandedState = 'false' | 'true' | 'undefined' | undefined;
-
-export type PopupState =
-  | 'false'
-  | 'true'
-  | 'menu'
-  | 'tree'
-  | 'grid'
-  | 'listbox'
-  | 'dialog'
-  | undefined;
-
 const TYPES = ['button', 'submit', 'reset'] as ButtonType[];
 
 const VARIANTS = ['primary', 'secondary', 'subtle', 'overlay'] as ButtonVariant[];
@@ -135,21 +120,28 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement))
    * @attr value
    */
   @property({ type: String, reflect: true, attribute: 'a11y-pressed' })
-  public a11yPressed: PressedState = undefined;
+  public a11yPressed: AriaPressedState = undefined;
 
   /**
    * Indicates the aria expanded state to apply to the button.
    * @attr a11y-expanded
    */
   @property({ type: String, reflect: true, attribute: 'a11y-expanded' })
-  public a11yExpanded: ExpandedState = undefined;
+  public a11yExpanded: AriaExpandedState = undefined;
+
+  /**
+   * Indicates the aria expanded state to apply to the button.
+   * @attr a11y-disabled
+   */
+  @property({ type: String, reflect: true, attribute: 'a11y-disabled' })
+  public a11yDisabled: AriaDisabledState = undefined;
 
   /**
    * Indicates the aria expanded state to apply to the button.
    * @attr a11y-haspopup
    */
   @property({ type: String, reflect: true, attribute: 'a11y-haspopup' })
-  public a11yHaspopup: PopupState = undefined;
+  public a11yHaspopup: AriaPopupState = undefined;
 
   /**
    * Indicates the button's width should match its container.
@@ -284,6 +276,7 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement))
             aria-label=${ifDefined(this.a11yLabel)}
             aria-pressed=${ifDefined(this.a11yPressed)}
             aria-expanded=${ifDefined(this.a11yExpanded)}
+            aria-disabled=${ifDefined(this.a11yDisabled)}
             aria-haspopup=${ifDefined(this.a11yHaspopup)}
             @keyup=${this._handleKeyup}
           >
@@ -302,6 +295,7 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement))
             aria-label=${ifDefined(this.a11yLabel)}
             aria-pressed=${ifDefined(this.a11yPressed)}
             aria-expanded=${ifDefined(this.a11yExpanded)}
+            aria-disabled=${ifDefined(this.a11yDisabled)}
             aria-haspopup=${ifDefined(this.a11yHaspopup)}
           >
             ${this.buttonContent}

diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav-button.ts b/packages/pharos/src/components/sidenav/pharos-sidenav-button.ts
@@ -4,23 +4,8 @@ import { PharosButton } from '../button/pharos-button';
 import type { PharosSidenav } from './pharos-sidenav';
 
 import type { LinkTarget } from '../base/anchor-element';
-import type {
-  ButtonType,
-  IconName,
-  ButtonVariant,
-  PressedState,
-  ExpandedState,
-  PopupState,
-} from '../button/pharos-button';
-export type {
-  LinkTarget,
-  ButtonType,
-  IconName,
-  ButtonVariant,
-  PressedState,
-  ExpandedState,
-  PopupState,
-};
+import type { ButtonType, IconName, ButtonVariant } from '../button/pharos-button';
+export type { LinkTarget, ButtonType, IconName, ButtonVariant };
 
 /**
  * Pharos sidenav button component.

diff --git a/packages/pharos/src/components/toast/pharos-toast-button.ts b/packages/pharos/src/components/toast/pharos-toast-button.ts
@@ -3,24 +3,9 @@ import { toastButtonStyles } from './pharos-toast-button.css';
 import { PharosButton } from '../button/pharos-button';
 
 import type { LinkTarget } from '../base/anchor-element';
-import type {
-  ButtonType,
-  IconName,
-  ButtonVariant,
-  PressedState,
-  ExpandedState,
-  PopupState,
-} from '../button/pharos-button';
+import type { ButtonType, IconName, ButtonVariant } from '../button/pharos-button';
 
-export type {
-  LinkTarget,
-  ButtonType,
-  IconName,
-  ButtonVariant,
-  PressedState,
-  ExpandedState,
-  PopupState,
-};
+export type { LinkTarget, ButtonType, IconName, ButtonVariant };
 
 /**
  * Pharos toast button component.

diff --git a/packages/pharos/src/components/toggle-button-group/pharos-toggle-button.ts b/packages/pharos/src/components/toggle-button-group/pharos-toggle-button.ts
@@ -3,24 +3,8 @@ import type { CSSResultArray, PropertyValues } from 'lit';
 import { toggleButtonStyles } from './pharos-toggle-button.css';
 import { PharosButton } from '../button/pharos-button';
 
-import type {
-  ButtonType,
-  LinkTarget,
-  IconName,
-  ButtonVariant,
-  PressedState,
-  ExpandedState,
-  PopupState,
-} from '../button/pharos-button';
-export type {
-  ButtonType,
-  LinkTarget,
-  IconName,
-  ButtonVariant,
-  PressedState,
-  ExpandedState,
-  PopupState,
-};
+import type { ButtonType, LinkTarget, IconName, ButtonVariant } from '../button/pharos-button';
+export type { ButtonType, LinkTarget, IconName, ButtonVariant };
 
 /**
  * Pharos toggle button component.

diff --git a/packages/pharos/src/typings/a11y-attributes.d.ts b/packages/pharos/src/typings/a11y-attributes.d.ts
@@ -0,0 +1,17 @@
+export {};
+
+declare global {
+  type AriaHiddenValues = 'false' | 'true' | 'undefined' | undefined;
+  type AriaPressedState = 'false' | 'true' | 'mixed' | 'undefined' | undefined;
+  type AriaExpandedState = 'false' | 'true' | 'undefined' | undefined;
+  type AriaDisabledState = 'false' | 'true' | undefined;
+  type AriaPopupState =
+    | 'false'
+    | 'true'
+    | 'menu'
+    | 'tree'
+    | 'grid'
+    | 'listbox'
+    | 'dialog'
+    | undefined;
+}