Skip to content

Accessibility enhancement added to IconButton #1826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tishoyanchev merged 15 commits into from
May 7, 2025
Merged

Accessibility enhancement added to IconButton #1826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f319e71
Added accessibility to IconButton
agata-kim Apr 17, 2025
4c9bab8
clean install
agata-kim Apr 22, 2025
80f5b1b
Merge 4c9bab89d8e1bd857e78b10e0316ce370c52046a into 070a72f65c4e2490c…
agata-kim Apr 22, 2025
e294fe0
Update Stencil library version to 33.1.1--canary.1826.80f5b1bc68c2582…
invalid-email-address Apr 22, 2025
3ce3b4e
Merge branch 'master' into 1264-accessibility-enhancement
agata-kim Apr 24, 2025
6d62f8d
Changed ariaLabel to camelCase
agata-kim Apr 24, 2025
e6c0444
Merge branch '1264-accessibility-enhancement' of https://github.com/I…
agata-kim Apr 24, 2025
1c42a60
Clean install
agata-kim Apr 24, 2025
0b3186c
changed ariaLabel type: string | null
agata-kim Apr 24, 2025
e201b40
clean install
agata-kim Apr 24, 2025
0a85859
Merge e201b4089f8e26d3be6d9255a3f25755833ae506 into cf226f545c53d1c02…
agata-kim Apr 24, 2025
5d2cfdb
Update Stencil library version to 33.1.2--canary.1826.0a858592c19f502…
invalid-email-address Apr 24, 2025
9adce6d
Merge branch 'master' into 1264-accessibility-enhancement
tishoyanchev May 7, 2025
df088e4
Merge 9adce6ddb40004ca33b58ee1371c3b70123d7425 into 9f6f003df7e4b2fe0…
agata-kim May 7, 2025
3038587
Update Stencil library version to 33.1.4--canary.1826.df088e460080752…
invalid-email-address May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/wrapper-components/react-vite-js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"test:local": "run-p preview:link watch:library"
},
"dependencies": {
"@infineon/infineon-design-system-react": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"@infineon/infineon-design-system-react": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"path": "^0.12.7",
"react": "^18.3.1",
"react-dom": "^18.3.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/wrapper-components/vue-javascript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"test:local": "run-p preview:link watch:library"
},
"dependencies": {
"@infineon/infineon-design-system-vue": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"@infineon/infineon-design-system-vue": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^4.0.0",
"vite": "^5.0.12",
Expand Down
2 changes: 1 addition & 1 deletion lerna.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
"version": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"version": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"command": {
"publish": {
"verifyAccess": false
Expand Down
18 changes: 9 additions & 9 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions packages/components-angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "components-angular",
"version": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"version": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
Expand All @@ -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": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"@infineon/infineon-design-system-angular": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"typescript": "~5.4.4",
Expand Down
4 changes: 2 additions & 2 deletions packages/components-angular/projects/component-library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@infineon/infineon-design-system-angular",
"version": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"version": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"description": "Infineon design system Stencil web components for Angular",
"author": "Verena Lechner",
"license": "MIT",
Expand All @@ -11,7 +11,7 @@
"@angular/common": "^18.0.0",
"@angular/core": "^18.0.0",
"@infineon/design-system-tokens": "5.0.0",
"@infineon/infineon-design-system-stencil": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0"
"@infineon/infineon-design-system-stencil": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0"
},
"dependencies": {
"tslib": "^2.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/components-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@infineon/infineon-design-system-react",
"version": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"version": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"description": "Infineon design system Stencil web components for React",
"main": "./dist/index.js",
"types": "./dist/types/index.d.ts",
Expand Down Expand Up @@ -28,7 +28,7 @@
},
"dependencies": {
"@infineon/design-system-tokens": "5.0.0",
"@infineon/infineon-design-system-stencil": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"@infineon/infineon-design-system-stencil": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"@stencil/react-output-target": "^0.7.1"
},
"auto": {
Expand Down
4 changes: 2 additions & 2 deletions packages/components-vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@infineon/infineon-design-system-vue",
"version": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"version": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"description": "Infineon design system Stencil web components for Vue",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
Expand Down Expand Up @@ -30,7 +30,7 @@
},
"dependencies": {
"@infineon/design-system-tokens": "5.0.0",
"@infineon/infineon-design-system-stencil": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0"
"@infineon/infineon-design-system-stencil": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0"
},
"auto": {
"plugins": [
Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@infineon/infineon-design-system-stencil",
"version": "33.1.3--canary.1827.8a7453d1d45ac58bc62b68fa3c5a1148ca279471.0",
"version": "33.1.4--canary.1826.df088e460080752b9ce982492f593644b897818c.0",
"private": false,
"description": "Infineon design system Stencil web components",
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
Expand Down
10 changes: 9 additions & 1 deletion packages/components/src/components/icon-button/icon-button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default {
href: '',
target: '_blank',
shape: 'round',
ariaLabel: 'Icon Button',
},

argTypes: {
Expand Down Expand Up @@ -92,11 +93,18 @@ export default {
}
}
},
ariaLabel: {
control: { type: 'text' },
description: 'Set the aria label of the icon button. Enhances accessibility.',
table: {
category: 'ifx-icon-button props'
}
},
},
};

const DefaultTemplate = args =>
`<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}" size="${args.size}" disabled="${args.disabled}">
`<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}" size="${args.size}" disabled="${args.disabled}" aria-label="${args.ariaLabel}">
</ifx-icon-button>`;

export const Default = DefaultTemplate.bind({});
13 changes: 7 additions & 6 deletions packages/components/src/components/icon-button/icon-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';
import classNames from 'classnames';


@Component({
tag: 'ifx-icon-button',
Expand All @@ -16,10 +15,11 @@ export class IconButton {
@Prop() href: string;
@Prop() target: string = '_self';
@Prop() shape: string = 'round';
@Prop() ariaLabel: string | null;
@Element() el;

private focusableElement: HTMLElement;

@Listen('click', { capture: true })
handleClick(event: Event) {
if (this.disabled) {
Expand All @@ -40,14 +40,14 @@ export class IconButton {

render() {
return (
<Host>
<Host
aria-disabled={this.disabled}
aria-label={this.ariaLabel}>
{this.href ? (
<a
aria-disabled={this.disabled}
aria-label='a clickable icon button'
ref={(el) => (this.focusableElement = el)}
class={this.getClassNames()}
href={!this.disabled ? this.href : undefined}
href={!this.disabled ? this.href : undefined}
target={this.target}
rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}
>
Expand All @@ -57,6 +57,7 @@ export class IconButton {
<button
class={this.getClassNames()}
type="button"
disabled={this.disabled}
>
<ifx-icon icon={this.icon}></ifx-icon>
</button>
Expand Down
19 changes: 10 additions & 9 deletions packages/components/src/components/icon-button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------- | ---------------------------------------- | ----------- |
| `disabled` | `disabled` | | `boolean` | `undefined` |
| `href` | `href` | | `string` | `undefined` |
| `icon` | `icon` | | `string` | `undefined` |
| `shape` | `shape` | | `string` | `'round'` |
| `size` | `size` | | `string` | `undefined` |
| `target` | `target` | | `string` | `'_self'` |
| `variant` | `variant` | | `"primary" \| "secondary" \| "tertiary"` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ----------- | ---------------------------------------- | ----------- |
| `ariaLabel` | `aria-label` | | `string` | `undefined` |
| `disabled` | `disabled` | | `boolean` | `undefined` |
| `href` | `href` | | `string` | `undefined` |
| `icon` | `icon` | | `string` | `undefined` |
| `shape` | `shape` | | `string` | `'round'` |
| `size` | `size` | | `string` | `undefined` |
| `target` | `target` | | `string` | `'_self'` |
| `variant` | `variant` | | `"primary" \| "secondary" \| "tertiary"` | `undefined` |


## Methods
Expand Down
Loading