fix(pagination): Fixes an issue with aria label name clashes for a11y.

Specific inputs like `aria-label-next` and `aria-label-current` 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

components/pagination/README.md

@@ -33,17 +33,17 @@ event will be fired that can be used to update any associated data view.
 
 ## Inputs
 
-| Name                  | Type     | Default                       | Description                                   |
-| --------------------- | -------- | ----------------------------- | --------------------------------------------- |
-| `length`              | `number` | `0`                           | Number of items to display on a page.         |
-| `pageSize`            | `number` | `50`                          | Number of items to display on a page.         |
-| `currentPage`         | `number` | `1`                           | The current page of the pagination.           |
-| `aria-label-previous` | `string` | `Previous page`               | ARIA label for the previous page button.      |
-| `aria-label-next`     | `string` | `Next page`                   | ARIA label for the next page button.          |
-| `aria-label`          | `string` | `Pagination`                  | ARIA label for the pagination.                |
-| `aria-label-ellipses` | `string` | `The next pages are ellipses` | ARIA label for the ellipsis character.        |
-| `aria-label-page`     | `string` | `page`                        | ARIA label for a page button (Page 1,2,3...). |
-| `aria-label-current`  | `string` | `You are currently on page`   | ARIA label for the current page button.       |
+| Name                | Type     | Default                       | Description                                   |
+| ------------------- | -------- | ----------------------------- | --------------------------------------------- |
+| `length`            | `number` | `0`                           | Number of items to display on a page.         |
+| `pageSize`          | `number` | `50`                          | Number of items to display on a page.         |
+| `currentPage`       | `number` | `1`                           | The current page of the pagination.           |
+| `ariaLabelPrevious` | `string` | `Previous page`               | ARIA label for the previous page button.      |
+| `ariaLabelNext`     | `string` | `Next page`                   | ARIA label for the next page button.          |
+| `aria-label`        | `string` | `Pagination`                  | ARIA label for the pagination.                |
+| `ariaLabelEllipses` | `string` | `The next pages are ellipses` | ARIA label for the ellipsis character.        |
+| `ariaLabelPage`     | `string` | `page`                        | ARIA label for a page button (Page 1,2,3...). |
+| `ariaLabelCurrent`  | `string` | `You are currently on page`   | ARIA label for the current page button.       |
 
 ## Outputs
 

components/pagination/src/pagination.html

@@ -4,7 +4,7 @@
       dt-icon-button
       variant="nested"
       color="accent"
-      [attr.aria-label]="ariaPreviousLabel"
+      [attr.aria-label]="_ariaLabelPrevious"
       [attr.aria-disabled]="_isFirstPage"
       [disabled]="_isFirstPage"
       (click)="previous()"
@@ -15,15 +15,15 @@
 
   <ng-container *ngFor="let block of _pages; let i = index">
     <li *ngIf="i > 0" class="dt-pagination-item">
-      <span [attr.aria-label]="ariaLabelEllipses">…</span>
+      <span [attr.aria-label]="_ariaLabelEllipses">…</span>
     </li>
 
     <li *ngFor="let page of block" class="dt-pagination-item">
       <button
         *ngIf="page !== currentPage"
         dt-button
         variant="nested"
-        [attr.aria-label]="ariaPageLabel + ' ' + page"
+        [attr.aria-label]="_ariaLabelPage + ' ' + page"
         (click)="_setPage(page)"
       >
         {{page}}
@@ -32,7 +32,7 @@
       <span
         *ngIf="page === currentPage"
         aria-current
-        [attr.aria-label]="ariaCurrentLabel + ' ' + page"
+        [attr.aria-label]="_ariaLabelCurrent + ' ' + page"
       >
         {{page}}
       </span>
@@ -44,7 +44,7 @@
       dt-icon-button
       variant="nested"
       color="accent"
-      [attr.aria-label]="ariaNextLabel"
+      [attr.aria-label]="_ariaLabelNext"
       [attr.aria-disabled]="_isLastPage"
       [disabled]="_isLastPage"
       (click)="next()"

components/pagination/src/pagination.spec.ts

@@ -404,12 +404,12 @@ export class DefaultPagination {
       [length]="length"
       [pageSize]="pageSize"
       [currentPage]="currentPage"
-      [aria-label-previous]="ariaPreviousLabel"
-      [aria-label-next]="ariaNextLabel"
+      [ariaLabelPrevious]="ariaPreviousLabel"
+      [ariaLabelNext]="ariaNextLabel"
       [aria-label]="ariaLabel"
-      [aria-label-ellipses]="ariaEllipses"
-      [aria-label-page]="ariaPageLabel"
-      [aria-label-current]="ariaCurrentLabel"
+      [ariaLabelEllipses]="ariaEllipses"
+      [ariaLabelPage]="ariaPageLabel"
+      [ariaLabelCurrent]="ariaCurrentLabel"
       (changed)="onChange($event)"
     ></dt-pagination>
   `,

components/pagination/src/pagination.ts

@@ -102,18 +102,131 @@ export class DtPagination implements OnInit {
   }
   private _currentPage = 1;
 
+  /**
+   * Aria label for the previous page button. Defaults to "Previous page"
+   * @deprecated `aria-label-previous` does not conform with accessibility standards.
+   * Please use `ariaLabelPrevious` input instead.
+   * @breaking-change Will be removed in version 7.0.0
+   */
+  @Input('aria-label-previous')
+  get ariaPreviousLabel(): string {
+    return this._ariaLabelPrevious;
+  }
+  set ariaPreviousLabel(value: string) {
+    this._ariaLabelPrevious = value;
+  }
   /** Aria label for the previous page button. Defaults to "Previous page" */
-  @Input('aria-label-previous') ariaPreviousLabel = ARIA_DEFAULT_PREVIOUS_LABEL;
+  @Input()
+  get ariaLabelPrevious(): string {
+    return this._ariaLabelPrevious;
+  }
+  set ariaLabelPrevious(value: string) {
+    this._ariaLabelPrevious = value;
+  }
+  /** @internal Aria label for the previous page button. Defaults to "Previous page" */
+  _ariaLabelPrevious = ARIA_DEFAULT_PREVIOUS_LABEL;
+
+  /**
+   * Aria label for the next page button. Defaults to "Next page"
+   * @deprecated `aria-label-next` does not conform with accessibility standards.
+   * Please use `ariaLabelNext` input instead.
+   * @breaking-change Will be removed in version 7.0.0
+   */
+  @Input('aria-label-next')
+  get ariaNextLabel(): string {
+    return this._ariaLabelNext;
+  }
+  set ariaNextLabel(value: string) {
+    this._ariaLabelNext = value;
+  }
   /** Aria label for the next page button. Defaults to "Next page" */
-  @Input('aria-label-next') ariaNextLabel = ARIA_DEFAULT_NEXT_LABEL;
+  @Input()
+  get ariaLabelNext(): string {
+    return this._ariaLabelNext;
+  }
+  set ariaLabelNext(value: string) {
+    this._ariaLabelNext = value;
+  }
+  /** @internal Aria label for the next page button. Defaults to "Next page" */
+  _ariaLabelNext = ARIA_DEFAULT_NEXT_LABEL;
+
   /** Aria label for the pagination. Defaults to "Pagination" */
   @Input('aria-label') ariaLabel = ARIA_DEFAULT_LABEL;
+
+  /**
+   * Aria label for the ellipsis character. Defaults to "The next pages are ellipses"
+   * @deprecated `aria-label-ellipses` does not conform with accessibility standards.
+   * Please use `ariaLabelEllipses` input instead.
+   * @breaking-change Will be removed in version 7.0.0
+   */
+  @Input('aria-label-ellipses')
+  get depAriaLabelEllipses(): string {
+    return this._ariaLabelEllipses;
+  }
+  set depAriaLabelEllipses(value: string) {
+    this._ariaLabelEllipses = value;
+  }
   /** Aria label for the ellipsis character. Defaults to "The next pages are ellipses" */
-  @Input('aria-label-ellipses') ariaLabelEllipses = ARIA_DEFAULT_ELLIPSES;
+  @Input()
+  get ariaLabelEllipses(): string {
+    return this._ariaLabelEllipses;
+  }
+  set ariaLabelEllipses(value: string) {
+    this._ariaLabelEllipses = value;
+  }
+  /** @internal Aria label for the ellipsis character. Defaults to "The next pages are ellipses" */
+  _ariaLabelEllipses = ARIA_DEFAULT_ELLIPSES;
+
+  /**
+   * Aria label for a page button (Page 1,2,3...). Defaults to "Page"
+   * @deprecated `aria-label-page` does not conform with accessibility standards.
+   * Please use `ariaLabelPage` input instead.
+   * @breaking-change Will be removed in version 7.0.0
+   */
+  @Input('aria-label-page')
+  get ariaPageLabel(): string {
+    return this._ariaLabelPage;
+  }
+  set ariaPageLabel(value: string) {
+    this._ariaLabelPage = value;
+  }
   /** Aria label for a page button (Page 1,2,3...). Defaults to "Page" */
-  @Input('aria-label-page') ariaPageLabel = ARIA_DEFAULT_PAGE_LABEL;
+  @Input()
+  get ariaLabelPage(): string {
+    return this._ariaLabelPage;
+  }
+  set ariaLabelPage(value: string) {
+    this._ariaLabelPage = value;
+  }
+  /** @internal Aria label for a page button (Page 1,2,3...). Defaults to "Page" */
+  _ariaLabelPage = ARIA_DEFAULT_PAGE_LABEL;
+
+  /**
+   * Aria label for the current page button. Defaults to "You are currently on page"
+   * @deprecated `aria-label-current` does not conform with accessibility standards.
+   * Please use `ariaLabelCurrent` input instead.
+   * @breaking-change Will be removed in version 7.0.0
+   */
+  @Input('aria-label-current')
+  get ariaCurrentLabel(): string {
+    return this._ariaLabelCurrent;
+  }
+  set ariaCurrentLabel(value: string) {
+    this._ariaLabelCurrent = value;
+  }
   /** Aria label for the current page button. Defaults to "You are currently on page" */
-  @Input('aria-label-current') ariaCurrentLabel = ARIA_DEFAULT_CURRENT_LABEL;
+  @Input()
+  get ariaLabelCurrent(): string {
+    return this._ariaLabelCurrent;
+  }
+  set ariaLabelCurrent(value: string) {
+    this._ariaLabelCurrent = value;
+  }
+  /**
+   * @internal Aria label for the current page button.
+   * Defaults to "You are currently on page"
+   */
+  _ariaLabelCurrent = ARIA_DEFAULT_CURRENT_LABEL;
 
   /** The number of pages by the provided page size and the length of all items */
   get numberOfPages(): number {