From 691042f10ca0c34fd3f4ae571ece2d8788562d91 Mon Sep 17 00:00:00 2001
From: Thomas Heller <thomas.heller@dynatrace.com>
Date: Thu, 6 Feb 2020 16:12:15 +0100
Subject: [PATCH] fix(context-dialog): Fixes an issue with aria label name
 clashes for a11y.

Specific inputs like `aria-label-close-button` are not allowed based on
the aria specification. Only known aria attributes are allowed to be
used. We have renamed the inputs in question to their camelcased
version, but kept the old ones for compatibility for now.
With version 7.0. we sould remove the kebap-cased inputs.

Fixes #79
---
 .../context-dialog/context-dialog.html        |  2 +-
 .../context-dialog-demo.component.html        |  2 +-
 apps/dev/src/menu/menu-demo.html              |  2 +-
 components/context-dialog/README.md           | 20 ++++++++--------
 .../context-dialog/src/context-dialog.spec.ts |  2 +-
 .../context-dialog/src/context-dialog.ts      | 24 ++++++++++++++++---
 documentation/linting.md                      |  2 +-
 .../context-dialog-actions-example.html       |  2 +-
 .../context-dialog-custom-icon-example.html   |  2 +-
 .../context-dialog-dark-example.html          |  4 ++--
 .../context-dialog-default-example.html       |  2 +-
 .../context-dialog-header-example.html        |  2 +-
 .../context-dialog-interactive-example.html   |  2 +-
 ...context-dialog-previous-focus-example.html |  2 +-
 .../copy-to-clipboard-context-example.html    |  2 +-
 .../menu-within-context-dialog-example.html   |  2 +-
 .../tree-table-async-show-more-example.html   |  2 +-
 .../tree-table-default-example.html           |  2 +-
 .../tree-table-problem-indicator-example.html |  2 +-
 .../src/rules/dtContextDialogAltTextRule.ts   |  7 +++---
 .../test.ts.lint                              | 16 ++++++-------
 21 files changed, 61 insertions(+), 42 deletions(-)

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 @@
   <section>
     <dt-context-dialog
       id="context-dialog"
-      aria-label-close-button="close"
+      ariaLabelClose="close"
       [disabled]="disabled"
     >
       <p>Some awesome content</p>
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 @@
 <dt-context-dialog
   aria-label="Open context dialog"
-  aria-label-close-button="Close context dialog"
+  ariaLabelClose="Close context dialog"
   [overlayPanelClass]="panel"
 >
   <button dt-button>First button</button>
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 @@
 <dt-context-dialog
   class="demo-menu-context-dialog"
   aria-label="Show more details"
-  aria-label-close-button="Close context dialog"
+  ariaLabelClose="Close context dialog"
 >
   <dt-menu aria-label="Demo Menu" class="demo-menu">
     <dt-menu-group label="Dashboards & reports">
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<string> | { [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<string> | { [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', () => {
     <dt-context-dialog
       #dialog
       [aria-label]="ariaLabel"
-      [aria-label-close-button]="ariaLabelClose"
+      [ariaLabelClose]="ariaLabelClose"
       [tabIndex]="tabIndexOverride"
       [disabled]="disabled"
       [overlayPanelClass]="panelClass"
diff --git a/components/context-dialog/src/context-dialog.ts b/components/context-dialog/src/context-dialog.ts
index c350d5f8a0..cf1e8f94d6 100644
--- a/components/context-dialog/src/context-dialog.ts
+++ b/components/context-dialog/src/context-dialog.ts
@@ -149,10 +149,28 @@ export class DtContextDialog extends _DtContextDialogMixinBase
 
   /**
    * Aria label of the context-dialog's close button.
-   * @deprecated Made obsolete without the closing button
-   * @breaking-change To be removed with 6.0.0.
+   * @deprecated `aria-label-close-button` does not conform with accessibility standards.
+   * Please use `ariaLabelClose` input instead.
+   * @breaking-change Will be removed in version 7.0.0
    */
-  @Input('aria-label-close-button') ariaLabelClose: string;
+  @Input('aria-label-close-button')
+  get depAriaLabelClose(): string {
+    return this._ariaLabelClose;
+  }
+  set depAriaLabelClose(value: string) {
+    this._ariaLabelClose = value;
+  }
+
+  /** Aria label of the context-dialog's close button. */
+  @Input()
+  get ariaLabelClose(): string {
+    return this._ariaLabelClose;
+  }
+  set ariaLabelClose(value: string) {
+    this._ariaLabelClose = value;
+  }
+  /** @internal Aria label of the context-dialog's close button. */
+  _ariaLabelClose: string;
 
   /** The custom class to add to the overlay panel element. Can be used to scope styling within the overlay */
   @Input() overlayPanelClass:
diff --git a/documentation/linting.md b/documentation/linting.md
index 57d29e36c2..154fb79662 100644
--- a/documentation/linting.md
+++ b/documentation/linting.md
@@ -19,7 +19,7 @@ preventing those errors:
 | `dt-card-no-empty`                      | A card must contain content apart from the predefined child components `dt-card-title`, `dt-card-subtitle`, `dt-card-icon`, `dt-card-title-actions` and `dt-card-footer-actions`.                                                                   |
 | `dt-checkbox-no-empty`                  | A checkbox must always contain text content or a component that renders text. If no content is given, an `aria-label` or `aria-labelledby` attribute is required.                                                                                   |
 | `dt-consumption-icon-alt-text`          | A `dt-consumption-icom` must always have an alternative text in form of an `aria-label` or an `aria-labelledby` attribute.                                                                                                                          |
-| `dt-context-dialog-alt-text`            | The open and the close button need additional attributes to provide text alternatives using the following inputs: `aria-label` and `aria-label-close-button`                                                                                        |
+| `dt-context-dialog-alt-text`            | The open and the close button need additional attributes to provide text alternatives using the following inputs: `aria-label` and `ariaLabelClose`                                                                                                 |
 | `dt-copy-to-clipboard-no-empty`         | The copy-to-clipboard component must always contain a `dt-copy-to-clipboard-label`, that is a direct child of `dt-copy-to-clipboard`.                                                                                                               |
 | `dt-empty-state-requires-item`          | The `<dt-empty-state>` must contain at least one `<dt-empty-state-item>`.                                                                                                                                                                           |
 | `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 @@
     <dt-card-title-actions>
       <dt-context-dialog
         aria-label="Show more actions"
-        aria-label-close-button="Close context dialog"
+        ariaLabelClose="Close context dialog"
       >
         <button dt-button variant="secondary">First button</button>
         <button dt-button variant="secondary">Second button</button>
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 @@
 <dt-context-dialog
   #dialog
   aria-label="Open context dialog"
-  aria-label-close-button="Close context dialog"
+  ariaLabelClose="Close context dialog"
 >
   <p>
     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 @@
 <div class="dt-example-dark" dtTheme=":dark">
   <dt-context-dialog
     aria-label="Show more actions"
-    aria-label-close-button="Close context dialog"
+    ariaLabelClose="Close context dialog"
   >
     <button dt-button variant="secondary">Edit</button>
   </dt-context-dialog>
@@ -16,7 +16,7 @@
   <dt-context-dialog
     #darkIcondialog
     aria-label="Open context dialog"
-    aria-label-close-button="Close context dialog"
+    ariaLabelClose="Close context dialog"
   >
     <p>
       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 @@
 <dt-context-dialog
   aria-label="Show more details"
-  aria-label-close-button="Close context dialog"
+  ariaLabelClose="Close context dialog"
 >
   <p>Your dashboard "real user monitoring" is only visible to you</p>
 </dt-context-dialog>
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 @@
 <dt-context-dialog
   aria-label="Show more actions"
-  aria-label-close-button="Close context dialog"
+  ariaLabelClose="Close context dialog"
 >
   <dt-context-dialog-header>
     <dt-context-dialog-header-title>Analyse</dt-context-dialog-header-title>
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"
   >
     <p>
       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 @@
 <dt-context-dialog
   color="cta"
   aria-label="Show more details"
-  aria-label-close-button="Close context dialog"
+  ariaLabelClose="Close context dialog"
 >
   <p>Close me to return the focus to the "Open" button</p>
   <button dt-button variant="secondary">Focused</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"
 >
   <dt-copy-to-clipboard (afterCopy)="contextdialog.close()">
     <input
diff --git a/libs/examples/src/menu/menu-within-context-dialog-example/menu-within-context-dialog-example.html b/libs/examples/src/menu/menu-within-context-dialog-example/menu-within-context-dialog-example.html
index 29036fb537..79da466b0d 100644
--- a/libs/examples/src/menu/menu-within-context-dialog-example/menu-within-context-dialog-example.html
+++ b/libs/examples/src/menu/menu-within-context-dialog-example/menu-within-context-dialog-example.html
@@ -1,6 +1,6 @@
 <dt-context-dialog
   aria-label="Show more details"
-  aria-label-close-button="Close context dialog"
+  ariaLabelClose="Close context dialog"
 >
   <dt-menu aria-label="Menu inside Popup Example">
     <dt-menu-group label="Dashboards & reports">
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 @@
         <dt-context-dialog
           #dialog
           aria-label="Show more data"
-          aria-label-close-button="Close context dialog"
+          ariaLabelClose="Close context dialog"
         >
           {{ row.name }} context dialog
         </dt-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 @@
       <dt-context-dialog
         #dialog
         aria-label="Show more data"
-        aria-label-close-button="Close context dialog"
+        ariaLabelClose="Close context dialog"
       >
         {{ row.name }} context dialog
       </dt-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 @@
       <dt-context-dialog
         #dialog
         aria-label="Show more data"
-        aria-label-close-button="Close context dialog"
+        ariaLabelClose="Close context dialog"
       >
         {{ row.name }} context dialog
       </dt-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:
- * <dt-context-dialog aria-label="Open more options" aria-label-close-button="Close context dialog">
+ * <dt-context-dialog aria-label="Open more options" ariaLabelClose="Close context dialog">
  *   <p>Your dashboard "real user monitoring" is only visible to you</p>
  * </dt-context-dialog>
  *
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: `
-  <dt-context-dialog aria-label="Open more options" aria-label-close-button="Close context dialog">
+  <dt-context-dialog aria-label="Open more options" ariaLabelClose="Close context dialog">
     <p>Your dashboard "real user monitoring" is only visible to you</p>
   </dt-context-dialog>
 
-  <dt-context-dialog aria-label-close-button="Close context dialog">
-  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  [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.]
+  <dt-context-dialog ariaLabelClose="Close context dialog">
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  [A context dialog must provide alternative texts for the open and the close buttons. Use the aria-label and the ariaLabelClose input.]
     <p>Your dashboard "real user monitoring" is only visible to you</p>
   </dt-context-dialog>
 
   <dt-context-dialog aria-label="Open more options">
-  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  [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.]
     <p>Your dashboard "real user monitoring" is only visible to you</p>
   </dt-context-dialog>
 
   <dt-context-dialog>
-  ~~~~~~~~~~~~~~~~~~~   [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.]
     <p>Your dashboard "real user monitoring" is only visible to you</p>
   </dt-context-dialog>
 
   <button dt-icon-button [dtContextDialogTrigger]="dialog" aria-label="Open context dialog">
     <dt-icon name="agent"></dt-icon>
   </button>
-  <dt-context-dialog #dialog aria-label="Open context dialog" aria-label-close-button="Close context dialog">
+  <dt-context-dialog #dialog aria-label="Open context dialog" ariaLabelClose="Close context dialog">
     <p>Your dashboard "real user monitoring"<br> is only visible to you</p>
   </dt-context-dialog>
 
@@ -35,7 +35,7 @@
     <dt-icon name="agent"></dt-icon>
   </button>
   <p id="description">Click button to open the context dialog.</p>
-  <dt-context-dialog #dialog aria-label="Open context dialog" aria-label-close-button="Close context dialog">
+  <dt-context-dialog #dialog aria-label="Open context dialog" ariaLabelClose="Close context dialog">
     <p>Your dashboard "real user monitoring"<br> is only visible to you</p>
   </dt-context-dialog>
 
@@ -43,7 +43,7 @@
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  [A context dialog trigger must have an aria-label or aria-labelledby attribute.]
     <dt-icon name="agent"></dt-icon>
   </button>
-  <dt-context-dialog #dialog aria-label="Open context dialog" aria-label-close-button="Close context dialog">
+  <dt-context-dialog #dialog aria-label="Open context dialog" ariaLabelClose="Close context dialog">
     <p>Your dashboard "real user monitoring"<br> is only visible to you</p>
   </dt-context-dialog>
   `,