refactor: move accessibleName to A11yMixin

vaadin · Nov 27, 2024 · 20db9fc · 20db9fc
1 parent 42ed1e5
commit 20db9fc
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/packages/grid/src/vaadin-grid-a11y-mixin.d.ts b/packages/grid/src/vaadin-grid-a11y-mixin.d.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function A11yMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<A11yMixinClass> & T;
+
+export declare class A11yMixinClass {
+  /**
+   * String used to label the grid to screen reader users.
+   * @attr {string} accessible-name
+   */
+  accessibleName: string;
+}
diff --git a/packages/grid/src/vaadin-grid-a11y-mixin.js b/packages/grid/src/vaadin-grid-a11y-mixin.js
@@ -10,6 +10,17 @@ import { iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
  */
 export const A11yMixin = (superClass) =>
   class A11yMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * String used to label the grid to screen reader users.
+         * @attr {string} accessible-name
+         */
+        accessibleName: {
+          type: String,
+        },
+      };
+    }
     static get observers() {
       return ['_a11yUpdateGridSize(size, _columnTree)'];
     }

diff --git a/packages/grid/src/vaadin-grid-mixin.d.ts b/packages/grid/src/vaadin-grid-mixin.d.ts
@@ -5,6 +5,7 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { A11yMixinClass } from './vaadin-grid-a11y-mixin.js';
 import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
 import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
 import type { GridBodyRenderer, GridColumn, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
@@ -162,7 +163,8 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
 
 export declare function GridMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ActiveItemMixinClass<TItem>> &
+): Constructor<A11yMixinClass> &
+  Constructor<ActiveItemMixinClass<TItem>> &
   Constructor<ArrayDataProviderMixinClass<TItem>> &
   Constructor<ColumnReorderingMixinClass> &
   Constructor<DataProviderMixinClass<TItem>> &
@@ -179,6 +181,7 @@ export declare function GridMixin<TItem, T extends Constructor<HTMLElement>>(
 
 export interface GridMixinClass<TItem>
   extends DisabledMixinClass,
+    A11yMixinClass,
     ActiveItemMixinClass<TItem>,
     ArrayDataProviderMixinClass<TItem>,
     DataProviderMixinClass<TItem>,
@@ -199,12 +202,6 @@ export interface GridMixinClass<TItem>
    */
   allRowsVisible: boolean;
 
-  /**
-   * String used to label the grid to screen reader users.
-   * @attr {string} accessible-name
-   */
-  accessibleName: string;
-
   /**
    * Updates the `width` of all columns which have `autoWidth` set to `true`.
    */

diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
@@ -144,14 +144,6 @@ export const GridMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
-        /**
-         * String used to label the grid to screen reader users.
-         * @attr {string} accessible-name
-         */
-        accessibleName: {
-          type: String,
-        },
-
         /** @private */
         __pendingRecalculateColumnWidths: {
           type: Boolean,