fix(chart, inline-editor, pagination, context-dialog, consumption, to…

…ggle-button-group, tag-list, empty-state, cta-card, table, filter-field): Fixes an issue with aria label name clashes for a11y.

Specific inputs like `aria-label-button-close` 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 #526
Fixes #79

apps/components-e2e/src/components/chart/selection-area/range/range.html

@@ -1,9 +1,9 @@
 <dt-chart [options]="options" [series]="series$ | async">
   <dt-chart-range
-    aria-label-close="Close the selection"
-    aria-label-left-handle="The left handle to update the selection"
-    aria-label-right-handle="The right handle to update the selection"
-    aria-label-selected-area="The selected time-frame"
+    ariaLabelClose="Close the selection"
+    ariaLabelLeftHandle="The left handle to update the selection"
+    ariaLabelRightHandle="The right handle to update the selection"
+    ariaLabelSelectedArea="The selected time-frame"
     (valid)="rangeValidChanges($event)"
     (valueChanges)="valueChanges($event)"
     (closed)="closed()"

apps/components-e2e/src/components/chart/selection-area/selection-area.html

@@ -1,14 +1,14 @@
 <dt-chart [options]="options" [series]="series$ | async">
   <dt-chart-timestamp
-    aria-label-close="Close the selection"
+    ariaLabelClose="Close the selection"
     (closed)="closed()"
     (valueChanges)="valueChanges($event)"
   ></dt-chart-timestamp>
   <dt-chart-range
-    aria-label-close="Close the selection"
-    aria-label-left-handle="The left handle to update the selection"
-    aria-label-right-handle="The right handle to update the selection"
-    aria-label-selected-area="The selected time-frame"
+    ariaLabelClose="Close the selection"
+    ariaLabelLeftHandle="The left handle to update the selection"
+    ariaLabelRightHandle="The right handle to update the selection"
+    ariaLabelSelectedArea="The selected time-frame"
     (valid)="rangeValidChanges($event)"
     (valueChanges)="valueChanges($event)"
     (closed)="closed()"

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>

apps/components-e2e/src/components/drawer/drawer.html

@@ -40,10 +40,10 @@
         </dt-chart-heatfield>
 
         <dt-chart-range
-          aria-label-close="Close the selection"
-          aria-label-left-handle="The left handle to update the selection"
-          aria-label-right-handle="The right handle to update the selection"
-          aria-label-selected-area="The selected time-frame"
+          ariaLabelClose="Close the selection"
+          ariaLabelLeftHandle="The left handle to update the selection"
+          ariaLabelRightHandle="The right handle to update the selection"
+          ariaLabelSelectedArea="The selected time-frame"
           (valid)="onTimeframeValidChanges($event)"
           (valueChanges)="onTimeframeChanges($event)"
           (closed)="closed()"

apps/demos/src/barista-examples.a11y.ts

@@ -21,13 +21,35 @@ const rules = require('../rules.a11y.json');
 const BASEURL = `http://localhost:4200/`;
 
 /** Blacklisted default examples */
-const BLACKLIST = [
-  'chart-selection-area-default-example',
-  'chart-stream-example',
-  'chart-loading-example',
+const BLACKLIST: string[] = [
+  // Disabled because the select in that example fails the a11y test
+  // because a `listbox` role needs to contain `list` or `option` items
+  // Since these are projected into an overlay, this is tricky.
+  // https://github.com/dynatrace-oss/barista/issues/568
+  'drawer-dynamic-example',
+  'select-complex-value-example',
+  'select-default-example',
+  'select-disabled-example',
+  'select-form-field-example',
+  'select-forms-example',
+  'select-groups-example',
+  'select-value-example',
+  'select-with-icons-example',
+
+  // Disabled the filter field tests, because their `combobox` role does not
+  // fulfil all requirements of a combobox.
+  // https://github.com/dynatrace-oss/barista/issues/567
+  'filter-field-async-example',
+  'filter-field-clearall-example',
+  'filter-field-default-example',
+  'filter-field-disabled-example',
+  'filter-field-distinct-example',
+  'filter-field-programmatic-filters-example',
+  'filter-field-readonly-non-editable-tags-example',
+  'filter-field-unique-example',
 ];
 
-DT_DEMOS_EXAMPLE_NAV_ITEMS.slice(0, 10).forEach(component => {
+DT_DEMOS_EXAMPLE_NAV_ITEMS.forEach(component => {
   fixture(component.name);
 
   component.examples

apps/dev/src/chart/chart-demo.component.html

@@ -67,10 +67,10 @@
   </dt-chart-heatfield>
 
   <dt-chart-range
-    aria-label-close="Close the selection"
-    aria-label-left-handle="The left handle to update the selection"
-    aria-label-right-handle="The right handle to update the selection"
-    aria-label-selected-area="The selected time-frame"
+    ariaLabelClose="Close the selection"
+    ariaLabelLeftHandle="The left handle to update the selection"
+    ariaLabelRightHandle="The right handle to update the selection"
+    ariaLabelSelectedArea="The selected time-frame"
     (valid)="onTimeframeValidChanges($event)"
     (valueChanges)="onTimeframeChanges($event)"
     (closed)="closed()"

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>

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">

components/chart/README.md

@@ -174,21 +174,21 @@ handles on the left and right side of the range.
 
 #### Accessibility
 
-You have to provide meaningful labels to the range via
-`aria-label-selected-area`, `aria-label-left-handle`, `aria-label-right-handle`
-and `aria-label-close`, to meet our accessibility standards.
+You have to provide meaningful labels to the range via `ariaLabelSelectedArea`,
+`ariaLabelLeftHandle`, `ariaLabelRightHandle` and `ariaLabelClose`, to meet our
+accessibility standards.
 
 #### Inputs
 
-| Name                       | Type               | Default  | Description                                                                                                               |
-| -------------------------- | ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `min`                      | `number`           | `300000` | The minimum range that can be created in milliseconds, by default the minimum range is 5 minutes.                         |
-| `max`                      | `number | null`    | `null`   | The maximum range that can be created in a time format. If not set, the range will be capped at the borders of the chart. |
-| `value`                    | `[number, number]` | `[0,0]`  | The time frame on the chart's x-axis where the range should be placed.                                                    |
-| `aria-label-selected-area` | `string`           | `''`     | Aria label of the selected area that is created.                                                                          |
-| `aria-label-left-handle`   | `string`           | `''`     | Aria label of the left handle of the selected area that can resize the selected frame.                                    |
-| `aria-label-right-handle`  | `string`           | `''`     | Aria label of the right handle of the selected area that can resize the selected frame.                                   |
-| `aria-label-close`         | `string`           | `''`     | Aria label of the close button inside the overlay.                                                                        |
+| Name                    | Type               | Default  | Description                                                                                                               |
+| ----------------------- | ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `min`                   | `number`           | `300000` | The minimum range that can be created in milliseconds, by default the minimum range is 5 minutes.                         |
+| `max`                   | `number | null`    | `null`   | The maximum range that can be created in a time format. If not set, the range will be capped at the borders of the chart. |
+| `value`                 | `[number, number]` | `[0,0]`  | The time frame on the chart's x-axis where the range should be placed.                                                    |
+| `ariaLabelSelectedArea` | `string`           | `''`     | Aria label of the selected area that is created.                                                                          |
+| `ariaLabelLeftHandle`   | `string`           | `''`     | Aria label of the left handle of the selected area that can resize the selected frame.                                    |
+| `ariaLabelRightHandle`  | `string`           | `''`     | Aria label of the right handle of the selected area that can resize the selected frame.                                   |
+| `ariaLabelClose`        | `string`           | `''`     | Aria label of the close button inside the overlay.                                                                        |
 
 #### Outputs
 
@@ -218,16 +218,16 @@ in a chart.
 
 #### Accessibility
 
-You have to provide meaningful labels to the timestamp via `aria-label-selected`
-and `aria-label-close`, to meet our accessibility standards.
+You have to provide meaningful labels to the timestamp via `ariaLabelSelected`
+and `ariaLabelClose`, to meet our accessibility standards.
 
 #### Inputs
 
-| Name                  | Type     | Default | Description                                                           |
-| --------------------- | -------- | ------- | --------------------------------------------------------------------- |
-| `value`               | `number` | `0`     | The value on the chart's x-axis where the timestamp should be placed. |
-| `aria-label-selected` | `string` | `''`    | Aria label for the selected point in time.                            |
-| `aria-label-close`    | `string` | `''`    | Aria label of the close button inside the overlay.                    |
+| Name                | Type     | Default | Description                                                           |
+| ------------------- | -------- | ------- | --------------------------------------------------------------------- |
+| `value`             | `number` | `0`     | The value on the chart's x-axis where the timestamp should be placed. |
+| `ariaLabelSelected` | `string` | `''`    | Aria label for the selected point in time.                            |
+| `ariaLabelClose`    | `string` | `''`    | Aria label of the close button inside the overlay.                    |
 
 #### Outputs
 

components/chart/src/range/range.html

@@ -5,7 +5,7 @@
     dt-icon-button
     variant="secondary"
     (click)="_handleOverlayClose()"
-    [attr.aria-label]="ariaLabelClose"
+    [attr.aria-label]="_ariaLabelClose"
     cdkFocusInitial
   >
     <dt-icon name="abort"></dt-icon>
@@ -22,15 +22,15 @@
   aria-orientation="horizontal"
   [attr.aria-valuemin]="_minValue"
   [attr.aria-valuemax]="_maxValue"
-  [attr.aria-label]="ariaLabelSelectedArea"
+  [attr.aria-label]="_ariaLabelSelectedArea"
   (keydown)="_handleKeyDown($event, 'selected-area')"
 >
   <button
     class="dt-chart-left-handle"
     aria-role="slider"
     [attr.aria-valuemin]="_minValue"
     [attr.aria-valuemax]="_maxValue"
-    [attr.aria-label]="ariaLabelLeftHandle"
+    [attr.aria-label]="_ariaLabelLeftHandle"
     (keydown)="_handleKeyDown($event, 'left')"
     (mousedown)="_dragHandle($event, 'left')"
     (touchstart)="_dragHandle($event, 'left')"
@@ -43,7 +43,7 @@
     aria-role="slider"
     [attr.aria-valuemin]="_minValue"
     [attr.aria-valuemax]="_maxValue"
-    [attr.aria-label]="ariaLabelRightHandle"
+    [attr.aria-label]="_ariaLabelRightHandle"
     (keydown)="_handleKeyDown($event, 'right')"
     (mousedown)="_dragHandle($event, 'right')"
     (touchstart)="_dragHandle($event, 'right')"

components/chart/src/range/range.spec.ts

@@ -433,10 +433,10 @@ export class RangeTestComponent {}
   template: `
     <dt-chart-range
       [value]="values"
-      aria-label-close="CLOSE"
-      aria-label-left-handle="LEFT"
-      aria-label-right-handle="RIGHT"
-      aria-label-selected-area="SELECTED"
+      ariaLabelClose="CLOSE"
+      ariaLabelLeftHandle="LEFT"
+      ariaLabelRightHandle="RIGHT"
+      ariaLabelSelectedArea="SELECTED"
     ></dt-chart-range>
   `,
 })

components/chart/src/range/range.ts

@@ -84,20 +84,102 @@ export class RangeStateChangedEvent {
   },
 })
 export class DtChartRange implements AfterViewInit, OnDestroy {
+  /**
+   * Aria label for the close button in the overlay.
+   * @deprecated `aria-label-close` 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')
+  get depAriaLabelClose(): string {
+    return this._ariaLabelClose;
+  }
+  set depAriaLabelClose(value: string) {
+    this._ariaLabelClose = value;
+  }
+
   /** Aria label for the close button in the overlay */
-  @Input('aria-label-close') ariaLabelClose = ARIA_DEFAULT_CLOSE_LABEL;
+  @Input()
+  get ariaLabelClose(): string {
+    return this._ariaLabelClose;
+  }
+  set ariaLabelClose(value: string) {
+    this._ariaLabelClose = value;
+  }
+  /** @internal Aria label value for the close button of the overlay */
+  _ariaLabelClose = ARIA_DEFAULT_CLOSE_LABEL;
 
-  /** Aria label for the left handle */
+  /**
+   * Aria label for the left handle
+   * @deprecated `aria-label-left-handle` does not conform with accessibility standards.
+   * Please use `ariaLabelLeftHandle` input instead.
+   * @breaking-change Will be removed in version 7.0.0
+   */
   @Input('aria-label-left-handle')
-  ariaLabelLeftHandle = ARIA_DEFAULT_LEFT_HANDLE_LABEL;
+  get depAriaLabelLeftHandle(): string {
+    return this._ariaLabelLeftHandle;
+  }
+  set depAriaLabelLeftHandle(value: string) {
+    this._ariaLabelLeftHandle = value;
+  }
+  /** Aria label for the left handle. */
+  @Input()
+  get ariaLabelLeftHandle(): string {
+    return this._ariaLabelLeftHandle;
+  }
+  set ariaLabelLeftHandle(value: string) {
+    this._ariaLabelLeftHandle = value;
+  }
+  /** @internal Aria label value for the left handle of the range */
+  _ariaLabelLeftHandle = ARIA_DEFAULT_LEFT_HANDLE_LABEL;
 
-  /** Aria label for the right handle */
+  /**
+   * Aria label for the right handle
+   * @deprecated `aria-label-right-handle` does not conform with accessibility standards.
+   * Please use `ariaLabelRightHandle` input instead.
+   * @breaking-change Will be removed in version 7.0.0
+   */
   @Input('aria-label-right-handle')
-  ariaLabelRightHandle = ARIA_DEFAULT_RIGHT_HANDLE_LABEL;
+  get depAriaLabelRightHandle(): string {
+    return this._ariaLabelClose;
+  }
+  set depAriaLabelRightHandle(value: string) {
+    this._ariaLabelClose = value;
+  }
+  /** Aria label for the right handle. */
+  @Input()
+  get ariaLabelRightHandle(): string {
+    return this._ariaLabelRightHandle;
+  }
+  set ariaLabelRightHandle(value: string) {
+    this._ariaLabelRightHandle = value;
+  }
+  /** @internal Aria label value for the right handle of the range */
+  _ariaLabelRightHandle = ARIA_DEFAULT_RIGHT_HANDLE_LABEL;
 
-  /** Aria label for the selected area */
+  /**
+   * Aria label for the selected area
+   * @deprecated `aria-label-selected-area` does not conform with accessibility standards.
+   * Please use `ariaLabelSelectedArea` input instead.
+   * @breaking-change Will be removed in version 7.0.0
+   */
   @Input('aria-label-selected-area')
-  ariaLabelSelectedArea = ARIA_DEFAULT_SELECTED_AREA_LABEL;
+  get depAriaLabelSelectedArea(): string {
+    return this._ariaLabelSelectedArea;
+  }
+  set depAriaLabelSelectedArea(value: string) {
+    this._ariaLabelSelectedArea = value;
+  }
+  /** Aria label for the left handle. */
+  @Input()
+  get ariaLabelSelectedArea(): string {
+    return this._ariaLabelSelectedArea;
+  }
+  set ariaLabelSelectedArea(value: string) {
+    this._ariaLabelSelectedArea = value;
+  }
+  /** @internal Aria label value for the selected area in the range */
+  _ariaLabelSelectedArea = ARIA_DEFAULT_SELECTED_AREA_LABEL;
 
   /** The minimum range that can be created, by default the minimum range is 5 minutes  */
   @Input()

components/chart/src/selection-area/selection-area.spec.ts

@@ -352,7 +352,7 @@ export class TestChart {
       <dt-chart-timestamp></dt-chart-timestamp>
       <dt-chart-range
         value="[1370304002000, 1370304005000]"
-        aria-label-close="CLOSE"
+        ariaLabelClose="CLOSE"
       ></dt-chart-range>
     </dt-chart>
   `,

components/chart/src/timestamp/timestamp.html

@@ -5,7 +5,7 @@
     dt-icon-button
     variant="secondary"
     (click)="_handleOverlayClose()"
-    [attr.aria-label]="ariaLabelClose"
+    [attr.aria-label]="_ariaLabelClose"
     cdkFocusInitial
   >
     <dt-icon name="abort"></dt-icon>
@@ -24,6 +24,6 @@
   [attr.aria-valuemax]="_maxValue"
   [attr.aria-valuetext]="value | date: 'MMM d, HH:mm'"
   [attr.aria-valuenow]="value"
-  [attr.aria-label]="ariaLabelSelected"
+  [attr.aria-label]="_ariaLabelSelected"
   (keydown)="_handleKeyUp($event)"
 ></div>

components/chart/src/timestamp/timestamp.spec.ts

@@ -426,8 +426,8 @@ export class TimestampTestComponent {
   template: `
     <dt-chart-timestamp
       [value]="value"
-      aria-label-close="CLOSE"
-      aria-label-selected="SELECTED"
+      ariaLabelClose="CLOSE"
+      ariaLabelSelected="SELECTED"
     ></dt-chart-timestamp>
   `,
 })