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

…-of-button Accessibility enhancement added to Button
Infineon · Nov 7, 2024 · 6080774 · 6080774
2 parents 999fa73 + 55ad896
commit 6080774
Show file tree

Hide file tree

Showing 12 changed files with 1,057 additions and 3,074 deletions.
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": "25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+    "@infineon/infineon-design-system-react": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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": "25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+    "@infineon/infineon-design-system-vue": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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": "25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+  "version": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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": "25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+  "version": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+    "@infineon/infineon-design-system-angular": "^25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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": "25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+  "version": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0"
+    "@infineon/infineon-design-system-stencil": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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": "25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+  "version": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+    "@infineon/infineon-design-system-stencil": "^25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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": "25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+  "version": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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": "^25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0"
+    "@infineon/infineon-design-system-stencil": "^25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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": "25.16.0--canary.1557.e902e4afe405f1b1239b1f81272857ab356bf012.0",
+  "version": "25.17.0--canary.1559.42abb5e5aa04343a514dcb1cb092bb45972759a5.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/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -17,6 +17,7 @@ export class Button {
   @Prop() target: string = '_self';
   @Prop() type: "button" | "submit" | "reset" = "button";
   @Prop() fullWidth: boolean = false;
+  @Prop() AriaLabel: string;
   @Element() el;
 
   private focusableElement: HTMLElement;
@@ -101,8 +102,8 @@ export class Button {
 
   @Listen('keydown')
   handleKeyDown(ev: KeyboardEvent) {
-    if (ev.key === 'Enter' && !this.disabled) {
-      this.handleClick(ev as unknown as MouseEvent);
+    if ( ev.key === " " || ev.key === 'Enter' && !this.disabled) {
+      this.focusableElement.click();
     }
   }
 
@@ -124,16 +125,18 @@ export class Button {
     return (
       <Host>
         <a
-          tabIndex={0}
+          role={this.href ? 'link' : 'button'}
+          tabIndex={this.disabled ? -1 : 0}
           ref={(el) => (this.focusableElement = el)}
           class={this.getClassNames()}
           href={!this.disabled ? this.internalHref : undefined}
           target={this.target}
           onClick={this.handleClick}
           rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}
           onFocus={(event) => this.handleFocus(event)}
-          aria-disabled={this.disabled}
-          aria-labelledby="label"
+          aria-disabled={this.disabled ? 'true' : null}
+          aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}
+          aria-label={this.AriaLabel || "Button label"}
         >
           <slot></slot>
         </a>

diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
@@ -9,6 +9,7 @@
 
 | Property    | Attribute    | Description | Type                                     | Default     |
 | ----------- | ------------ | ----------- | ---------------------------------------- | ----------- |
+| `AriaLabel` | `aria-label` |             | `string`                                 | `undefined` |
 | `disabled`  | `disabled`   |             | `boolean`                                | `false`     |
 | `fullWidth` | `full-width` |             | `boolean`                                | `false`     |
 | `href`      | `href`       |             | `string`                                 | `undefined` |

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -14,39 +14,13 @@
   </style>
 
   <script defer>
-  
+
   </script>
 
 </head>
 
 <body>  
 
-  <div><ifx-breadcrumb>
-    <ifx-breadcrumb-item>
-      <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 1</ifx-breadcrumb-item-label>
-      <ifx-dropdown-menu>
-        <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
-      </ifx-dropdown-menu>
-    </ifx-breadcrumb-item>
-
-    <ifx-breadcrumb-item>
-      <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 2</ifx-breadcrumb-item-label>
-      <ifx-dropdown-menu>
-      <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
-      <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
-      <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
-      <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
-      </ifx-dropdown-menu>
-    </ifx-breadcrumb-item>
-
-    <ifx-breadcrumb-item>
-      <ifx-breadcrumb-item-label slot="label" icon="" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
-    </ifx-breadcrumb-item>
-  </ifx-breadcrumb></div>
-
 </body>