Skip to content

chore: updating design tokens to 1.13 includes accessibility updates#8402

Closed
georgewrmarshall wants to merge 1 commit intomainfrom
fix/design-tokens-v1.13
Closed

chore: updating design tokens to 1.13 includes accessibility updates#8402
georgewrmarshall wants to merge 1 commit intomainfrom
fix/design-tokens-v1.13

Conversation

@georgewrmarshall
Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall commented Jan 25, 2024

Description

This PR updates the design-tokens package to v1.13.0, introducing accessibility enhancements to various color categories, including warning/default, success/default, and inverse colors. Additionally, it incorporates pressed tokens.

For a detailed overview of the color updates, please refer to this PR in the design-tokens repository.

The accessibility improvements ensure that:

  • Text using the warning/default color now meets WCAG AA color contrast requirements.
  • Text using the success/default color now meets WCAG AA color contrast requirements.
  • Text using the primary/inverse, error/inverse, success/inverse, and info/inverse colors in dark mode now meets WCAG AA color contrast requirements.

These updates enhance the accessibility and user experience for vision impaired folks in mobile.

Related issues

Related: https://github.com/MetaMask/metamask-extension#workspaces/design-system-61e8a2ae77c3a60012e5003c/issues/zh/329

Manual testing steps

The easiest way to review these accessibility updates is to check storybook

  1. Go to the root index.js
  2. Uncomment storybook
  3. Run storybook

Screenshots/Recordings

Before

TBC

After

TBC

Pre-merge author checklist

  • I’ve followed MetaMask Coding Standards.
  • I've clearly explained what problem this PR is solving and how it is solved.
  • I've linked related issues
  • I've included manual testing steps
  • I've included screenshots/recordings if applicable
  • I’ve included tests if applicable
  • I’ve documented my code using JSDoc format if applicable
  • I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
  • I’ve properly set the pull request status:
    • In case it's not yet "ready for review", I've set it to "draft".
    • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@georgewrmarshall georgewrmarshall added the team-design-system All issues relating to design system in Mobile label Jan 25, 2024
@georgewrmarshall georgewrmarshall self-assigned this Jan 25, 2024
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 25, 2024

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@georgewrmarshall georgewrmarshall changed the title Updating design tokens to 1.13 includes accessibility updates chore: updating design tokens to 1.13 includes accessibility updates Jan 25, 2024
@socket-security
Copy link
Copy Markdown

socket-security bot commented Jan 25, 2024

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@metamask/design-tokens@1.13.0 None 0 132 kB brad.decker, danfinlay, gudahtt, ...9 more

🚮 Removed packages: npm/@metamask/design-tokens@1.12.0

View full report↗︎

@socket-security
Copy link
Copy Markdown

socket-security bot commented Jan 25, 2024

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert Package NoteSource
Unpublished package npm/@metamask/design-tokens@1.13.0
  • Version: 1/13/2000, 12:00:00 AM

View full report↗︎

Next steps

What are unpublished packages?

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Packages can be removed from the registry by manually un-publishing, a security issue removal, or may simply never have been published to the registry. Reliance on these packages will cause problem when they are not found.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

  • @SocketSecurity ignore npm/@metamask/design-tokens@1.13.0

@georgewrmarshall
Copy link
Copy Markdown
Contributor Author

georgewrmarshall commented Feb 2, 2024

Closing in favor of #8510

@github-actions github-actions bot locked and limited conversation to collaborators Feb 2, 2024
@georgewrmarshall georgewrmarshall deleted the fix/design-tokens-v1.13 branch February 2, 2024 00:15
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

No reviews

Assignees

@brianacnguyen brianacnguyen

Labels

team-design-system All issues relating to design system in Mobile

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@georgewrmarshall @brianacnguyen