Skip to content

Accessibility enhancement added to Link #1827

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.

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

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

Conversation

agata-kim
Copy link
Collaborator

@agata-kim agata-kim commented Apr 22, 2025

By creating this pull request you agree to the terms in CONTRIBUTING.md.
https://github.com/Infineon/.github/blob/master/CONTRIBUTING.md
--- DO NOT DELETE ANYTHING ABOVE THIS LINE ---

CONTRIBUTING.md also tells you what to expect in the PR process.

Description
Made link focusable if href is not empty. Added keyboard navigation and aria-label property.

Related Issue
#1264

Context
Accessibility enhancement

📦 Published PR as canary version: 33.1.2--canary.1827.d19d80549c3441a2a7191e77c8327f1a89e582c7.0

✨ Test out this PR locally via:

npm install @infineon/infineon-design-system-stencil@33.1.2--canary.1827.d19d80549c3441a2a7191e77c8327f1a89e582c7.0
# or 
yarn add @infineon/infineon-design-system-stencil@33.1.2--canary.1827.d19d80549c3441a2a7191e77c8327f1a89e582c7.0

@agata-kim agata-kim self-assigned this Apr 22, 2025
@agata-kim agata-kim requested a review from verena-ifx April 22, 2025 15:30
@agata-kim agata-kim changed the title Accessibility enhancement added to link Accessibility enhancement added to Link Apr 22, 2025
Copy link
Contributor

github-actions bot commented Apr 22, 2025

PR Preview Action v1.6.1

🚀 View preview at
https://Infineon.github.io/infineon-design-system-stencil/pr-preview-angular-example/pr-1827/

Built to branch gh-pages at 2025-04-24 10:53 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Copy link
Contributor

--STORYBOOK-PREVIEW--

@agata-kim agata-kim linked an issue Apr 23, 2025 that may be closed by this pull request
@@ -9,7 +9,8 @@ export default {
size: 'm',
disabled: false,
variant: 'bold',
download: ""
download: "",
AriaLabel: 'Link',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you change this to be lowercase? just to be consistent here

@@ -88,7 +100,7 @@ export default {
};

const DefaultTemplate = args =>
`<ifx-link href="${args.href}" target="${args.target}" size="${args.size}" variant="${args.variant}" disabled="${args.disabled}" download="${args.download}" >
`<ifx-link href="${args.href}" aria-label="${args.AriaLabel}" target="${args.target}" size="${args.size}" variant="${args.variant}" disabled="${args.disabled}" download="${args.download}" >
${args.label}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and same here then :)

@@ -15,6 +15,7 @@ export class Link {
@Prop() size: string;
@Prop() disabled: boolean = false;
@Prop() download: string;
@Prop() AriaLabel: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AriaLabel should be lowercase > ariaLabel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Accessibility enhancement
2 participants