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]: ✨ rem vs. px #1546

Open
9 tasks
karlbaumhauer opened this issue Oct 11, 2024 · 1 comment
Open
9 tasks

feat[dev]: ✨ rem vs. px #1546

karlbaumhauer opened this issue Oct 11, 2024 · 1 comment
Assignees
@yoezlem
Labels
A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS 🔧 code needs changes in code

Comments

@karlbaumhauer
Copy link
Contributor

karlbaumhauer commented Oct 11, 2024 •
edited
Loading

User Story

We need to discuss how we want to handle rem vs. px issues as the topic came up again in our a11y audit => https://www.notion.so/sd-badge-103f3f6e1bc080619981e3e8d9546a9f?d=7e85df0b8e43468297c5a7c89b1e0b01&pvs=4#104f3f6e1bc080b0be0ec6392d47b458

Suggested Solution

either switch to rem or use a tool to convert to rem?!?

Technical Information

DoR

  • Item has business value
  • Item has been estimated by the team
  • Item is clear and well-defined
  • Item dependencies have been identified

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
@karlbaumhauer karlbaumhauer added 🔧 code needs changes in code A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS labels Oct 11, 2024
@karlbaumhauer karlbaumhauer mentioned this issue Oct 11, 2024
Closed
14 tasks
@mariohamann
Copy link
Contributor

The audit explicitly stated this for:

  • the sd-badge
  • for font-size

When looking deeper into the code, it's obvious why: The font-size of the sd-badge was written as an arbitrary value text-[12px]. All other font-sizes are automatically set with rem.

Therefore this could/should be changed in the sd-badge ticket directly @smfonseca. Maybe we find other occasions as well. Nevertheless while increasing the default text size in the browser settings I saw some other issues:

Firefox:
CleanShot 2024-10-16 at 07 06 41@2x

Chromium:
CleanShot 2024-10-16 at 07 10 33@2x

Safari (Bug in Button):
CleanShot 2024-10-16 at 07 11 04@2x

@smfonseca smfonseca mentioned this issue Oct 16, 2024
Merged
5 tasks
smfonseca added a commit that referenced this issue Oct 31, 2024
@smfonseca
fix: sd badge a11y (#1563)
762656f 
<!-- ## Title: Please consider adding the [skip chromatic] flag to the
PR title in case you dont need chromatic testing your changes. -->
## Description:
Addresses the following tickets:
- [1466](#1466)
- [1512](#1512)
- [1546](#1546)
- [1537](#1537)

## Definition of Reviewable:
<!-- *PR notes: Irrelevant elements should be removed.* -->
- [ ] Documentation is created/updated
- [ ] Migration Guide is created/updated
- [x] E2E tests (features, a11y, bug fixes) are created/updated
<!-- *If this PR includes a bug fix, an E2E test is necessary to verify
the change. If the fix is purely visual, ensuring it is captured within
our chromatic screenshot tests is sufficient.* -->
- [x] Stories (features, a11y) are created/updated
- [x] relevant tickets are linked
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yoezlem yoezlem

Labels
A11y Audit Identifies tasks related to accessibility improvements identified in the A11y audit of the DS 🔧 code needs changes in code
Projects
Solid Design System Project Board
Status: 🛠️ To be pre-refined
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mariohamann @karlbaumhauer @yoezlem