fix(core): improve component a11y (#1497)

Co-authored-by: matthiashader <[email protected]> Co-authored-by: matthias <[email protected]>
siemens · Oct 22, 2024 · eb97f91 · eb97f91
1 parent a100af7
commit eb97f91
Show file tree

Hide file tree

Showing 17 changed files with 209 additions and 226 deletions.
diff --git a/.changeset/eight-windows-shout.md b/.changeset/eight-windows-shout.md
@@ -0,0 +1,7 @@
+---
+"@siemens/ix-angular": minor
+"@siemens/ix": minor
+"@siemens/ix-vue": minor
+---
+
+feat(core): improve component a11y
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: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions']
+  inputs: ['ariaLabel', '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: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions'],
+  inputs: ['ariaLabel', '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
@@ -583,7 +583,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -604,7 +604,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -625,7 +625,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -651,7 +651,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         }
       ],
@@ -2154,6 +2154,33 @@
         ]
       },
       "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[]; }; }",
@@ -6302,6 +6329,7 @@
           "reflectToAttr": false,
           "docs": "Display a chevron icon in list items. Defaults to 'false'",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -6399,6 +6427,7 @@
           "reflectToAttr": false,
           "docs": "Show chevron on right side of the event list item",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -6435,7 +6464,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -6451,6 +6480,7 @@
           "reflectToAttr": false,
           "docs": "Disable event list item",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -6482,7 +6512,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -6498,6 +6528,7 @@
           "reflectToAttr": false,
           "docs": "Show event list item as selected",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -9281,7 +9312,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -12186,7 +12217,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -12229,7 +12260,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -163,20 +163,20 @@ export namespace Components {
           * Optional description text that will be displayed underneath the username. Note: Only working if avatar is part of the ix-application-header
           * @since 2.1.0
          */
-        "extra": string;
+        "extra"?: string;
         /**
           * Display an avatar image
          */
-        "image": string;
+        "image"?: string;
         /**
           * Display the initials of the user. Will be overwritten by image
          */
-        "initials": string;
+        "initials"?: string;
         /**
           * If set an info card displaying the username will be placed inside the dropdown. Note: Only working if avatar is part of the ix-application-header
           * @since 2.1.0
          */
-        "username": string;
+        "username"?: string;
     }
     interface IxBasicNavigation {
         /**
@@ -366,6 +366,11 @@ 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.
          */
@@ -987,7 +992,7 @@ export namespace Components {
           * @link https://ix.siemens.io/docs/theming/colors/
           * @deprecated since 2.1.0 use `item-color`
          */
-        "color": string;
+        "color"?: string;
         /**
           * Disable event list item
          */
@@ -996,7 +1001,7 @@ export namespace Components {
           * Color of the status indicator. You can find a list of all available colors in our documentation. Example values are `--theme-color-alarm` or `color-alarm`
           * @link https://ix.siemens.io/docs/theming/colors/
          */
-        "itemColor": string;
+        "itemColor"?: string;
         /**
           * Show event list item as selected
          */
@@ -1348,7 +1353,7 @@ export namespace Components {
         /**
           * Should only be set if you use ix-menu standalone
          */
-        "applicationName": string;
+        "applicationName"?: string;
         /**
           * Internal
          */
@@ -1740,15 +1745,15 @@ export namespace Components {
         /**
           * Title of the side panel
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * Define if the pane should have a collapsed state
          */
         "hideOnCollapse": boolean;
         /**
           * Name of the icon
          */
-        "icon": string;
+        "icon"?: string;
         "ignoreLayoutSettings": boolean;
         "isMobile": boolean;
         /**
@@ -4442,6 +4447,11 @@ 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/avatar/avatar.scss b/packages/core/src/components/avatar/avatar.scss
@@ -106,7 +106,7 @@
 
   @include btn-base-variant('invisible-primary', false);
 
-  li {
+  .avatar {
     transform: scale(0.8);
   }
 }
diff --git a/packages/core/src/components/avatar/avatar.tsx b/packages/core/src/components/avatar/avatar.tsx
@@ -53,23 +53,23 @@ function DefaultAvatar(props: { initials?: string }) {
   );
 }
 
-function AvatarImage(props: { image: string; initials: string }) {
+function AvatarImage(props: { image?: string; initials?: string }) {
   return (
-    <li class="avatar">
+    <div class="avatar">
       {props.image ? (
         <img src={props.image} class="avatar-image"></img>
       ) : (
         <DefaultAvatar initials={props.initials} />
       )}
-    </li>
+    </div>
   );
 }
 
 function UserInfo(props: {
-  image: string;
-  initials: string;
+  image?: string;
+  initials?: string;
   userName: string;
-  extra: string;
+  extra?: string;
 }) {
   return (
     <Fragment>
@@ -97,41 +97,41 @@ function UserInfo(props: {
   shadow: true,
 })
 export class Avatar {
-  @Element() hostElement: HTMLIxAvatarElement;
+  @Element() hostElement!: HTMLIxAvatarElement;
 
   /**
    * Display an avatar image
    *
    */
-  @Prop() image: string;
+  @Prop() image?: string;
 
   /**
    * Display the initials of the user. Will be overwritten by image
    *
    */
-  @Prop() initials: string;
+  @Prop() initials?: string;
 
   /**
    * If set an info card displaying the username will be placed inside the dropdown.
    * Note: Only working if avatar is part of the ix-application-header
    *
    * @since 2.1.0
    */
-  @Prop() username: string;
+  @Prop() username?: string;
 
   /**
    * Optional description text that will be displayed underneath the username.
    * Note: Only working if avatar is part of the ix-application-header
    *
    * @since 2.1.0
    */
-  @Prop() extra: string;
+  @Prop() extra?: string;
 
   @State() isClosestApplicationHeader = false;
   @State() hasSlottedElements = false;
 
-  private slotElement: HTMLSlotElement;
-  private dropdownElement: HTMLIxDropdownElement;
+  private slotElement?: HTMLSlotElement;
+  private dropdownElement?: HTMLIxDropdownElement;
 
   componentWillLoad() {
     const closest = closestElement('ix-application-header', this.hostElement);
@@ -143,10 +143,15 @@ export class Avatar {
   }
 
   private resolveAvatarTrigger() {
-    return new Promise<HTMLElement>((resolve) => {
-      readTask(() =>
-        resolve(this.hostElement.shadowRoot.querySelector('button'))
-      );
+    return new Promise<HTMLElement>((resolve, reject) => {
+      readTask(() => {
+        const button = this.hostElement.shadowRoot!.querySelector('button');
+        if (button) {
+          resolve(button);
+        } else {
+          reject(new Error('ix-avatar - trigger element not found'));
+        }
+      });
     });
   }
 

diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss
@@ -95,9 +95,7 @@
   .list-unstyled {
     display: flex;
     flex-wrap: wrap;
-    list-style: none;
-    padding: 0;
-    margin: 0;
+    height: 100%;
     overflow-y: auto;
   }
 
@@ -126,7 +124,7 @@
     height: 100%;
   }
 
-  ul > li,
+  .list-unstyled > span:not(.category-preview),
   input {
     padding-inline-start: 0;
     padding-top: 2px;