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

Fix component colors contrasts #2250

Open
42 tasks
larsrickert opened this issue Dec 5, 2024 · 0 comments
Open
42 tasks

Fix component colors contrasts #2250

larsrickert opened this issue Dec 5, 2024 · 0 comments
Assignees
@larsrickert
Labels
0-refinement All issues that can or need to be estimated in our next refinement dev Requires technical expertise ux Requires UX/UI design

Comments

@larsrickert
Copy link
Collaborator

larsrickert commented Dec 5, 2024 •
edited
Loading

Why?

Currently, we disable the automated "color-contrast" accessibility testing in our Playwright screenshot tests because a lot of components do not fulfil the AA color contrast requirements.

We want to improve the contrast of our components so we can ideally re-enable the color contrast tests.

Acceptance criteria

  • the Playwright accessibility test for color-contrast is re-enabled in file packages/sit-onyx/src/playwright/a11y.ts
  • color contrasts are fixed for all components. As of 05.12.2024 this affects:
    • Stepper
    • Input
    • Textarea
    • Select
    • Button
    • ComponentShowcase
    • SelectInput
    • Table
    • Tabs
    • Toast
    • DatePicker
    • NavButton
    • ToastMessage
    • Avatar
    • DataGridRenderer
    • NavBar
    • Pagination
    • SelectOption
    • Tag
    • EditGridElementDialog
    • GridBadge
    • GridPlayground
    • Badge
    • Empty
    • Link
    • MoreList
    • ColorSchemeDialog
    • ColorSchemeMenuItem
    • FlyoutMenu
    • NavItem
    • Timer
    • UserMenu

Applicable ARIA Pattern

https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=playwright

Definition of Done

  • Should be covered by tests:

    • functional tests (Playwright or unit test)
    • visual tests (Playwright screenshots)

  • Make sure, that

    • follow-up tickets were created if necessary
    • updated version + documentation is deployed
    • Storybook can show the feature
    • Storybook code snippet of new/changed examples are checked that they are generated correctly
    • Namings are aligned with Figma

Approval

Storybook
Documentation

  • Checked and approved by
    • designer
    • dev
@larsrickert larsrickert added 0-refinement All issues that can or need to be estimated in our next refinement dev Requires technical expertise ux Requires UX/UI design labels Dec 5, 2024
@larsrickert larsrickert self-assigned this Dec 5, 2024
@larsrickert larsrickert added this to onyx Dec 5, 2024
@github-project-automation github-project-automation bot moved this to New in onyx Dec 5, 2024
@larsrickert larsrickert mentioned this issue Dec 5, 2024
Merged
larsrickert added a commit that referenced this issue Dec 6, 2024
@larsrickert
refactor(a11y): globally disable color-contrast tests (#2251)
3bb4f1e 
Currently we are disabling color-contrast Playwright rules redundantely
in multiple places.
I changed it to just disable it in one single global config and also
refined a follow up ticket #2250 to address the contrast issues.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@larsrickert larsrickert

Labels
0-refinement All issues that can or need to be estimated in our next refinement dev Requires technical expertise ux Requires UX/UI design
Projects
onyx
Status: New
Milestone
No milestone
Development

No branches or pull requests
1 participant
@larsrickert