From 641bf37cd8c300d73266f9e998c8abc26178e4af Mon Sep 17 00:00:00 2001 From: Mat Harris Date: Wed, 6 Sep 2023 19:23:42 -0400 Subject: [PATCH 01/11] docs: add @sirrah-tam as a contributor --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 3d0970223..5098cd451 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -308,6 +308,15 @@ "bug", "code" ] + }, + { + "login": "sirrah-tam", + "name": "Mat Harris", + "avatar_url": "https://avatars.githubusercontent.com/u/6874453?v=4", + "profile": "https://matharris.dev/", + "contributions": [ + "a11y" + ] } ], "contributorsPerLine": 7 diff --git a/README.md b/README.md index c74be5daa..40809e835 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Hassan Tanveer
Hassan Tanveer
💻 mariadevadoss
mariadevadoss
💻 Brent Swisher
Brent Swisher
🐛 💻 + Mat Harris
Mat Harris
️️️️♿️ From a92d4d83470bd3ba89178cc4a7a050f5903ba4b4 Mon Sep 17 00:00:00 2001 From: Mat Harris Date: Tue, 3 Oct 2023 17:14:40 -0400 Subject: [PATCH 02/11] feat(button): add a11y naming convention for aria --- .../src/components/button/pharos-button.ts | 72 +++++++++++++++++-- .../sidenav/pharos-sidenav-button.ts | 19 ++++- .../components/toast/pharos-toast-button.ts | 19 ++++- .../pharos-toggle-button.ts | 12 +++- 4 files changed, 111 insertions(+), 11 deletions(-) diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts index dedef5bf6..a9fd10dc4 100644 --- a/packages/pharos/src/components/button/pharos-button.ts +++ b/packages/pharos/src/components/button/pharos-button.ts @@ -20,6 +20,18 @@ 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[]; @@ -112,12 +124,33 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) public large = false; /** - * Indicates the aria label to apply to the button. + * Indicates the aria label to apply to the button. DEPRECRATED * @attr label */ @property({ type: String, reflect: true }) public label?: string; + /** + * Indicates the aria label to apply to the button. + * @attr a11y-label + */ + @property({ type: String, reflect: true, attribute: 'a11y-label' }) + public a11yLabel?: string; + + /** + * 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; + + /** + * 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; + /** * Indicates the button's width should match its container. * @attr full-width @@ -140,12 +173,19 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) public value?: string; /** - * Indicates this button is a toggle button and whether it is pressed or not. + * Indicates this button is a toggle button and whether it is pressed or not. DEPRECATED * @attr value */ @property({ type: String, reflect: true }) public pressed: PressedState = undefined; + /** + * Indicates this button is a toggle button and whether it is pressed or not. + * @attr value + */ + @property({ type: String, reflect: true, attribute: 'a11y-pressed' }) + public a11yPressed: PressedState = undefined; + @query('#button-element') private _button!: HTMLButtonElement | HTMLAnchorElement; @@ -178,6 +218,16 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) `${this.variant} is not a valid variant. Valid variants are: ${VARIANTS.join(', ')}` ); } + + // Warn consumers that the label attribute is being deprecated + if (this.label) { + console.warn("The 'label' attribute is deprecated. Use 'a11y-label' instead."); + } + + // Warn consumers that the pressed attribute is being deprecated + if (this.pressed) { + console.warn("The 'pressed' attribute is deprecated. Use 'a11y-pressed' instead."); + } } override connectedCallback(): void { @@ -243,8 +293,13 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) } protected override render(): TemplateResult { + // Remove in future release once sufficient time elapsed to update naming convention + const a11yLabel = this.a11yLabel ?? this.label; + const a11yPressed = this.a11yPressed ?? this.pressed; + return this.href ? html` + ${this.buttonContent} ` : html` + diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav-button.ts b/packages/pharos/src/components/sidenav/pharos-sidenav-button.ts index 6dcab2e42..b02a46b2b 100644 --- a/packages/pharos/src/components/sidenav/pharos-sidenav-button.ts +++ b/packages/pharos/src/components/sidenav/pharos-sidenav-button.ts @@ -4,8 +4,23 @@ 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 } from '../button/pharos-button'; -export type { LinkTarget, ButtonType, IconName, ButtonVariant, PressedState }; +import type { + ButtonType, + IconName, + ButtonVariant, + PressedState, + ExpandedState, + PopupState, +} from '../button/pharos-button'; +export type { + LinkTarget, + ButtonType, + IconName, + ButtonVariant, + PressedState, + ExpandedState, + PopupState, +}; /** * 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 index 7cdb2eab4..ff6cc8c6a 100644 --- a/packages/pharos/src/components/toast/pharos-toast-button.ts +++ b/packages/pharos/src/components/toast/pharos-toast-button.ts @@ -3,9 +3,24 @@ 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 } from '../button/pharos-button'; +import type { + ButtonType, + IconName, + ButtonVariant, + PressedState, + ExpandedState, + PopupState, +} from '../button/pharos-button'; -export type { LinkTarget, ButtonType, IconName, ButtonVariant, PressedState }; +export type { + LinkTarget, + ButtonType, + IconName, + ButtonVariant, + PressedState, + ExpandedState, + PopupState, +}; /** * 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 index 1952fc9ab..ae245d61e 100644 --- a/packages/pharos/src/components/toggle-button-group/pharos-toggle-button.ts +++ b/packages/pharos/src/components/toggle-button-group/pharos-toggle-button.ts @@ -9,8 +9,18 @@ import type { IconName, ButtonVariant, PressedState, + ExpandedState, + PopupState, } from '../button/pharos-button'; -export type { ButtonType, LinkTarget, IconName, ButtonVariant, PressedState }; +export type { + ButtonType, + LinkTarget, + IconName, + ButtonVariant, + PressedState, + ExpandedState, + PopupState, +}; /** * Pharos toggle button component. From b86feabf0be1973fa8cad327236f2909f12511ed Mon Sep 17 00:00:00 2001 From: Mat Harris Date: Thu, 5 Oct 2023 14:10:24 -0400 Subject: [PATCH 03/11] feat(button): add aria-description support --- packages/pharos/src/components/button/pharos-button.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts index a9fd10dc4..5a601de2f 100644 --- a/packages/pharos/src/components/button/pharos-button.ts +++ b/packages/pharos/src/components/button/pharos-button.ts @@ -137,6 +137,13 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) @property({ type: String, reflect: true, attribute: 'a11y-label' }) public a11yLabel?: string; + /** + * Indicates the aria description to apply to the button. + * @attr a11y-description + */ + @property({ type: String, reflect: true, attribute: 'a11y-description' }) + public a11yDescription?: string; + /** * Indicates the aria expanded state to apply to the button. * @attr a11y-expanded @@ -310,6 +317,7 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) rel=${ifDefined(this.rel)} target=${ifDefined(this.target)} aria-label=${ifDefined(a11yLabel)} + aria-description=${ifDefined(this.a11yDescription)} aria-pressed=${ifDefined(a11yPressed)} aria-expanded=${ifDefined(this.a11yExpanded)} aria-haspopup=${ifDefined(this.a11yHaspopup)} @@ -328,6 +336,7 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) ?disabled=${this.disabled} type="${ifDefined(this.type)}" aria-label=${ifDefined(a11yLabel)} + aria-description=${ifDefined(this.a11yDescription)} aria-pressed=${ifDefined(a11yPressed)} aria-expanded=${ifDefined(this.a11yExpanded)} aria-haspopup=${ifDefined(this.a11yHaspopup)} From 8ea79836f8de81c6190cf107a1b604ad7ad4ed47 Mon Sep 17 00:00:00 2001 From: Mat Harris Date: Thu, 5 Oct 2023 14:18:01 -0400 Subject: [PATCH 04/11] chore: add changset --- .changeset/large-frogs-smile.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/large-frogs-smile.md diff --git a/.changeset/large-frogs-smile.md b/.changeset/large-frogs-smile.md new file mode 100644 index 000000000..b068b2190 --- /dev/null +++ b/.changeset/large-frogs-smile.md @@ -0,0 +1,5 @@ +--- +'@ithaka/pharos': minor +--- + +Update PharosButton to use a11y naming convention and include wider ARIA support From 2760f7d3c4c02dd8eb225c7fa5433261466e8087 Mon Sep 17 00:00:00 2001 From: Mat Harris Date: Wed, 18 Oct 2023 14:43:34 -0400 Subject: [PATCH 05/11] Update packages/pharos/src/components/button/pharos-button.ts Co-authored-by: Dane Hillard --- packages/pharos/src/components/button/pharos-button.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts index 5a601de2f..06685886d 100644 --- a/packages/pharos/src/components/button/pharos-button.ts +++ b/packages/pharos/src/components/button/pharos-button.ts @@ -226,7 +226,6 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) ); } - // Warn consumers that the label attribute is being deprecated if (this.label) { console.warn("The 'label' attribute is deprecated. Use 'a11y-label' instead."); } From d8eac20353ff11ab42275f53e9aa2237bcca0837 Mon Sep 17 00:00:00 2001 From: Mat Harris Date: Wed, 18 Oct 2023 14:43:48 -0400 Subject: [PATCH 06/11] Update packages/pharos/src/components/button/pharos-button.ts Co-authored-by: Dane Hillard --- packages/pharos/src/components/button/pharos-button.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts index 06685886d..efe1a5347 100644 --- a/packages/pharos/src/components/button/pharos-button.ts +++ b/packages/pharos/src/components/button/pharos-button.ts @@ -230,7 +230,6 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) console.warn("The 'label' attribute is deprecated. Use 'a11y-label' instead."); } - // Warn consumers that the pressed attribute is being deprecated if (this.pressed) { console.warn("The 'pressed' attribute is deprecated. Use 'a11y-pressed' instead."); } From 1f866250c12b90434c8f361e3f2dfb596425eebb Mon Sep 17 00:00:00 2001 From: Mat Harris Date: Wed, 18 Oct 2023 14:48:46 -0400 Subject: [PATCH 07/11] feat(button): move property deprecated flag --- packages/pharos/src/components/button/pharos-button.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts index efe1a5347..a46d944a0 100644 --- a/packages/pharos/src/components/button/pharos-button.ts +++ b/packages/pharos/src/components/button/pharos-button.ts @@ -124,7 +124,8 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) public large = false; /** - * Indicates the aria label to apply to the button. DEPRECRATED + * @deprecated + * Indicates the aria label to apply to the button. * @attr label */ @property({ type: String, reflect: true }) @@ -180,7 +181,8 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) public value?: string; /** - * Indicates this button is a toggle button and whether it is pressed or not. DEPRECATED + * @deprecated + * Indicates this button is a toggle button and whether it is pressed or not. * @attr value */ @property({ type: String, reflect: true }) From 2dd0e9c493bba5bbb5a0401cbab62add04e6263c Mon Sep 17 00:00:00 2001 From: Mat Harris Date: Tue, 5 Dec 2023 10:25:42 -0500 Subject: [PATCH 08/11] fix(button): remove ts-ignore after lit upgrade --- packages/pharos/src/components/button/pharos-button.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/pharos/src/components/button/pharos-button.ts b/packages/pharos/src/components/button/pharos-button.ts index a46d944a0..50eb1e4e2 100644 --- a/packages/pharos/src/components/button/pharos-button.ts +++ b/packages/pharos/src/components/button/pharos-button.ts @@ -306,7 +306,6 @@ export class PharosButton extends ScopedRegistryMixin(FocusMixin(AnchorElement)) return this.href ? html` - ` : html` -