diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json index 46498d99b..a5fae4460 100644 --- 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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "@infineon/infineon-design-system-react": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.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 index ac50d1219..62f13941d 100644 --- 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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "@infineon/infineon-design-system-vue": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.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 index facc3c81a..6aec2015f 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "$schema": "node_modules/lerna/schemas/lerna-schema.json", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "command": { "publish": { "verifyAccess": false diff --git a/package-lock.json b/package-lock.json index ee281877d..4fb460401 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36831,7 +36831,7 @@ }, "packages/components": { "name": "@infineon/infineon-design-system-stencil", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "license": "MIT", "dependencies": { "@infineon/design-system-tokens": "3.3.3", @@ -36893,7 +36893,7 @@ } }, "packages/components-angular": { - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "license": "MIT", "dependencies": { "@angular/animations": "^18.0.0", @@ -36904,7 +36904,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.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "@infineon/infineon-design-system-angular": "^25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "typescript": "~5.4.4", @@ -36923,9 +36923,9 @@ } }, "packages/components-angular/node_modules/@infineon/infineon-design-system-stencil": { - "version": "25.10.0--canary.1533.e6d75a4e3c9d494489d4646ee2f29d6d1716677f.0", - "resolved": "https://registry.npmjs.org/@infineon/infineon-design-system-stencil/-/infineon-design-system-stencil-25.10.0--canary.1533.e6d75a4e3c9d494489d4646ee2f29d6d1716677f.0.tgz", - "integrity": "sha512-zi4w7lR4NMu4UbeKQMDEWL71T4/KfHFuH4/w6zpceh4Lt9cDfAPT0gCHEAd75b70WYpBaq8rd6yta51+8b8kEQ==", + "version": "25.11.0--canary.1503.fc56b0f91a644dd50e7faf8c1ba349f12b32aeef.0", + "resolved": "https://registry.npmjs.org/@infineon/infineon-design-system-stencil/-/infineon-design-system-stencil-25.11.0--canary.1503.fc56b0f91a644dd50e7faf8c1ba349f12b32aeef.0.tgz", + "integrity": "sha512-P2JgZmj/5qHMYpv0Ut6Abewq0w3Tsvw5oGCWmLVn9Na95dlYhwG+r6ecZdJLJiPbKpNpBtPH8Wqj50s5gkydNg==", "license": "MIT", "peer": true, "dependencies": { @@ -36953,7 +36953,7 @@ }, "packages/components-angular/projects/component-library": { "name": "@infineon/infineon-design-system-angular", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -36962,16 +36962,16 @@ "@angular/common": "^18.0.0", "@angular/core": "^18.0.0", "@infineon/design-system-tokens": "3.3.3", - "@infineon/infineon-design-system-stencil": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0" + "@infineon/infineon-design-system-stencil": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0" } }, "packages/components-react": { "name": "@infineon/infineon-design-system-react", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "license": "MIT", "dependencies": { "@infineon/design-system-tokens": "3.3.3", - "@infineon/infineon-design-system-stencil": "^25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "@infineon/infineon-design-system-stencil": "^25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "@stencil/react-output-target": "^0.7.1" }, "devDependencies": { @@ -36985,11 +36985,11 @@ }, "packages/components-vue": { "name": "@infineon/infineon-design-system-vue", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "license": "MIT", "dependencies": { "@infineon/design-system-tokens": "3.3.3", - "@infineon/infineon-design-system-stencil": "^25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0" + "@infineon/infineon-design-system-stencil": "^25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0" }, "devDependencies": { "@babel/types": "^7.22.5", diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json index 5043f5829..a4a17b1d3 100644 --- a/packages/components-angular/package.json +++ b/packages/components-angular/package.json @@ -1,6 +1,6 @@ { "name": "components-angular", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.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.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "@infineon/infineon-design-system-angular": "^25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.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 index 5712add5d..821cbdc0c 100644 --- 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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.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.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0" + "@infineon/infineon-design-system-stencil": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/packages/components-react/package.json b/packages/components-react/package.json index d9eee48fd..ac99dcdcc 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -1,6 +1,6 @@ { "name": "@infineon/infineon-design-system-react", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.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.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "@infineon/infineon-design-system-stencil": "^25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0", "@stencil/react-output-target": "^0.7.1" }, "auto": { diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json index 5c41a9a48..544dd768d 100644 --- a/packages/components-vue/package.json +++ b/packages/components-vue/package.json @@ -1,6 +1,6 @@ { "name": "@infineon/infineon-design-system-vue", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.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.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0" + "@infineon/infineon-design-system-stencil": "^25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.0" }, "auto": { "plugins": [ diff --git a/packages/components/package.json b/packages/components/package.json index e1d392480..59493c301 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@infineon/infineon-design-system-stencil", - "version": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0", + "version": "25.11.0--canary.1503.c812d7c741baa37be49fd723b88a0cda142c1bdb.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/accordion/accordion.stories.tsx b/packages/components/src/components/accordion/accordion.stories.tsx index 8b6e002a9..1bc2f0813 100644 --- a/packages/components/src/components/accordion/accordion.stories.tsx +++ b/packages/components/src/components/accordion/accordion.stories.tsx @@ -7,10 +7,17 @@ export default { args: { autoCollapse: false, + ifxAriaLevel: 3, }, argTypes: { amountOfItems: { control: 'number' }, + ifxAriaLevel: { + 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('ifx-aria-level', args.ifxAriaLevel); 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.ifxAriaLevel); 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. `; @@ -53,4 +64,5 @@ const Template = args => { export const Default = Template.bind({}); Default.args = { amountOfItems: 3, + ariaLevel: 3, }; diff --git a/packages/components/src/components/accordion/accordion.tsx b/packages/components/src/components/accordion/accordion.tsx index f7c89f85f..d37273e41 100644 --- a/packages/components/src/components/accordion/accordion.tsx +++ b/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; diff --git a/packages/components/src/components/accordion/accordionItem.scss b/packages/components/src/components/accordion/accordionItem.scss index 1907ab58d..2a3119316 100644 --- a/packages/components/src/components/accordion/accordionItem.scss +++ b/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 { diff --git a/packages/components/src/components/accordion/accordionItem.tsx b/packages/components/src/components/accordion/accordionItem.tsx index 6fae60912..fdebdb298 100644 --- a/packages/components/src/components/accordion/accordionItem.tsx +++ b/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() ifxAriaLevel = 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 ( -
-
this.toggleOpen()}> - - +
+
this.toggleOpen()} tabindex='0'> + - {this.caption} + {this.caption}
-
(this.contentEl = el as HTMLElement)}> +
(this.contentEl = el as HTMLElement)} role="region" aria-labelledby="accordion-caption">
this.handleSlotChange(e)} />
diff --git a/packages/components/src/components/accordion/readme.md b/packages/components/src/components/accordion/readme.md index bb282fa19..c2e8faee2 100644 --- a/packages/components/src/components/accordion/readme.md +++ b/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 | +| -------------- | ---------------- | ----------- | --------- | ----------- | +| `caption` | `caption` | | `string` | `undefined` | +| `ifxAriaLevel` | `ifx-aria-level` | | `number` | `3` | +| `open` | `open` | | `boolean` | `false` | ## Events