Skip to content

Commit

Permalink
refactor: rename conflicting ariaLabel props, should fix #707 (#854)
Browse files Browse the repository at this point in the history
  • Loading branch information
@felix-ico
felix-ico authored Apr 13, 2022
1 parent aa1c3be commit 1b93ad0
Show file tree
Hide file tree
Showing 13 changed files with 113 additions and 70 deletions.
8 changes: 4 additions & 4 deletions packages/components/src/components/checkbox-group/__snapshots__/checkbox-group.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`CheckboxGroup should match standard snapshot 1`] = `
<scale-checkbox disabled="" label="checkbox" name="nameOfCheckbox" value="3"></scale-checkbox>
</div>
</div>
<scale-checkbox arialabel=" - Unselect all" checked="" disabled="" label="" part="parent-checkbox" status="" value=""></scale-checkbox>
<scale-checkbox arialabelcheckbox=" - Unselect all" checked="" disabled="" label="" part="parent-checkbox" status="" value=""></scale-checkbox>
<fieldset part="fieldset">
<legend></legend>
</fieldset>
Expand All @@ -45,7 +45,7 @@ exports[`CheckboxGroup should match standard snapshot 2`] = `
<scale-checkbox disabled="" label="checkbox" name="nameOfCheckbox" value="3"></scale-checkbox>
</div>
</div>
<scale-checkbox arialabel=" - Unselect all" checked="" disabled="" label="" part="parent-checkbox" status="" value=""></scale-checkbox>
<scale-checkbox arialabelcheckbox=" - Unselect all" checked="" disabled="" label="" part="parent-checkbox" status="" value=""></scale-checkbox>
<fieldset part="fieldset">
<legend></legend>
</fieldset>
Expand Down Expand Up @@ -74,7 +74,7 @@ exports[`CheckboxGroup should select all on master click 1`] = `
<scale-checkbox label="checkbox" name="nameOfCheckbox" value="5"></scale-checkbox>
</div>
</div>
<scale-checkbox arialabel=" - Unselect all" checked="" disabled="" label="" part="parent-checkbox" status="" value=""></scale-checkbox>
<scale-checkbox arialabelcheckbox=" - Unselect all" checked="" disabled="" label="" part="parent-checkbox" status="" value=""></scale-checkbox>
<fieldset part="fieldset">
<legend></legend>
</fieldset>
Expand Down Expand Up @@ -103,7 +103,7 @@ exports[`CheckboxGroup should select all on master click 2`] = `
<scale-checkbox label="checkbox" name="nameOfCheckbox" value="5"></scale-checkbox>
</div>
</div>
<scale-checkbox arialabel=" - Unselect all" checked="" disabled="" label="" part="parent-checkbox" status="" value=""></scale-checkbox>
<scale-checkbox arialabelcheckbox=" - Unselect all" checked="" disabled="" label="" part="parent-checkbox" status="" value=""></scale-checkbox>
<fieldset part="fieldset">
<legend></legend>
</fieldset>
Expand Down
19 changes: 15 additions & 4 deletions packages/components/src/components/checkbox-group/checkbox-group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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}
Expand All @@ -144,7 +155,7 @@ export class CheckboxGroup {
part="parent-checkbox"
/>
<fieldset part="fieldset">
<legend>{this.ariaLabel || this.label}</legend>
<legend>{this.ariaLabelCheckboxGroup || this.label}</legend>
<slot />
</fieldset>
</Host>
Expand Down
26 changes: 13 additions & 13 deletions packages/components/src/components/checkbox-group/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `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` | <span style="color:red">**[DEPRECATED]**</span> - ariaLabelCheckboxGroup should replace ariaLabel<br/><br/> | `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` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string` | `''` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `unselectText` | `unselect-text` | | `string` | `'Unselect all'` |
| `value` | `value` | (optional) Input value | `string` | `''` |


## Shadow Parts
Expand Down
15 changes: 12 additions & 3 deletions packages/components/src/components/checkbox/checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export interface CheckboxInterface extends HTMLElement {
disabled: boolean;
value: string;
label: string;
ariaLabel: string;
ariaLabelCheckbox?: string;
}

let i = 0;
Expand All @@ -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 */
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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}
Expand Down
30 changes: 15 additions & 15 deletions packages/components/src/components/checkbox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `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` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string` | `''` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `value` | `value` | (optional) Input value | `string` | `''` |


## Events
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/sidebar-nav/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)'` |
Expand Down
20 changes: 17 additions & 3 deletions packages/components/src/components/sidebar-nav/sidebar-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 */
Expand All @@ -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
* <scale-sidebar-nav-collapsible> and <scale-sidebar-nav-item> children,
Expand Down Expand Up @@ -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 (
Expand Down
Loading

0 comments on commit 1b93ad0

Please sign in to comment.