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

feat[dev]: ✨ implement A11y improvements to sd-teaser and sd-teaser-media #1491

Open
7 of 16 tasks
Tracked by #1465
yoezlem opened this issue Oct 9, 2024 · 3 comments · May be fixed by #1625
Open
7 of 16 tasks
Tracked by #1465

feat[dev]: ✨ implement A11y improvements to sd-teaser and sd-teaser-media #1491

yoezlem opened this issue Oct 9, 2024 · 3 comments · May be fixed by #1625
Assignees
@coraliefeil @smfonseca @EllaELSA
Labels
A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS 🔧 code needs changes in code Critical A11y Issue Require immediate attention and resolution Subtask Epic subtasks

Comments

@yoezlem
Copy link
Contributor

yoezlem commented Oct 9, 2024 •
edited by smfonseca
Loading

Description

This task describes the Storybook implementation for the sd-teaser and sd-teaser-media component as part of the A11y improvements outlined in Epic #1465.

A11y improvements for sd-teaser and sd-teaser-media can be found here: sd-teaser and sd-teaser-media Notes.

Open Questions / Todos

  • Nested interactive elements is going to be tackeld in feat: ✨ new nested-links-concept #1541
  • Transparency: Align with brand A11y expert (or @coraliefeil & @EllaELSA) as he said 80% transparency is fine
  • Focus style: Clarify on the focus style as the inverted button has white focus => test the template and/or fix it
  • Expandable teaser:
    • extend the A11y hint to make clear it should not contain any important content AND its only for mouse users.
    • add "aria-hidden" attribute to the expandable part in order to make it "not available" to keyboard users
  • Add "notes" to a11y dad (dos and donts)
  • Add "best practices" to a11y dad (dos and donts)
  • copy A11y section from figma zu Storybook

Template Ticket

DoR

  • Item has been estimated by the team
  • Item dependencies have been identified and documented

DoD

  • Documentation has been created/updated (if applicable)
  • Migration Guide has been created/updated (if applicable)
  • Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
  • Relevant stories (Features, A11y) are created/updated
  • Implementation works successfully on feature branch
@yoezlem yoezlem added 🔧 code needs changes in code Subtask Epic subtasks labels Oct 9, 2024
@yoezlem yoezlem mentioned this issue Oct 9, 2024
Open
74 tasks
@yoezlem yoezlem added the A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS label Oct 9, 2024
@karlbaumhauer karlbaumhauer moved this from 📋 Backlog to ⚙️ To be refined in Solid Design System Project Board Oct 11, 2024
@yoezlem yoezlem added the Critical A11y Issue Require immediate attention and resolution label Oct 11, 2024
@yoezlem yoezlem moved this from ⚙️ To be refined to 🔖 Ready in Solid Design System Project Board Oct 11, 2024
This was referenced Nov 4, 2024
Open
Open
@smfonseca smfonseca self-assigned this Nov 7, 2024
@smfonseca smfonseca moved this from 🔖 Ready to 🏗 In progress in Solid Design System Project Board Nov 7, 2024
@smfonseca
Copy link
Contributor

smfonseca commented Nov 7, 2024 •
edited
Loading

@coraliefeil @EllaELSA do you have any news regarding this point => Transparency: Align with brand A11y expert (or @coraliefeil & @EllaELSA) as he said 80% transparency is fine

It seems the only variant which is not using 80% transparency right now is gradient-dark with 60%. Should I update it?

Also regarding this => copy A11y section from figma zu Storybook
Currently there is only one point in the accessility section of the teaser media. Will there be anything else to include or it's only this?

Thank you

@smfonseca smfonseca linked a pull request Nov 7, 2024 that will close this issue
Open
5 tasks
@coraliefeil
Copy link
Contributor

coraliefeil commented Nov 12, 2024 •
edited
Loading

@coraliefeil @EllaELSA do you have any news regarding this point => Transparency: Align with brand A11y expert (or @coraliefeil & @EllaELSA) as he said 80% transparency is fine

It seems the only variant which is not using 80% transparency right now is gradient-dark with 60%. Should I update it?

Also regarding this => copy A11y section from figma zu Storybook Currently there is only one point in the accessility section of the teaser media. Will there be anything else to include or it's only this?

Thank you

@smfonseca we are save contrast-wise with 4.79:1 (white text on gradient #051530 (60% - 75%) on image.

For gradient-white we are also save btw ... 6.23:1 (black #181818 text onn gradient white (60%-75%) on image.

No action needed.

@smfonseca
Copy link
Contributor

Thanks @coraliefeil, I will then consider the transparency criteria as done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@coraliefeil coraliefeil

@smfonseca smfonseca

@EllaELSA EllaELSA

Labels
A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS 🔧 code needs changes in code Critical A11y Issue Require immediate attention and resolution Subtask Epic subtasks
Projects
Solid Design System Project Board
Status: 👀 In review
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: sd-teaser and sd-teaser-media a11y solid-design-system/solid
4 participants
@coraliefeil @smfonseca @yoezlem @EllaELSA