Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: aria-details added to diff input types #2359

Merged
merged 5 commits into from
Oct 29, 2024
Merged

feat: aria-details added to diff input types #2359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
771e0eb
feat: aria-details added to diff input types
tshimber Oct 16, 2024
2b8e6d3
fix: readme fixed
tshimber Oct 18, 2024
3d7e0b4
fix: storybook extended
tshimber Oct 18, 2024
6a68116
fix: storybook fixed
tshimber Oct 18, 2024
322a072
fix: dropdown-select fixed
tshimber Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/components/src/components/checkbox/checkbox.tsx
View file
Open in desktop
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
Open in desktop
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
20 changes: 14 additions & 6 deletions packages/components/src/components/date-picker/date-picker.tsx
View file
Open in desktop
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 Expand Up @@ -483,7 +491,7 @@ export class DatePicker {
dateAdapter={this.dateAdapter}
disabled={this.disabled}
value={this.value}
ref={(element: HTMLElement & DuetDatePicker) =>
ref={(element: HTMLDuetDatePickerElement & DuetDatePicker) =>
(this.duetInput = element)
}
></duet-date-picker>
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/date-picker/readme.md
View file
Open in desktop
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
Open in desktop
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 };
amir-ba marked this conversation as resolved.
Show resolved Hide resolved

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
Open in desktop
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
Loading