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.

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

fix(link): fix accessibility by inlining link functionality into Shadow DOM #2571

Merged
merged 21 commits into from
May 13, 2024

Conversation

TomMenga
Copy link
Contributor

@TomMenga TomMenga commented Apr 11, 2024

This PR Closes #2514, #2604, #2376, #2496


BEGIN_COMMIT_OVERRIDE
fix(sbb-link): fix accessibility by inlining link functionality into Shadow DOM

BREAKING CHANGE: Due to screen reader limitations, we had to move the link role inside the Shadow DOM. Therefore, for the following components, replace the [aria-label] usages with [accessibility-label] attribute or accessibilityLabel property:

  • sbb-breadcrumb
  • sbb-button-link, sbb-secondary-button-link, sbb-tertiary-button-link, sbb-transparent-button-link
  • sbb-card-link
  • sbb-header-link
  • sbb-link, sbb-block-link
  • sbb-menu-link
  • sbb-navigation-link
  • sbb-teaser, sbb-teaser-hero, sbb-teaser-paid

END_COMMIT_OVERRIDE

@TomMenga TomMenga self-assigned this Apr 11, 2024
@github-actions github-actions bot added the pr: peer review required A peer review is required for this pull request label Apr 11, 2024
@TomMenga TomMenga added the pr: lead review required A lead review is required for this pull request label Apr 11, 2024
Copy link
Contributor

@DavideMininni-Fincons DavideMininni-Fincons left a comment

Choose a reason for hiding this comment

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

Very good 👍
General comment: the change from aria-label to accessibility-label must be added in the readme of all the components influenced by this changes.

@github-actions github-actions bot temporarily deployed to preview-pr2571 April 16, 2024 09:43 Inactive
@codecov-commenter
Copy link

codecov-commenter commented Apr 16, 2024

Codecov Report

Attention: Patch coverage is 95.34884% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 93.20%. Comparing base (e6397df) to head (3bb30db).
Report is 75 commits behind head on main.

Files Patch % Lines
src/components/menu/menu/menu.ts 0.00% 4 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2571      +/-   ##
==========================================
+ Coverage   93.18%   93.20%   +0.01%     
==========================================
  Files         316      316              
  Lines       25389    25344      -45     
  Branches     2063     2069       +6     
==========================================
- Hits        23660    23621      -39     
+ Misses       1696     1690       -6     
  Partials       33       33              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@github-actions github-actions bot temporarily deployed to preview-pr2571 April 17, 2024 08:14 Inactive
@github-actions github-actions bot temporarily deployed to preview-pr2571 April 18, 2024 08:11 Inactive
@github-actions github-actions bot temporarily deployed to preview-pr2571 April 18, 2024 12:29 Inactive
@github-actions github-actions bot temporarily deployed to preview-pr2571 April 18, 2024 13:39 Inactive
@github-actions github-actions bot temporarily deployed to preview-pr2571 April 18, 2024 13:50 Inactive
@TomMenga TomMenga linked an issue Apr 24, 2024 that may be closed by this pull request
3 tasks
@github-actions github-actions bot temporarily deployed to preview-pr2571 April 29, 2024 08:14 Inactive
Copy link
Contributor

@jeripeierSBB jeripeierSBB left a comment

Choose a reason for hiding this comment

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

Thanks for deep diving here! A few fixes needed and maybe more manual testing as I found some not working or wrongly displayed focus outlines?

src/components/core/base-elements/link-base-element.ts Outdated Show resolved Hide resolved
src/components/teaser/teaser.scss Outdated Show resolved Hide resolved
src/components/navigation/common/navigation-action.scss Outdated Show resolved Hide resolved
src/components/link/common/link.scss Outdated Show resolved Hide resolved
src/components/link/common/link.scss Show resolved Hide resolved
src/components/header/common/header-action.scss Outdated Show resolved Hide resolved
@github-actions github-actions bot temporarily deployed to preview-pr2571 May 6, 2024 07:20 Inactive
@github-actions github-actions bot temporarily deployed to preview-pr2571 May 6, 2024 12:55 Inactive
Copy link
Contributor

@jeripeierSBB jeripeierSBB left a comment

Choose a reason for hiding this comment

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

LGTM, thanks for all the patience! :-). Please wait with merge, as we maybe have to release another non breaking fix.

@github-actions github-actions bot added pr: lead review approved Pull request has been approved by a lead review and removed pr: lead review required A lead review is required for this pull request labels May 8, 2024
@jeripeierSBB jeripeierSBB requested review from DavideMininni-Fincons and removed request for DavideMininni-Fincons May 8, 2024 14:30
Copy link
Contributor

@DavideMininni-Fincons DavideMininni-Fincons left a comment

Choose a reason for hiding this comment

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

LGTM, thanks

@github-actions github-actions bot added pr: peer review approved Pull request has been approved by a peer review and removed pr: peer review required A peer review is required for this pull request labels May 9, 2024
@jeripeierSBB jeripeierSBB changed the title refactor(link): inline link functionality fix(link): inline link functionality May 13, 2024
@jeripeierSBB jeripeierSBB merged commit 52344e9 into main May 13, 2024
35 checks passed
@jeripeierSBB jeripeierSBB deleted the fix/link-a11y branch May 13, 2024 08:53
@jeripeierSBB jeripeierSBB changed the title fix(link): inline link functionality fix(link): fix accessibility by inlining link functionality into Shadow DOM May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr: lead review approved Pull request has been approved by a lead review pr: peer review approved Pull request has been approved by a peer review preview-available
Projects
None yet
4 participants