Merge pull request #1503 from Infineon/1264-accessibility-enhancement…

…-of-accordion

Enhancement: Accessibility enhancement of accordion

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": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+    "@infineon/infineon-design-system-react": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

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": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+    "@infineon/infineon-design-system-vue": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "vite": "^5.0.12",

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "command": {
     "publish": {
       "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.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": "^25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+    "@infineon/infineon-design-system-angular": "^25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",

packages/components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.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": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0"
+    "@infineon/infineon-design-system-stencil": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.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": "^25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+    "@infineon/infineon-design-system-stencil": "^25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "^25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0"
+    "@infineon/infineon-design-system-stencil": "^25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0"
   },
   "auto": {
     "plugins": [

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "25.10.1--canary.1544.b473cfd14ac9689b66c713ec72dcc87d8e764f29.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/src/components/accordion/accordion.stories.tsx

@@ -7,10 +7,17 @@ export default {
 
   args: {
     autoCollapse: false,
+    AriaLevel: 3,
   },
 
   argTypes: {
     amountOfItems: { control: 'number' },
+    AriaLevel: { 
+      control: 'number', 
+      min: 1, 
+      max: 6, 
+      description: 'The aria-level attribute for the accordion item header.' 
+    },
   },
 };
 
@@ -19,6 +26,7 @@ const Template = args => {
   const initialItem = document.createElement('ifx-accordion-item');
   initialItem.setAttribute('caption', `Label`);
   initialItem.setAttribute('open', `true`);
+  initialItem.setAttribute('aria-level', args.AriaLevel);
 
   initialItem.innerHTML = `
   Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
@@ -35,9 +43,12 @@ const Template = args => {
     const item = document.createElement('ifx-accordion-item');
     item.setAttribute('caption', `Label`);
     item.setAttribute('open', `false`);
+    item.setAttribute('aria-level', args.AriaLevel);
 
     item.innerHTML = `
-        Content for Item #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
+        Content for Item #${
+          i + 1
+        }. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
     `;

packages/components/src/components/accordion/accordion.tsx

@@ -4,7 +4,7 @@ import { Component, h, Listen, Element, Prop } from '@stencil/core';
 @Component({
   tag: 'ifx-accordion',
   styleUrl: 'accordion.scss',
-  shadow: true,
+  shadow: { delegatesFocus: true },
 })
 export class Accordion {
   @Element() el: HTMLElement;

packages/components/src/components/accordion/accordionItem.scss

@@ -11,6 +11,24 @@
 
 }
 
+.accordion-title:focus {
+  outline: none;
+}
+
+// workaround to add corner radius to outline
+.accordion-title:focus::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border-radius: 5px;
+  border: 2px solid tokens.$ifxColorOcean500;
+  box-sizing: border-box;
+}
+
 .accordion-title:hover {
   border: 1px solid tokens.$ifxColorEngineering200;
   color: tokens.$ifxColorOcean600;
@@ -19,12 +37,14 @@
 .accordion-title {
   display: flex;
   align-items: center;
+  position: relative;
   padding: tokens.$ifxSpace150 tokens.$ifxSpace200;
   gap: tokens.$ifxSpace150;
   color: tokens.$ifxColorOcean500;
   background-color: tokens.$ifxColorBaseWhite;
   border: 1px solid tokens.$ifxColorEngineering200;
   cursor: pointer;
+  margin: 4px;
 }
 
 .accordion-caption {

packages/components/src/components/accordion/accordionItem.tsx

@@ -1,5 +1,5 @@
 //ifxAccordionItem
-import { Component, Prop, h, State, Event, EventEmitter, Watch } from '@stencil/core';
+import { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';
 
 @Component({
   tag: 'ifx-accordion-item',
@@ -11,6 +11,7 @@ export class IfxAccordionItem {
   @Prop({
     mutable: true,
   }) open: boolean = false;
+  @Prop() AriaLevel = 3;
   @State() internalOpen: boolean = false;
   @Event() ifxItemOpen: EventEmitter;
   @Event() ifxItemClose: EventEmitter;
@@ -79,16 +80,30 @@ export class IfxAccordionItem {
     }
   }
 
+
+
+  @Listen('keydown')
+  handleKeydown(ev: KeyboardEvent) {
+    switch (ev.key) {
+      case 'Enter': // fallthrough
+      case ' ': // space
+        ev.preventDefault();
+        this.toggleOpen();
+        break;
+    }
+  }
+
+
   render() {
     return (
-      <div aria-label={this.caption} class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>
-        <div class="accordion-title" onClick={() => this.toggleOpen()}>
-          <span class="accordion-icon">
-            <ifx-icon icon="chevron-down-12" />
+      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>
+        <div role="button" aria-expanded={this.internalOpen} aria-controls="accordion-content" class="accordion-title" onClick={() => this.toggleOpen()} tabindex='0'>
+          <span aria-hidden="true" role="heading" aria-level={String(this.AriaLevel) as string} class="accordion-icon">
+            <ifx-icon icon="chevron-down-12"/>
           </span>
-          <span class="accordion-caption">{this.caption}</span>
+          <span id="accordion-caption" class="accordion-caption">{this.caption}</span>
         </div>
-        <div class="accordion-content" ref={(el) => (this.contentEl = el as HTMLElement)}>
+        <div id="accordion-content" class="accordion-content" ref={(el) => (this.contentEl = el as HTMLElement)} role="region" aria-labelledby="accordion-caption">
           <div class="inner-content">
             <slot onSlotchange={(e) => this.handleSlotChange(e)} />
           </div>

packages/components/src/components/accordion/readme.md

@@ -7,10 +7,11 @@
 
 ## Properties
 
-| Property  | Attribute | Description | Type      | Default     |
-| --------- | --------- | ----------- | --------- | ----------- |
-| `caption` | `caption` |             | `string`  | `undefined` |
-| `open`    | `open`    |             | `boolean` | `false`     |
+| Property    | Attribute    | Description | Type      | Default     |
+| ----------- | ------------ | ----------- | --------- | ----------- |
+| `AriaLevel` | `aria-level` |             | `number`  | `3`         |
+| `caption`   | `caption`    |             | `string`  | `undefined` |
+| `open`      | `open`       |             | `boolean` | `false`     |
 
 
 ## Events