Skip to content

Commit

Permalink
feat: aria-details added to all input types (#2359)
Browse files Browse the repository at this point in the history 
* feat: aria-details added to diff input type
  • Loading branch information
@tshimber
tshimber authored Oct 29, 2024
1 parent 42a3b36 commit 4c45650
Show file tree
Hide file tree
Showing 24 changed files with 267 additions and 183 deletions.
5 changes: 4 additions & 1 deletion packages/components/src/components/checkbox/checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ export class Checkbox {
@Prop() styles?: string;
/** (optional) Input required */
@Prop() required?: boolean;
/** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
@Prop() ariaDetailsId?: string;

/** Emitted when the value has changed. */
@Event({ eventName: 'scale-change' }) scaleChange: EventEmitter;
Expand Down Expand Up @@ -189,7 +191,8 @@ export class Checkbox {
aria-label={this.ariaLabelCheckbox}
aria-checked={this.indeterminate ? 'mixed' : false}
aria-invalid={this.status === 'error' || this.invalid ? 'true' : null}
aria-describedBy={helperText.id}
aria-describedBy={helperText ? helperText.id : this.ariaDetailsId}
aria-details={this.ariaDetailsId}
disabled={this.disabled}
required={this.required}
onChange={this.handleChange}
Expand Down
33 changes: 17 additions & 16 deletions packages/components/src/components/checkbox/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,23 @@

## Properties

| 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` |
| `required` | `required` | (optional) Input required | `boolean` | `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 |
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
| `ariaDetailsId` | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string` | `undefined` |
| `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` |
| `required` | `required` | (optional) Input required | `boolean` | `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
18 changes: 13 additions & 5 deletions packages/components/src/components/date-picker/date-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,10 @@ export class DatePicker {

@Prop() variant?: 'informational' | 'warning' | 'danger' | 'success' =
'informational';

/** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
@Prop() ariaDetailsId?: string;

/** Whether the input element has focus */
@State() hasFocus: boolean = false;

Expand Down Expand Up @@ -308,11 +312,15 @@ export class DatePicker {
input.addEventListener('keyup', this.handleKeyPress);
}

if (input && this.helperText) {
input.setAttribute(
'aria-describedby',
`helper-message-${this.internalId}`
);
if (input && (this.helperText || this.ariaDetailsId)) {
const describedBy = this.helperText
? `helper-message-${this.internalId}`
: this.ariaDetailsId;
input.setAttribute('aria-describedby', describedBy);
}

if (input && this.ariaDetailsId) {
input.setAttribute('aria-details', this.ariaDetailsId);
}

if (input && this.placeholder) {
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/date-picker/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

| Property | Attribute | Description | Type | Default |
| ---------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------- |
| `ariaDetailsId` | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string` | `undefined` |
| `dateAdapter` | `date-adapter` | Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting. | `any` | `undefined` |
| `direction` | `direction` | Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right. | `"left" \| "right"` | `'right'` |
| `disabled` | `disabled` | Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. | `boolean` | `false` |
Expand Down
8 changes: 6 additions & 2 deletions packages/components/src/components/dropdown-select/dropdown-select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,8 @@ export class DropdownSelect {
@Prop() ariaLabelSelected?: string = 'selected';
/** (optional) Text displayed in high contrast mode only to indicate disabled state */
@Prop() hcmLabelDisabled?: string = 'this field is disabled';
/** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
@Prop() ariaDetailsId?: string;

@Event({ eventName: 'scale-change' }) scaleChange!: EventEmitter<void>;
@Event({ eventName: 'scale-focus' }) scaleFocus!: EventEmitter<void>;
Expand Down Expand Up @@ -490,7 +492,8 @@ export class DropdownSelect {
const ValueElement = element.ItemElement;
const hasEmptyValueElement = element.value === '';
const helperTextId = `helper-message-${generateUniqueId()}`;
const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
const describedBy = this.helperText ? helperTextId : this.ariaDetailsId;
const ariaDescribedByAttr = { 'aria-describedBy': describedBy };

return (
<Host>
Expand All @@ -505,6 +508,7 @@ export class DropdownSelect {
aria-expanded={this.open ? 'true' : 'false'}
aria-haspopup="listbox"
aria-labelledby={`${this.comboboxId}-label`}
aria-details={this.ariaDetailsId}
id={this.comboboxId}
part="combobox"
role="combobox"
Expand All @@ -521,7 +525,7 @@ export class DropdownSelect {
).value,
}
: {})}
{...(this.helperText ? ariaDescribedByAttr : {})}
{...ariaDescribedByAttr}
{...(this.invalid ? { 'aria-invalid': 'true' } : {})}
>
<span part="combobox-value">
Expand Down
33 changes: 17 additions & 16 deletions packages/components/src/components/dropdown-select/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,23 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------- | --------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------- | -------------------------- |
| `ariaLabelSelected` | `aria-label-selected` | (optional) Screen reader text appended to the selected element | `string` | `'selected'` |
| `comboboxId` | `combobox-id` | | `string` | `'combobox'` |
| `disabled` | `disabled` | | `boolean` | `undefined` |
| `floatingStrategy` | `floating-strategy` | | `"absolute" \| "fixed"` | `'absolute'` |
| `hcmLabelDisabled` | `hcm-label-disabled` | (optional) Text displayed in high contrast mode only to indicate disabled state | `string` | `'this field is disabled'` |
| `helperText` | `helper-text` | | `string` | `''` |
| `hideLabelVisually` | `hide-label-visually` | (optional) to hide the label | `boolean` | `false` |
| `invalid` | `invalid` | | `boolean` | `false` |
| `label` | `label` | | `string` | `undefined` |
| `name` | `name` | | `string` | `undefined` |
| `readonly` | `readonly` | | `boolean` | `undefined` |
| `transparent` | `transparent` | | `boolean` | `undefined` |
| `value` | `value` | | `any` | `undefined` |
| `variant` | `variant` | | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |
| Property | Attribute | Description | Type | Default |
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -------------------------- |
| `ariaDetailsId` | `aria-details-id` | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string` | `undefined` |
| `ariaLabelSelected` | `aria-label-selected` | (optional) Screen reader text appended to the selected element | `string` | `'selected'` |
| `comboboxId` | `combobox-id` | | `string` | `'combobox'` |
| `disabled` | `disabled` | | `boolean` | `undefined` |
| `floatingStrategy` | `floating-strategy` | | `"absolute" \| "fixed"` | `'absolute'` |
| `hcmLabelDisabled` | `hcm-label-disabled` | (optional) Text displayed in high contrast mode only to indicate disabled state | `string` | `'this field is disabled'` |
| `helperText` | `helper-text` | | `string` | `''` |
| `hideLabelVisually` | `hide-label-visually` | (optional) to hide the label | `boolean` | `false` |
| `invalid` | `invalid` | | `boolean` | `false` |
| `label` | `label` | | `string` | `undefined` |
| `name` | `name` | | `string` | `undefined` |
| `readonly` | `readonly` | | `boolean` | `undefined` |
| `transparent` | `transparent` | | `boolean` | `undefined` |
| `value` | `value` | | `any` | `undefined` |
| `variant` | `variant` | | `"danger" \| "informational" \| "success" \| "warning"` | `'informational'` |


## Events
Expand Down
Loading

0 comments on commit 4c45650

Please sign in to comment.