Skip to content
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

Jump to bottom

Enhancement: Accessibility enhancement of alert #1545

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Enhancement: Accessibility enhancement of alert #1545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5996ffa
feat(1264): improve accessibility of alert
pfafffabian-ifx Sep 27, 2024
3314d80
feat(1264): improve aria label
pfafffabian-ifx Oct 17, 2024
a18a466
fix(1264): alert to comply with WCAG 1.4.1
pfafffabian-ifx Oct 17, 2024
431c88a
fix(1264): add focus indicator to alert
pfafffabian-ifx Oct 17, 2024
429b28c
fix(1264): increase button size of alert (WCAG 2.5.8)
pfafffabian-ifx Oct 17, 2024
02011a5
fix(1264): rename ariaLive prop to ifxAriaLive
pfafffabian-ifx Oct 17, 2024
afbe67b
Merge 02011a58d7c9f597645128d486aae2bb34f2f24e into 1e29b525c3597ef81…
pfafffabian-ifx Oct 17, 2024
e93b409
Update Stencil library version to 25.11.0--canary.1545.afbe67b88f343e…
invalid-email-address Oct 17, 2024
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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"@infineon/infineon-design-system-react": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"@infineon/infineon-design-system-vue": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.0",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"version": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.0",
"command": {
"publish": {
"verifyAccess": false
Expand Down
47 changes: 9 additions & 38 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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"version": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.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": "^25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"@infineon/infineon-design-system-angular": "^25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"version": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.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": "3.3.3",
"@infineon/infineon-design-system-stencil": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0"
"@infineon/infineon-design-system-stencil": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"version": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.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": "3.3.3",
"@infineon/infineon-design-system-stencil": "^25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"@infineon/infineon-design-system-stencil": "^25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"version": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.0",
"description": "Infineon design system Stencil web components for Vue",
"main": "./dist/index.js",
"types": "./dist/index.d.ts",
Expand Down Expand Up @@ -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.1545.afbe67b88f343ef8af0c674d6402215c66a294be.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": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
"version": "25.11.0--canary.1545.afbe67b88f343ef8af0c674d6402215c66a294be.0",
"private": false,
"description": "Infineon design system Stencil web components",
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
Expand Down
27 changes: 25 additions & 2 deletions packages/components/src/components/alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,21 @@
justify-content: flex-start;
//min-width: tokens.$ifxSize500;

& a {
& button {
all: unset;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
color: tokens.$ifxColorBaseBlack;
height: tokens.$ifxSize300;
width: tokens.$ifxSize300;


&:focus {
outline: 2px solid tokens.$ifxColorOcean500;
outline-offset: 2px;
}
}
}
}
Expand All @@ -75,9 +87,20 @@
justify-content: center;
min-width: tokens.$ifxSize500;

& a {
& button {
all: unset;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
color: tokens.$ifxColorBaseBlack;
height: tokens.$ifxSize300;
width: tokens.$ifxSize300;

&:focus {
outline: 2px solid tokens.$ifxColorOcean500;
outline-offset: 2px;
}
}
}

Expand Down
61 changes: 36 additions & 25 deletions packages/components/src/components/alert/alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +5,62 @@ import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';
styleUrl: 'alert.scss',
shadow: true,
})

export class Alert {
@Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';
@Prop() icon: string;
@Event() ifxClose: EventEmitter;
@Prop() closable: boolean = true;

handleClose() {
this.ifxClose.emit()
@Prop() ariaIconLabel: string;
@Prop() ifxAriaLive = 'assertive';

alertTypeDescription = {
"primary": 'Neutral alert',
"success": 'Success Alert',
"danger": 'Error Alert',
"warning": 'Warning Alert',
"info": 'Neutral alert',
};

handleClose() {
this.ifxClose.emit();
}

render() {
renderCloseButton() {
return (
this.variant === 'info'
? <div class='alert__info-wrapper'>
<div class='info__text-wrapper'>
<div class="close-icon-wrapper">
<button onClick={this.handleClose.bind(this)} aria-label="Dismiss alert">
<ifx-icon icon="cross-16" />
</button>
</div>
);
}

render() {
return this.variant === 'info' ? (
<div class="alert__info-wrapper" role="alert" aria-live={this.ifxAriaLive} aria-description={this.alertTypeDescription[this.variant]} aria-labelledby="alert-text alert-description">
<div class="info__text-wrapper">
<div class="info__headline-wrapper">
<slot name='headline' />
<slot name="headline" />
</div>
<div class="info__description-wrapper">
<slot name='desc' />
<div id="alert-description" class="info__description-wrapper">
<slot name="desc" />
</div>
</div>
{ this.closable && <div class="close-icon-wrapper">
<a href={undefined} onClick={this.handleClose.bind(this)}>
<ifx-icon icon='cross-16' />
</a>
</div> }
{this.closable ? this.renderCloseButton() : null}
</div>
: <div class={`alert ${this.variant}`}>
) : (
<div class={`alert ${this.variant}`} role="alert">
{this.icon && (
<div class='icon-wrapper'>
<div class="icon-wrapper">
<ifx-icon icon={this.icon} />
</div>
)
}
)}
<div class="alert-text">
<slot />
</div>
{ this.closable && <div class="close-icon-wrapper">
<a href={undefined} onClick={this.handleClose.bind(this)}>
<ifx-icon icon='cross-16' />
</a>
</div> }
</div >
{this.closable ? this.renderCloseButton() : null}
</div>
);
}
}
12 changes: 7 additions & 5 deletions packages/components/src/components/alert/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,13 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------- | ----------------------------------------------------------- | ----------- |
| `closable` | `closable` | | `boolean` | `true` |
| `icon` | `icon` | | `string` | `undefined` |
| `variant` | `variant` | | `"danger" \| "info" \| "primary" \| "success" \| "warning"` | `'primary'` |
| Property | Attribute | Description | Type | Default |
| --------------- | ----------------- | ----------- | ----------------------------------------------------------- | ------------- |
| `ariaIconLabel` | `aria-icon-label` | | `string` | `undefined` |
| `closable` | `closable` | | `boolean` | `true` |
| `icon` | `icon` | | `string` | `undefined` |
| `ifxAriaLive` | `ifx-aria-live` | | `string` | `'assertive'` |
| `variant` | `variant` | | `"danger" \| "info" \| "primary" \| "success" \| "warning"` | `'primary'` |


## Events
Expand Down