diff --git a/apps/components-e2e/src/components/context-dialog/context-dialog.html b/apps/components-e2e/src/components/context-dialog/context-dialog.html index 160cf37b76..715db1c1e2 100644 --- a/apps/components-e2e/src/components/context-dialog/context-dialog.html +++ b/apps/components-e2e/src/components/context-dialog/context-dialog.html @@ -4,7 +4,7 @@

Some awesome content

diff --git a/apps/dev/src/context-dialog/context-dialog-demo.component.html b/apps/dev/src/context-dialog/context-dialog-demo.component.html index ff65e2f4fe..3bb96a8ff2 100644 --- a/apps/dev/src/context-dialog/context-dialog-demo.component.html +++ b/apps/dev/src/context-dialog/context-dialog-demo.component.html @@ -1,6 +1,6 @@ diff --git a/apps/dev/src/menu/menu-demo.html b/apps/dev/src/menu/menu-demo.html index cbbc8fde76..1234ff63ee 100644 --- a/apps/dev/src/menu/menu-demo.html +++ b/apps/dev/src/menu/menu-demo.html @@ -33,7 +33,7 @@ diff --git a/components/context-dialog/README.md b/components/context-dialog/README.md index d7c07a0f51..c2cc510952 100644 --- a/components/context-dialog/README.md +++ b/components/context-dialog/README.md @@ -21,14 +21,14 @@ class MyModule {} ## Inputs -| Name | Type | Default | Description | -| ------------------------- | ---------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- | -| `tabIndex` | `number` | `0` | Gets and sets the tabIndex on the context dialog. Inherited by mixinTabIndex. | -| `disabled` | `boolean` | `false` | Gets and sets the disabled property on the context dialog. Inherited by mixinDisabled. | -| `aria-label` | `string` | `undefined` | ARIA label of the context dialog trigger button. | -| `aria-labelledby` | `string` | `undefined` | ARIA reference to a label describing the context-dialog. | -| `aria-label-close-button` | `string` | | ARIA label of the context dialog close button. | -| `overlayPanelClass` | `string | string[] | Set | { [key: string]: any }` | | Custom css classes to add to the overlay panel element. Can be used to scope styling within the overlay | +| Name | Type | Default | Description | +| ------------------- | ---------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- | +| `tabIndex` | `number` | `0` | Gets and sets the tabIndex on the context dialog. Inherited by mixinTabIndex. | +| `disabled` | `boolean` | `false` | Gets and sets the disabled property on the context dialog. Inherited by mixinDisabled. | +| `aria-label` | `string` | `undefined` | ARIA label of the context dialog trigger button. | +| `aria-labelledby` | `string` | `undefined` | ARIA reference to a label describing the context-dialog. | +| `ariaLabelClose` | `string` | | ARIA label of the context dialog close button. | +| `overlayPanelClass` | `string | string[] | Set | { [key: string]: any }` | | Custom css classes to add to the overlay panel element. Can be used to scope styling within the overlay | To make our components accessible it is obligatory to provide either an `aria-label` or `aria-labelledby`. @@ -56,8 +56,8 @@ To make our components accessible it is obligatory to provide either an ## Accessibility Context dialogs should be given a meaningful label via `aria-label` for the open -trigger and via `aria-label-close-button` for the close trigger, because the -buttons do not contain text. +trigger and via `ariaLabelClose` for the close trigger, because the buttons do +not contain text. ## States diff --git a/components/context-dialog/src/context-dialog.spec.ts b/components/context-dialog/src/context-dialog.spec.ts index 29a200cd7e..dd09bcd1bf 100644 --- a/components/context-dialog/src/context-dialog.spec.ts +++ b/components/context-dialog/src/context-dialog.spec.ts @@ -366,7 +366,7 @@ describe('DtContextDialog', () => { ` must contain at least one ``. | | `dt-expandable-trigger-is-button` | The trigger of an expandable panel must always be a button element. | diff --git a/libs/examples/src/context-dialog/context-dialog-actions-example/context-dialog-actions-example.html b/libs/examples/src/context-dialog/context-dialog-actions-example/context-dialog-actions-example.html index e88810d133..23a0f442e5 100644 --- a/libs/examples/src/context-dialog/context-dialog-actions-example/context-dialog-actions-example.html +++ b/libs/examples/src/context-dialog/context-dialog-actions-example/context-dialog-actions-example.html @@ -5,7 +5,7 @@ diff --git a/libs/examples/src/context-dialog/context-dialog-custom-icon-example/context-dialog-custom-icon-example.html b/libs/examples/src/context-dialog/context-dialog-custom-icon-example/context-dialog-custom-icon-example.html index 849e658cf7..f63a60e6d4 100644 --- a/libs/examples/src/context-dialog/context-dialog-custom-icon-example/context-dialog-custom-icon-example.html +++ b/libs/examples/src/context-dialog/context-dialog-custom-icon-example/context-dialog-custom-icon-example.html @@ -8,7 +8,7 @@

Your dashboard "real user monitoring" diff --git a/libs/examples/src/context-dialog/context-dialog-dark-example/context-dialog-dark-example.html b/libs/examples/src/context-dialog/context-dialog-dark-example/context-dialog-dark-example.html index aea6ab79d1..8155081c02 100644 --- a/libs/examples/src/context-dialog/context-dialog-dark-example/context-dialog-dark-example.html +++ b/libs/examples/src/context-dialog/context-dialog-dark-example/context-dialog-dark-example.html @@ -1,7 +1,7 @@

@@ -16,7 +16,7 @@

Your dashboard "real user monitoring" diff --git a/libs/examples/src/context-dialog/context-dialog-default-example/context-dialog-default-example.html b/libs/examples/src/context-dialog/context-dialog-default-example/context-dialog-default-example.html index a2ea916fc3..87825519da 100644 --- a/libs/examples/src/context-dialog/context-dialog-default-example/context-dialog-default-example.html +++ b/libs/examples/src/context-dialog/context-dialog-default-example/context-dialog-default-example.html @@ -1,6 +1,6 @@

Your dashboard "real user monitoring" is only visible to you

diff --git a/libs/examples/src/context-dialog/context-dialog-header-example/context-dialog-header-example.html b/libs/examples/src/context-dialog/context-dialog-header-example/context-dialog-header-example.html index 038004fb1c..308a42123f 100644 --- a/libs/examples/src/context-dialog/context-dialog-header-example/context-dialog-header-example.html +++ b/libs/examples/src/context-dialog/context-dialog-header-example/context-dialog-header-example.html @@ -1,6 +1,6 @@ Analyse diff --git a/libs/examples/src/context-dialog/context-dialog-interactive-example/context-dialog-interactive-example.html b/libs/examples/src/context-dialog/context-dialog-interactive-example/context-dialog-interactive-example.html index 345b1fa72a..1b62136539 100644 --- a/libs/examples/src/context-dialog/context-dialog-interactive-example/context-dialog-interactive-example.html +++ b/libs/examples/src/context-dialog/context-dialog-interactive-example/context-dialog-interactive-example.html @@ -13,7 +13,7 @@ #interactiveDialog [disabled]="interactiveDialogDisabled" aria-label="Show more details" - aria-label-close-button="Close context dialog" + ariaLabelClose="Close context dialog" >

Your dashboard "real user monitoring" diff --git a/libs/examples/src/context-dialog/context-dialog-previous-focus-example/context-dialog-previous-focus-example.html b/libs/examples/src/context-dialog/context-dialog-previous-focus-example/context-dialog-previous-focus-example.html index dfb91f7466..8893bdad51 100644 --- a/libs/examples/src/context-dialog/context-dialog-previous-focus-example/context-dialog-previous-focus-example.html +++ b/libs/examples/src/context-dialog/context-dialog-previous-focus-example/context-dialog-previous-focus-example.html @@ -4,7 +4,7 @@

Close me to return the focus to the "Open" button

diff --git a/libs/examples/src/copy-to-clipboard/copy-to-clipboard-context-example/copy-to-clipboard-context-example.html b/libs/examples/src/copy-to-clipboard/copy-to-clipboard-context-example/copy-to-clipboard-context-example.html index 1fe9532f47..4327d6bee0 100644 --- a/libs/examples/src/copy-to-clipboard/copy-to-clipboard-context-example/copy-to-clipboard-context-example.html +++ b/libs/examples/src/copy-to-clipboard/copy-to-clipboard-context-example/copy-to-clipboard-context-example.html @@ -2,7 +2,7 @@ #contextdialog color="cta" aria-label="Show more actions" - aria-label-close-button="Close context dialog" + ariaLabelClose="Close context dialog" > diff --git a/libs/examples/src/tree-table/tree-table-async-show-more-example/tree-table-async-show-more-example.html b/libs/examples/src/tree-table/tree-table-async-show-more-example/tree-table-async-show-more-example.html index 691fdd0d9e..384e1de165 100644 --- a/libs/examples/src/tree-table/tree-table-async-show-more-example/tree-table-async-show-more-example.html +++ b/libs/examples/src/tree-table/tree-table-async-show-more-example/tree-table-async-show-more-example.html @@ -100,7 +100,7 @@ {{ row.name }} context dialog diff --git a/libs/examples/src/tree-table/tree-table-default-example/tree-table-default-example.html b/libs/examples/src/tree-table/tree-table-default-example/tree-table-default-example.html index b06a96b4ee..df42200071 100644 --- a/libs/examples/src/tree-table/tree-table-default-example/tree-table-default-example.html +++ b/libs/examples/src/tree-table/tree-table-default-example/tree-table-default-example.html @@ -77,7 +77,7 @@ {{ row.name }} context dialog diff --git a/libs/examples/src/tree-table/tree-table-problem-indicator-example/tree-table-problem-indicator-example.html b/libs/examples/src/tree-table/tree-table-problem-indicator-example/tree-table-problem-indicator-example.html index 1c77583fb0..54e409fc6f 100644 --- a/libs/examples/src/tree-table/tree-table-problem-indicator-example/tree-table-problem-indicator-example.html +++ b/libs/examples/src/tree-table/tree-table-problem-indicator-example/tree-table-problem-indicator-example.html @@ -60,7 +60,7 @@ {{ row.name }} context dialog diff --git a/tools/linting/src/rules/dtContextDialogAltTextRule.ts b/tools/linting/src/rules/dtContextDialogAltTextRule.ts index f06e70d626..b66e9d26aa 100644 --- a/tools/linting/src/rules/dtContextDialogAltTextRule.ts +++ b/tools/linting/src/rules/dtContextDialogAltTextRule.ts @@ -62,7 +62,8 @@ class DtContextDialogVisitor extends BasicTemplateAstVisitor { if (isElementWithName(element, 'dt-context-dialog')) { if ( hasTextContentAlternative(element, 'aria-label') && - hasTextContentAlternative(element, 'aria-label-close-button') + (hasTextContentAlternative(element, 'aria-label-close-button') || + hasTextContentAlternative(element, 'ariaLabelClose')) ) { return; } @@ -70,7 +71,7 @@ class DtContextDialogVisitor extends BasicTemplateAstVisitor { addFailure( this, element, - 'A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the aria-label-close-button input.', + 'A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the ariaLabelClose input.', ); } } @@ -81,7 +82,7 @@ class DtContextDialogVisitor extends BasicTemplateAstVisitor { * the open and the close button of a context dialog. * * The following example passes the lint checks: - * + * *

Your dashboard "real user monitoring" is only visible to you

*
* diff --git a/tools/linting/src/test/rules/dt-context-dialog-alt-text-rule/test.ts.lint b/tools/linting/src/test/rules/dt-context-dialog-alt-text-rule/test.ts.lint index 2076f27889..78345cdfe0 100644 --- a/tools/linting/src/test/rules/dt-context-dialog-alt-text-rule/test.ts.lint +++ b/tools/linting/src/test/rules/dt-context-dialog-alt-text-rule/test.ts.lint @@ -5,29 +5,29 @@ @Component({ template: ` - +

Your dashboard "real user monitoring" is only visible to you

- - ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the aria-label-close-button input.] + + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the ariaLabelClose input.]

Your dashboard "real user monitoring" is only visible to you

- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the aria-label-close-button input.] + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the ariaLabelClose input.]

Your dashboard "real user monitoring" is only visible to you

- ~~~~~~~~~~~~~~~~~~~ [A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the aria-label-close-button input.] + ~~~~~~~~~~~~~~~~~~~ [A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the ariaLabelClose input.]

Your dashboard "real user monitoring" is only visible to you

- +

Your dashboard "real user monitoring"
is only visible to you

@@ -35,7 +35,7 @@

Click button to open the context dialog.

- +

Your dashboard "real user monitoring"
is only visible to you

@@ -43,7 +43,7 @@ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [A context dialog trigger must have an aria-label or aria-labelledby attribute.] - +

Your dashboard "real user monitoring"
is only visible to you

`,