refactor(core/category-filter): remove aria label (#1539)

siemens · Oct 25, 2024 · af0af00 · af0af00
1 parent 0b41424
commit af0af00
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 48 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -350,14 +350,14 @@ export declare interface IxCardTitle extends Components.IxCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions']
+  inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions']
 })
 @Component({
   selector: 'ix-category-filter',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions'],
+  inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions'],
 })
 export class IxCategoryFilter {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -2160,33 +2160,6 @@
         ]
       },
       "props": [
-        {
-          "name": "ariaLabel",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "aria-label",
-          "reflectToAttr": false,
-          "docs": "Aria label for the filter input field",
-          "docsTags": [
-            {
-              "name": "since",
-              "text": "2.6.0"
-            }
-          ],
-          "default": "'Filter'",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "categories",
           "type": "{ [id: string]: { label: string; options: string[]; }; }",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -366,11 +366,6 @@ export namespace Components {
     interface IxCardTitle {
     }
     interface IxCategoryFilter {
-        /**
-          * Aria label for the filter input field
-          * @since 2.6.0
-         */
-        "ariaLabel": string;
         /**
           * Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from.
          */
@@ -4447,11 +4442,6 @@ declare namespace LocalJSX {
     interface IxCardTitle {
     }
     interface IxCategoryFilter {
-        /**
-          * Aria label for the filter input field
-          * @since 2.6.0
-         */
-        "ariaLabel"?: string;
         /**
           * Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from.
          */

diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx
@@ -22,6 +22,7 @@ import { BaseButton, BaseButtonProps } from '../button/base-button';
 import { FilterState } from './filter-state';
 import { InputState } from './input-state';
 import { LogicalFilterOperator } from './logical-filter-operator';
+import { A11yAttributes, a11yHostAttributes } from '../utils/a11y';
 
 @Component({
   tag: 'ix-category-filter',
@@ -35,6 +36,7 @@ export class CategoryFilter {
   @State() private textInput?: HTMLInputElement;
   private formElement?: HTMLFormElement;
   private isScrollStateDirty?: boolean;
+  private a11yAttributes?: A11yAttributes;
 
   @Element() hostElement!: HTMLIxCategoryFilterElement;
 
@@ -138,13 +140,6 @@ export class CategoryFilter {
    */
   @Prop() i18nPlainText = 'Filter by text';
 
-  /**
-   * Aria label for the filter input field
-   *
-   * @since 2.6.0
-   */
-  @Prop() ariaLabel = 'Filter';
-
   /**
    * Event dispatched whenever a category gets selected in the dropdown
    */
@@ -169,6 +164,10 @@ export class CategoryFilter {
     this.setFilterState(newValue);
   }
 
+  componentWillLoad() {
+    this.a11yAttributes = a11yHostAttributes(this.hostElement);
+  }
+
   componentDidLoad() {
     if (this.filterState !== undefined) {
       setTimeout(() => this.setFilterState(this.filterState));
@@ -763,7 +762,7 @@ export class CategoryFilter {
                   ref={(el) => (this.textInput = el)}
                   type="text"
                   placeholder={this.placeholder}
-                  aria-label={this.ariaLabel}
+                  {...this.a11yAttributes}
                 ></input>
               </div>
             </div>

diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -235,7 +235,6 @@ export const IxCategoryFilter = /*@__PURE__*/ defineContainer<JSX.IxCategoryFilt
   'tmpDisableScrollIntoView',
   'labelCategories',
   'i18nPlainText',
-  'ariaLabel',
   'categoryChanged',
   'inputChanged',
   'filterChanged'