{/* h4 tag + h5 styles feels weird, ideally one should be able to set the tag with an attribute */}
{this.heading && (
{this.heading}
diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
index c607a5f84e..61a0ffd2d1 100644
--- a/packages/components/src/components/data-grid/readme.md
+++ b/packages/components/src/components/data-grid/readme.md
@@ -5,36 +5,45 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------- |
-| `fields` | `fields` | Input fields config array | `any` | `undefined` |
-| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` |
-| `heading` | `heading` | (optional) Heading string | `string` | `''` |
-| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` |
-| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` |
-| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` |
-| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` |
-| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` |
-| `localization` | -- | (optional) set localization for sort, toggle and select/deselect table Default is English. | `{ sortBy: string; toggle: string; select: string; }` | `undefined` |
-| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` |
-| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` |
-| `rows` | `rows` | Input data array | `any` | `undefined` |
-| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` |
-| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `string[]` | `[]` |
-| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` |
-| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` |
-| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` |
-| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` |
+| Property | Attribute | Description | Type | Default |
+| --------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| `fields` | `fields` | Input fields config array | `any` | `undefined` |
+| `freezeHeader` | `freeze-header` | (optional) Freeze header row from scrolling | `boolean` | `false` |
+| `heading` | `heading` | (optional) Heading string | `string` | `''` |
+| `height` | `height` | (optional) Set static table height, by default will auto-resize | `string` | `undefined` |
+| `hideBorder` | `hide-border` | (optional) Set to true to remove border | `boolean` | `false` |
+| `hideHeader` | `hide-header` | (optional) Set to true to hide header row | `boolean` | `false` |
+| `hideInfo` | `hide-info` | (optional) Set to true to remove info footer block including pagination and selection status | `boolean` | `false` |
+| `hideMenu` | `hide-menu` | (optional) Set to true to hide settings menu | `boolean` | `false` |
+| `localization` | -- | (optional) set localization for sort, toggle, select/deselect, table options, expand/collapse (html cell) Default is English. | `{ sortBy: string; toggle: string; select: string; tableOptions: string; expand?: string; collapse?: string; }` | `undefined` |
+| `numbered` | `numbered` | (optional) Set to true to add numbers column | `boolean` | `false` |
+| `pageSize` | `page-size` | (optional) Set number of rows to display per pagination page | `number` | `Infinity` |
+| `rows` | `rows` | Input data array | `any` | `undefined` |
+| `selectable` | `selectable` | (optional) Set to true to add selection column | `boolean` | `false` |
+| `selection` | -- | Read-only selection array - populated with raw data from selected rows | `any[]` | `[]` |
+| `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker | `boolean` | `true` |
+| `sortableColumnTitle` | `sortable-column-title` | (optional) Title for sortable columns | `string` | `'Activate to sort column'` |
+| `styles` | `styles` | (optional) Injected css styles | `any` | `undefined` |
+| `visible` | `visible` | (optional) Set to false to hide table, used for nested tables to re-render upon toggle | `boolean` | `true` |
## Events
-| Event | Description | Type |
-| ------------ | -------------------------------------------------------------------------------------------------- | ---------------------------------------- |
-| `scale-edit` | Event triggered every time the editable cells are changed, updating the original rows data | `CustomEvent` |
-| `scale-sort` | Event triggered every time the data is sorted, changing original rows data | `CustomEvent` |
-| `scaleEdit` | **[DEPRECATED]** in v3 in favor of kebab-case event names
| `CustomEvent` |
-| `scaleSort` | **[DEPRECATED]** in v3 in favor of kebab-case event names
| `CustomEvent` |
+| Event | Description | Type |
+| ----------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| `scale-edit` | Event triggered every time the editable cells are changed, updating the original rows data | `CustomEvent` |
+| `scale-selection` | Event triggered every time the selection list updates | `CustomEvent` |
+| `scale-sort` | Event triggered every time the data is sorted, changing original rows data | `CustomEvent` |
+| `scaleEdit` | **[DEPRECATED]** in v3 in favor of kebab-case event names
| `CustomEvent` |
+| `scaleSort` | **[DEPRECATED]** in v3 in favor of kebab-case event names
| `CustomEvent` |
+
+
+## Shadow Parts
+
+| Part | Description |
+| -------------- | ----------- |
+| `"scrollable"` | |
+| `"title"` | |
## Dependencies
@@ -62,6 +71,8 @@
- [scale-dropdown-select-item](../dropdown-select-item)
- [scale-tag](../tag)
- [scale-text-field](../text-field)
+- [scale-icon-action-edit](../icons/action-edit)
+- [scale-icon-action-remove](../icons/action-remove)
### Graph
```mermaid
@@ -87,6 +98,8 @@ graph TD;
scale-data-grid --> scale-dropdown-select-item
scale-data-grid --> scale-tag
scale-data-grid --> scale-text-field
+ scale-data-grid --> scale-icon-action-edit
+ scale-data-grid --> scale-icon-action-remove
scale-menu-flyout-item --> scale-icon-action-checkmark
scale-menu-flyout-item --> scale-icon-navigation-right
scale-checkbox --> scale-icon-action-minus
diff --git a/packages/components/src/components/date-picker/date-picker.tsx b/packages/components/src/components/date-picker/date-picker.tsx
index 5a15423b68..a202a02a30 100644
--- a/packages/components/src/components/date-picker/date-picker.tsx
+++ b/packages/components/src/components/date-picker/date-picker.tsx
@@ -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;
@@ -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) {
@@ -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)
}
>
diff --git a/packages/components/src/components/date-picker/readme.md b/packages/components/src/components/date-picker/readme.md
index 8b3077a06f..06836403f4 100644
--- a/packages/components/src/components/date-picker/readme.md
+++ b/packages/components/src/components/date-picker/readme.md
@@ -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` |
diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx
index 7325431046..2c8e429f00 100644
--- a/packages/components/src/components/dropdown-select/dropdown-select.tsx
+++ b/packages/components/src/components/dropdown-select/dropdown-select.tsx
@@ -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;
@Event({ eventName: 'scale-focus' }) scaleFocus!: EventEmitter;
@@ -270,7 +272,7 @@ export class DropdownSelect {
@State() hasFocus: boolean = false;
private comboEl: HTMLElement;
- private listboxEl: HTMLElement;
+ private scrollContainer: HTMLElement;
private listboxPadEl: HTMLElement;
private hiddenInput: HTMLInputElement;
@@ -346,10 +348,10 @@ export class DropdownSelect {
bringIntoView(index) {
const options: NodeListOf =
- this.listboxEl.querySelectorAll('[role=option]');
+ this.scrollContainer.querySelectorAll('[role=option]');
- if (hasOverflow(this.listboxEl)) {
- keepInView(options[index], this.listboxEl);
+ if (hasOverflow(this.scrollContainer)) {
+ keepInView(options[index], this.scrollContainer);
}
if (!isInView(options[index])) {
@@ -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 (
@@ -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"
@@ -521,7 +525,7 @@ export class DropdownSelect {
).value,
}
: {})}
- {...(this.helperText ? ariaDescribedByAttr : {})}
+ {...ariaDescribedByAttr}
{...(this.invalid ? { 'aria-invalid': 'true' } : {})}
>
@@ -530,13 +534,13 @@ export class DropdownSelect {
- Label
+
+ Label
+
`;
diff --git a/packages/components/src/components/segment/readme.md b/packages/components/src/components/segment/readme.md
index bc5a198334..249d97f3ad 100644
--- a/packages/components/src/components/segment/readme.md
+++ b/packages/components/src/components/segment/readme.md
@@ -7,24 +7,24 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | -------------- |
-| `adjacentSiblings` | `adjacent-siblings` | | `"left" \| "leftright" \| "right"` | `undefined` |
-| `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'` |
-| `ariaLabelSegment` | `aria-label-segment` | (optional) aria-label attribute needed for icon-only segments | `string` | `undefined` |
-| `ariaLangDeselected` | `aria-lang-deselected` | (optional) translation of 'deselected | `string` | `'deselected'` |
-| `ariaLangSelected` | `aria-lang-selected` | (optional) translation of 'selected | `string` | `'selected'` |
-| `disabled` | `disabled` | (optional) If `true`, the segment is disabled | `boolean` | `false` |
-| `hasIcon` | `has-icon` | (optional) position within group | `boolean` | `undefined` |
-| `iconOnly` | `icon-only` | (optional) position within group | `boolean` | `undefined` |
-| `position` | `position` | (optional) position within group | `number` | `undefined` |
-| `segmentId` | `segment-id` | (optional) segment's id | `string` | `undefined` |
-| `selected` | `selected` | (optional) If `true`, the segment is selected | `boolean` | `false` |
-| `selectedIndex` | `selected-index` | (optional) the index of the currently selected segment in the segmented-button | `string` | `undefined` |
-| `size` | `size` | (optional) The size of the segment | `"large" \| "medium" \| "small"` | `'small'` |
-| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
-| `textOnly` | `text-only` | (optional) position within group | `boolean` | `undefined` |
-| `width` | `width` | (optional) Segment width set to ensure that all segments have the same width | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ---------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------- | ------------------ |
+| `adjacentSiblings` | `adjacent-siblings` | | `"left" \| "leftright" \| "right"` | `undefined` |
+| `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'` |
+| `ariaLabelSegment` | `aria-label-segment` | (optional) aria-label attribute needed for icon-only segments | `string` | `undefined` |
+| `ariaLangDeselected` | `aria-lang-deselected` | (optional) translation of 'deselected | `string` | `'deselected'` |
+| `ariaLangSelected` | `aria-lang-selected` | (optional) translation of 'selected | `string` | `'selected'` |
+| `disabled` | `disabled` | (optional) If `true`, the segment is disabled | `boolean` | `false` |
+| `hasIcon` | `has-icon` | (optional) position within group | `boolean` | `undefined` |
+| `iconOnly` | `icon-only` | (optional) position within group | `boolean` | `undefined` |
+| `position` | `position` | (optional) position within group | `number` | `undefined` |
+| `segmentId` | `segment-id` | (optional) segment's id | `string` | `'segment-' + i++` |
+| `selected` | `selected` | (optional) If `true`, the segment is selected | `boolean` | `false` |
+| `selectedIndex` | `selected-index` | (optional) the index of the currently selected segment in the segmented-button | `string` | `undefined` |
+| `size` | `size` | (optional) The size of the segment | `"large" \| "medium" \| "small"` | `'small'` |
+| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
+| `textOnly` | `text-only` | (optional) position within group | `boolean` | `undefined` |
+| `width` | `width` | (optional) Segment width set to ensure that all segments have the same width | `string` | `undefined` |
## Events
diff --git a/packages/components/src/components/segment/segment.tsx b/packages/components/src/components/segment/segment.tsx
index c2daf67c0c..67b45ffa82 100644
--- a/packages/components/src/components/segment/segment.tsx
+++ b/packages/components/src/components/segment/segment.tsx
@@ -38,7 +38,7 @@ export class Segment {
/** (optional) If `true`, the segment is disabled */
@Prop() disabled?: boolean = false;
/** (optional) segment's id */
- @Prop({ reflect: true, mutable: true }) segmentId?: string;
+ @Prop({ reflect: true }) segmentId?: string = 'segment-' + i++;
/** (optional) aria-label attribute needed for icon-only segments */
@Prop() ariaLabelSegment: string;
/** (optional) Segment width set to ensure that all segments have the same width */
@@ -84,13 +84,10 @@ export class Segment {
async setFocus() {
this.focusableElement.focus();
}
-
componentWillLoad() {
- if (this.segmentId == null) {
- this.segmentId = 'segment-' + i++;
- }
+ this.handleIcon();
}
- componentDidUpdate() {
+ componentWillUpdate() {
this.handleIcon();
}
diff --git a/packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap b/packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap
index 41c565086d..82e5bc5170 100644
--- a/packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap
+++ b/packages/components/src/components/segmented-button/__snapshots__/segmented-button.spec.ts.snap
@@ -3,7 +3,7 @@
exports[`SegmentedButton should match selected button snapshot 1`] = `
-
+
@@ -19,7 +19,7 @@ exports[`SegmentedButton should match selected button snapshot 1`] = `
exports[`SegmentedButton should match standard snapshot 1`] = `
-