From 1b93ad0e563790c9397fdd44e0fccae6bc72e458 Mon Sep 17 00:00:00 2001 From: felix-ico <97440128+felix-ico@users.noreply.github.com> Date: Wed, 13 Apr 2022 15:38:23 +0200 Subject: [PATCH] refactor: rename conflicting ariaLabel props, should fix #707 (#854) --- .../__snapshots__/checkbox-group.spec.ts.snap | 8 ++-- .../checkbox-group/checkbox-group.tsx | 19 +++++++-- .../src/components/checkbox-group/readme.md | 26 ++++++------ .../src/components/checkbox/checkbox.tsx | 15 +++++-- .../src/components/checkbox/readme.md | 30 ++++++------- .../src/components/sidebar-nav/readme.md | 2 +- .../components/sidebar-nav/sidebar-nav.tsx | 20 +++++++-- .../src/components/toggle-button/readme.md | 2 +- .../toggle-button/toggle-button.tsx | 14 ++++++- .../checkbox-group/ScaleCheckboxGroup.vue | 2 +- .../components/checkbox/ScaleCheckbox.vue | 2 + .../toggle-group/ScaleToggleGroup.vue | 1 - .../toggle-group/ToggleGroup.stories.mdx | 42 +++++++++---------- 13 files changed, 113 insertions(+), 70 deletions(-) diff --git a/packages/components/src/components/checkbox-group/__snapshots__/checkbox-group.spec.ts.snap b/packages/components/src/components/checkbox-group/__snapshots__/checkbox-group.spec.ts.snap index a5f176240a..a8e342bea0 100644 --- a/packages/components/src/components/checkbox-group/__snapshots__/checkbox-group.spec.ts.snap +++ b/packages/components/src/components/checkbox-group/__snapshots__/checkbox-group.spec.ts.snap @@ -19,7 +19,7 @@ exports[`CheckboxGroup should match standard snapshot 1`] = ` - +
@@ -45,7 +45,7 @@ exports[`CheckboxGroup should match standard snapshot 2`] = ` - +
@@ -74,7 +74,7 @@ exports[`CheckboxGroup should select all on master click 1`] = ` - +
@@ -103,7 +103,7 @@ exports[`CheckboxGroup should select all on master click 2`] = ` - +
diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx index e43576140f..b1ef173009 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.tsx +++ b/packages/components/src/components/checkbox-group/checkbox-group.tsx @@ -33,8 +33,8 @@ export class CheckboxGroup { @Prop() name?: string; /** (optional) Input label */ @Prop() label: string = ''; - /** (optional) Input label output */ - @Prop() ariaLabel?: string; + /** @deprecated - ariaLabelCheckboxGroup should replace ariaLabel */ + @Prop() ariaLabelCheckboxGroup?: string; /** (optional) Input helper text */ @Prop() helperText?: string; /** @deprecated - invalid should replace status */ @@ -84,6 +84,15 @@ export class CheckboxGroup { source: this.host, }); } + if (this.host.hasAttribute('aria-label')) { + statusNote({ + tag: 'deprecated', + message: + 'Property "ariaLabel" is deprecated. Please use the "ariaLabelCheckboxGroup" property!', + type: 'warn', + source: this.host, + }); + } } getChildNodes() { @@ -132,7 +141,9 @@ export class CheckboxGroup { ref={(el) => (this.groupNode = el)} name={this.name} label={this.label} - ariaLabel={`${this.ariaLabel || this.label} - ${this.actionText}`} + ariaLabelCheckbox={`${this.ariaLabelCheckboxGroup || this.label} - ${ + this.actionText + }`} helperText={this.helperText} status={this.status} invalid={this.invalid} @@ -144,7 +155,7 @@ export class CheckboxGroup { part="parent-checkbox" />
- {this.ariaLabel || this.label} + {this.ariaLabelCheckboxGroup || this.label}
diff --git a/packages/components/src/components/checkbox-group/readme.md b/packages/components/src/components/checkbox-group/readme.md index c993dcc4a8..6ad71bdc16 100644 --- a/packages/components/src/components/checkbox-group/readme.md +++ b/packages/components/src/components/checkbox-group/readme.md @@ -7,19 +7,19 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ----------------------------------------------------------------------------------------- | --------- | ---------------- | -| `ariaLabel` | `aria-label` | (optional) Input label output | `string` | `undefined` | -| `helperText` | `helper-text` | (optional) Input helper text | `string` | `undefined` | -| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` | -| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` | -| `label` | `label` | (optional) Input label | `string` | `''` | -| `name` | `name` | (optional) Input name | `string` | `undefined` | -| `selectText` | `select-text` | | `string` | `'Select all'` | -| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `unselectText` | `unselect-text` | | `string` | `'Unselect all'` | -| `value` | `value` | (optional) Input value | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------- | --------- | ---------------- | +| `ariaLabelCheckboxGroup` | `aria-label-checkbox-group` | **[DEPRECATED]** - ariaLabelCheckboxGroup should replace ariaLabel

| `string` | `undefined` | +| `helperText` | `helper-text` | (optional) Input helper text | `string` | `undefined` | +| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` | +| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` | +| `label` | `label` | (optional) Input label | `string` | `''` | +| `name` | `name` | (optional) Input name | `string` | `undefined` | +| `selectText` | `select-text` | | `string` | `'Select all'` | +| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `unselectText` | `unselect-text` | | `string` | `'Unselect all'` | +| `value` | `value` | (optional) Input value | `string` | `''` | ## Shadow Parts diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx index bd4c456120..6068ef17e1 100644 --- a/packages/components/src/components/checkbox/checkbox.tsx +++ b/packages/components/src/components/checkbox/checkbox.tsx @@ -27,7 +27,7 @@ export interface CheckboxInterface extends HTMLElement { disabled: boolean; value: string; label: string; - ariaLabel: string; + ariaLabelCheckbox?: string; } let i = 0; @@ -43,7 +43,7 @@ export class Checkbox { /** (optional) Input label */ @Prop() label: string = ''; /** (optional) Input label output */ - @Prop() ariaLabel?: string; + @Prop() ariaLabelCheckbox?: string; /** (optional) Hides the specified label visually */ @Prop() hideLabel?: boolean = false; /** (optional) Input helper text */ @@ -82,6 +82,15 @@ export class Checkbox { source: this.host, }); } + if (this.host.hasAttribute('aria-label')) { + statusNote({ + tag: 'deprecated', + message: + 'Property "ariaLabel" is deprecated. Please use the "ariaLabelCheckbox" property!', + type: 'warn', + source: this.host, + }); + } } handleChange = (ev) => { @@ -164,7 +173,7 @@ export class Checkbox { value={this.value} checked={this.checked} indeterminate={this.indeterminate} - aria-label={this.ariaLabel} + aria-label={this.ariaLabelCheckbox} aria-checked={this.indeterminate ? 'mixed' : false} aria-invalid={this.status === 'error' || this.invalid} aria-describedBy={helperText.id} diff --git a/packages/components/src/components/checkbox/readme.md b/packages/components/src/components/checkbox/readme.md index 6fe4f5c2d1..e66c07fc4a 100644 --- a/packages/components/src/components/checkbox/readme.md +++ b/packages/components/src/components/checkbox/readme.md @@ -7,21 +7,21 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | --------------- | ----------------------------------------------------------------------------------------- | --------- | ----------- | -| `ariaLabel` | `aria-label` | (optional) Input label output | `string` | `undefined` | -| `checked` | `checked` | (optional) Active switch | `boolean` | `false` | -| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `false` | -| `helperText` | `helper-text` | (optional) Input helper text | `string` | `undefined` | -| `hideLabel` | `hide-label` | (optional) Hides the specified label visually | `boolean` | `false` | -| `indeterminate` | `indeterminate` | (optional) indeterminate | `boolean` | `false` | -| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` | -| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` | -| `label` | `label` | (optional) Input label | `string` | `''` | -| `name` | `name` | (optional) Input name | `string` | `undefined` | -| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | -| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | -| `value` | `value` | (optional) Input value | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ----------------------------------------------------------------------------------------- | --------- | ----------- | +| `ariaLabelCheckbox` | `aria-label-checkbox` | (optional) Input label output | `string` | `undefined` | +| `checked` | `checked` | (optional) Active switch | `boolean` | `false` | +| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `false` | +| `helperText` | `helper-text` | (optional) Input helper text | `string` | `undefined` | +| `hideLabel` | `hide-label` | (optional) Hides the specified label visually | `boolean` | `false` | +| `indeterminate` | `indeterminate` | (optional) indeterminate | `boolean` | `false` | +| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` | +| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` | +| `label` | `label` | (optional) Input label | `string` | `''` | +| `name` | `name` | (optional) Input name | `string` | `undefined` | +| `status` | `status` | **[DEPRECATED]** - invalid should replace status

| `string` | `''` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `value` | `value` | (optional) Input value | `string` | `''` | ## Events diff --git a/packages/components/src/components/sidebar-nav/readme.md b/packages/components/src/components/sidebar-nav/readme.md index 8d3c8b19fb..cf5729fdd8 100644 --- a/packages/components/src/components/sidebar-nav/readme.md +++ b/packages/components/src/components/sidebar-nav/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | ----------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | --------------------- | -| `ariaLabel` | `aria-label` | From mdn: A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. | `string` | `undefined` | +| `ariaLabelSidebarNav` | `aria-label-sidebar-nav` | From mdn: A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. | `string` | `undefined` | | `collapsible` | `collapsible` | Set to `true` to make the sidebar toggleable (useful for small screens) | `boolean` | `false` | | `collapsibleLabel` | `collapsible-label` | Label for toggle button | `string` | `'Menu'` | | `collapsibleMediaQuery` | `collapsible-media-query` | Automatically set `collapsible` based on this media query | `string` | `'(max-width: 30em)'` | diff --git a/packages/components/src/components/sidebar-nav/sidebar-nav.tsx b/packages/components/src/components/sidebar-nav/sidebar-nav.tsx index 4a04996cb5..345c2b7b40 100644 --- a/packages/components/src/components/sidebar-nav/sidebar-nav.tsx +++ b/packages/components/src/components/sidebar-nav/sidebar-nav.tsx @@ -11,6 +11,7 @@ import { Component, h, Prop, Host, Element, State } from '@stencil/core'; import classNames from 'classnames'; +import statusNote from '../../utils/status-note'; @Component({ tag: 'scale-sidebar-nav', @@ -21,13 +22,12 @@ export class SidebarNav { mq: MediaQueryList; @Element() el: HTMLElement; - /** * From mdn: A brief description of the purpose of the navigation, * omitting the term "navigation", as the screen reader will read * both the role and the contents of the label. */ - @Prop() ariaLabel?: string; + @Prop() ariaLabelSidebarNav?: string; /** Set to `true` to make the sidebar toggleable (useful for small screens) */ @Prop({ mutable: true, reflect: true }) collapsible?: boolean = false; /** Automatically set `collapsible` based on this media query */ @@ -50,6 +50,18 @@ export class SidebarNav { } } + componentDidRender() { + if (this.el.hasAttribute('aria-label')) { + statusNote({ + tag: 'deprecated', + message: + 'Property "ariaLabel" is deprecated. Please use the "ariaLabelSidebarNav" property!', + type: 'warn', + source: this.el, + }); + } + } + /** * Set `nesting-level` and `condensed` attributes in * and children, @@ -100,7 +112,9 @@ export class SidebarNav { }; render() { - const label = this.ariaLabel ? { 'aria-label': this.ariaLabel } : {}; + const label = this.ariaLabelSidebarNav + ? { 'aria-label': this.ariaLabelSidebarNav } + : {}; const hidden = this.collapsible ? { hidden: this.collapsed } : {}; return ( diff --git a/packages/components/src/components/toggle-button/readme.md b/packages/components/src/components/toggle-button/readme.md index 1b8a98899f..5a58e5428b 100644 --- a/packages/components/src/components/toggle-button/readme.md +++ b/packages/components/src/components/toggle-button/readme.md @@ -10,7 +10,7 @@ | Property | Attribute | Description | Type | Default | | ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | -------------- | | `ariaDescriptionTranslation` | `aria-description-translation` | a11y text for getting meaningful value. `$buttonNumber` and `$selected` are template variables and will be replaces by their corresponding properties. | `string` | `'$selected'` | -| `ariaLabel` | `aria-label` | (optional) aria-label attribute needed for icon-only buttons | `string` | `undefined` | +| `ariaLabelToggleButton` | `aria-label-toggle-button` | (optional) aria-label attribute needed for icon-only buttons | `string` | `undefined` | | `ariaLangDeselected` | `aria-lang-deselected` | (optional) translation of 'deselected | `string` | `'deselected'` | | `ariaLangSelected` | `aria-lang-selected` | (optional) translation of 'selected | `string` | `'selected'` | | `background` | `background` | (optional) Button background | `"grey" \| "white"` | `'white'` | diff --git a/packages/components/src/components/toggle-button/toggle-button.tsx b/packages/components/src/components/toggle-button/toggle-button.tsx index 99f7784f90..4c0793e2d3 100644 --- a/packages/components/src/components/toggle-button/toggle-button.tsx +++ b/packages/components/src/components/toggle-button/toggle-button.tsx @@ -20,6 +20,7 @@ import { } from '@stencil/core'; import classNames from 'classnames'; import { emitEvent } from '../../utils/utils'; +import statusNote from '../../utils/status-note'; enum iconSizes { xs = '12', @@ -61,7 +62,7 @@ export class ToggleButton { /** (optional) toggle button's id */ @Prop({ reflect: true }) toggleButtonId?: string; /** (optional) aria-label attribute needed for icon-only buttons */ - @Prop() ariaLabel: string; + @Prop() ariaLabelToggleButton: string; /** (optional) Injected CSS styles */ @Prop() styles?: string; /** (optional) position within group */ @@ -96,6 +97,15 @@ export class ToggleButton { componentDidRender() { this.handleIconSize(); + if (this.hostElement.hasAttribute('aria-label')) { + statusNote({ + tag: 'deprecated', + message: + 'Property "ariaLabel" is deprecated. Please use the "ariaLabelToggleButton" property!', + type: 'warn', + source: this.hostElement, + }); + } } componentWillLoad() { @@ -180,7 +190,7 @@ export class ToggleButton { onClick={this.handleClick} disabled={this.disabled} type="button" - aria-label={this.ariaLabel} + aria-label={this.ariaLabelToggleButton} aria-pressed={this.selected} part={this.getBasePartMap()} aria-description={this.getAriaDescriptionTranslation()} diff --git a/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue b/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue index 87740f7fb9..443e9c3fd0 100644 --- a/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue +++ b/packages/storybook-vue/stories/components/checkbox-group/ScaleCheckboxGroup.vue @@ -11,7 +11,7 @@ export default { name: { type: String }, label: { type: String, default: '' }, helperText: { type: String }, - ariaLabel: { type: String }, + ariaLabelCheckboxGroup: { type: String }, invalid: { type: Boolean }, selectText: { type: String, default: 'Select all' }, unselectText: { type: String, default: 'Unselect all' }, diff --git a/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue b/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue index ebca5fa45a..6df54eb03b 100644 --- a/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue +++ b/packages/storybook-vue/stories/components/checkbox/ScaleCheckbox.vue @@ -9,6 +9,7 @@ :indeterminate="indeterminate" :value="value" :input-id="inputId" + :aria-label-checkbox="ariaLabelCheckbox" @scaleChange="scaleChange" > @@ -28,6 +29,7 @@ export default { indeterminate: { type: Boolean }, value: { type: String }, inputId: { type: String }, + ariaLabelCheckbox: { type: String} }, methods: { scaleChange($event) { diff --git a/packages/storybook-vue/stories/components/toggle-group/ScaleToggleGroup.vue b/packages/storybook-vue/stories/components/toggle-group/ScaleToggleGroup.vue index aaf3267347..1e13f13e31 100644 --- a/packages/storybook-vue/stories/components/toggle-group/ScaleToggleGroup.vue +++ b/packages/storybook-vue/stories/components/toggle-group/ScaleToggleGroup.vue @@ -26,7 +26,6 @@ export default { disabled: { type: Boolean, default: false }, hideBorder: { type: Boolean, default: false }, singleSelect: { type: Boolean, default: false }, - ariaLabel: { type: String }, ariaLabelTranslation: { type: String, default: 'toggle button group with $slottedButtons buttons' }, variant: { type: String, default: 'color' }, styles: { type: String }, diff --git a/packages/storybook-vue/stories/components/toggle-group/ToggleGroup.stories.mdx b/packages/storybook-vue/stories/components/toggle-group/ToggleGroup.stories.mdx index 8122baafe0..5473f0b1e3 100644 --- a/packages/storybook-vue/stories/components/toggle-group/ToggleGroup.stories.mdx +++ b/packages/storybook-vue/stories/components/toggle-group/ToggleGroup.stories.mdx @@ -45,9 +45,9 @@ export const Template = (args, { argTypes }) => ({ :variant="variant" :styles="styles" > - Label - Label - Label + Label + Label + Label `, }); @@ -72,17 +72,17 @@ export const TemplateAriaTranslation = (args, { argTypes }) => ({ :styles="styles" > Label Label ({ :variant="variant" :styles="styles" > - + Label - + Label - + Label - + @@ -326,23 +326,21 @@ export const TemplateIcons = (args, { argTypes }) => ({ ```html - - + Label - Label - ({ ```html - + - + - +