Merge pull request #1605 from Infineon/1264-accessibility-enhancement-of-chip

tishoyanchev · web-flow · commit e0d4a2f4b873 · 2024-11-26T15:15:35.000+01:00
Accessibility enhancement added to Chip
diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+    "@infineon/infineon-design-system-react": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/examples/wrapper-components/vue-javascript/package.json b/examples/wrapper-components/vue-javascript/package.json
@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+    "@infineon/infineon-design-system-vue": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "vite": "^5.0.12",
diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+  "version": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+  "version": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+    "@infineon/infineon-design-system-angular": "^27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+  "version": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0"
+    "@infineon/infineon-design-system-stencil": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+  "version": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "^27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+    "@infineon/infineon-design-system-stencil": "^27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+  "version": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "^27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0"
+    "@infineon/infineon-design-system-stencil": "^27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",
+  "version": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",
diff --git a/packages/components/src/components/chip/chip-item/chip-item.scss b/packages/components/src/components/chip/chip-item/chip-item.scss
@@ -22,6 +22,10 @@
     &:active {
         background-color: tokens.$ifxColorEngineering300;
     }
+
+    &:focus {
+        outline: 2px solid tokens.$ifxColorOcean500;
+    }
     
     &.chip-item--large {
         font: tokens.$ifxBodyBody03;
diff --git a/packages/components/src/components/chip/chip-item/chip-item.tsx b/packages/components/src/components/chip/chip-item/chip-item.tsx
@@ -91,8 +91,9 @@ render() {
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} 
            tabIndex={0}
            onClick={() => {this.handleItemClick()}}
-           onKeyDown={(e) => {this.handleItemKeyDown(e)}}>
-
+           onKeyDown={(e) => {this.handleItemKeyDown(e)}}
+           role="option"
+           aria-selected={this.selected.toString()}>    
            {/* Checkbox; renders only in 'multi' variant. */}
            { 
                this.chipState.variant === 'multi' &&
diff --git a/packages/components/src/components/chip/chip.scss b/packages/components/src/components/chip/chip.scss
@@ -31,6 +31,10 @@
         outline: none;
         border: 1px solid tokens.$ifxColorEngineering500;
     }
+
+    &:focus {
+        border: 1px solid tokens.$ifxColorOcean500;
+    }
     
     &.chip__wrapper--small {
         padding: tokens.$ifxSpace50 tokens.$ifxSpace150;
diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx
@@ -15,6 +15,7 @@ export class Chip {
   @Prop({ mutable: true }) value: Array<string> | string = undefined;
   @Prop() variant: 'single' | 'multi' = 'single';
   @Prop() readOnly: boolean = false;
+  @Prop() AriaLabel: string;
 
   @State() opened: boolean = false;
   @State() selectedOptions: Array<ChipItemSelectEvent> = [];
@@ -41,6 +42,20 @@ export class Chip {
     }
   }
 
+  @Listen('keydown')
+  handleKeyDown(event: KeyboardEvent) {
+    // override behavior of all keys except Tab. Users should be able to tab out of the component.
+    if (event.code !== 'Tab') {
+      event.preventDefault(); 
+    }
+
+    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {
+      this.handleWrapperKeyDown(event);
+    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {
+      this.handleDropdownKeyDown(event);
+    }
+  }
+
   @Listen('ifxChipItemSelect')
   updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {
     const eventDetail: ChipItemSelectEvent = event.detail;
@@ -101,6 +116,38 @@ export class Chip {
     this.opened = !this.opened;
   }
 
+  /**
+   * Focuses the chip item at the specified index.
+   * @param index the index of the chip item to focus. -1 will focus the last chip item.
+   */
+  focusChipItemAt(index: number = 0) {
+    this.opened = true;
+    const chipItems: NodeList = this.getChipItems();
+    let item: HTMLIfxChipItemElement;
+    
+    if (index === -1) {
+      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;
+    } else if (index >= 0 && index < chipItems.length) {
+      item = chipItems.item(index) as HTMLIfxChipItemElement;
+    } else {
+      console.error(`Invalid index: ${index}`);
+      return;
+    }
+
+    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;
+    if (shadowItem) {
+      // Delay needed for the shadow item to be rendered.
+      setTimeout(() => {
+        shadowItem.focus();
+      }, 1);
+    }
+  }
+
+  focusChip() {
+    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');
+    chipWrapper.focus();
+  }
+
   handleUnselectButtonClick(event: MouseEvent) {
     event.stopPropagation();
     this.opened = false;
@@ -138,11 +185,68 @@ export class Chip {
   }
 
   handleWrapperKeyDown(event: KeyboardEvent) {
-    if (!this.readOnly && (event.code === 'Space' || event.code === 'Enter')) {
-      this.toggleDropdownMenu();
+    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction
+    if (this.readOnly) return;
+
+    if (!this.opened) {
+      switch (event.code) {
+        case 'Space':
+        case 'Enter':
+        case 'ArrowDown':
+          this.focusChipItemAt(0);
+          break;
+        case 'ArrowUp':
+          this.focusChipItemAt(-1);
+          break;
+      }
+    } else {
+      switch (event.code) {
+        case 'Escape':
+          this.opened = false;
+          this.focusChip();
+          break;
+      }
     }
   }
 
+  handleDropdownKeyDown(event: KeyboardEvent) {
+    let chipitems = this.getChipItems();
+
+    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);
+    if (targetIndex === -1) {
+      console.error('Target not found in chip items');
+      return;
+    }
+
+    switch (event.code) {
+      case 'ArrowDown':
+        if (targetIndex === chipitems.length - 1) break;
+        this.focusChipItemAt(targetIndex + 1);
+        break;
+      case 'ArrowUp':
+        if (targetIndex === 0) break;
+        this.focusChipItemAt( targetIndex - 1);
+        break;
+      case 'Escape':
+        this.opened = false;
+        this.focusChip();
+        break;
+      case 'Space':
+        // selection is handled by the chip-item component
+        if (this.variant === 'single') {
+          // only close dropdown if single select
+          this.opened = false;
+          this.focusChip();
+        }
+        break;
+      case 'Enter':
+        // selection is handled by the chip-item component
+        this.opened = false;
+        this.focusChip();
+        break;
+      }
+    }
+
   syncChipState() {
     const chipItems: NodeList = this.getChipItems();
     let key: number = 0;
@@ -192,14 +296,22 @@ export class Chip {
 
   render() {
     return (
-      <div aria-value={this.getSelectedOptions()} aria-label='chip with a dropdown menu' class='chip'>
+      <div class='chip'>
         <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
                   chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
                   ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
                   ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}
           tabIndex={0}
           onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}
-          onKeyDown={!this.readOnly ? (e) => { this.handleWrapperKeyDown(e) } : undefined}>
+          role='combobox'
+          aria-label={this.AriaLabel}
+          aria-value={this.getSelectedOptions()}
+          aria-haspopup={!this.readOnly ? 'listbox' : undefined}
+          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}
+          aria-controls={!this.readOnly ? 'dropdown' : undefined}
+          aria-readonly={this.readOnly ? 'true' : undefined}
+          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}
+          >
 
           <div class='wrapper__label'>
             {
@@ -250,7 +362,7 @@ export class Chip {
 
         {
           this.opened && !this.readOnly &&
-          <div class='chip__dropdown'>
+          <div id='dropdown' role='listbox' class='chip__dropdown'>
             <slot />
           </div>
         }
diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md
@@ -9,6 +9,7 @@
 
 | Property      | Attribute     | Description | Type                  | Default     |
 | ------------- | ------------- | ----------- | --------------------- | ----------- |
+| `AriaLabel`   | `aria-label`  |             | `string`              | `undefined` |
 | `placeholder` | `placeholder` |             | `string`              | `''`        |
 | `readOnly`    | `read-only`   |             | `boolean`             | `false`     |
 | `size`        | `size`        |             | `"large" \| "small"`  | `'large'`   |

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "node_modules/lerna/schemas/lerna-schema.json",`
`3`		`- "version": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",`
	`3`	`+ "version": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",`
`4`	`4`	`"command": {`
`5`	`5`	`"publish": {`
`6`	`6`	`"verifyAccess": false`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@infineon/infineon-design-system-stencil",`
`3`		`- "version": "27.8.0--canary.1609.b2cfda25e6222becf92d02be7d4ef6fb386afdab.0",`
	`3`	`+ "version": "27.9.0--canary.1605.19960d33529b5d614ba2c1c9bbb39603c08ce922.0",`
`4`	`4`	`"private": false,`
`5`	`5`	`"description": "Infineon design system Stencil web components",`
`6`	`6`	`"homepage": "https://infineon.github.io/infineon-design-system-stencil",`