Skip to content

Conversation

@huangkevin-apr
Copy link
Contributor

Issue Description

This PR fixes an accessibility violation reported by automated a11y checks.
When running IBM Accessibility Checker (Version 4.0.9) on the showcase page, I find some accessibility violations as below.

image

The "Learn more" buttons in the showcase section have insufficient color contrast, failing to meet WCAG AA accessibility requirements. As shown in the accessibility checker:

Current contrast ratio: 3.06:1
Required contrast ratio: 4.5:1 (WCAG AA standard for text size 15px and weight 500)

This affects users with low vision or color blindness who rely on adequate contrast to read text content.

Fix Description

Updated the button text color from --ifm-color-emphasis-600 to --ifm-color-emphasis-800 in website/src/css/showcase.scss.
This change increases the contrast ratio to meet WCAG AA requirements while maintaining the design's visual hierarchy.

Generated Patch of A11YRepair:

diff --git a/website/src/css/showcase.scss b/website/src/css/showcase.scss
index 49f15912..2999191a 100644
--- a/website/src/css/showcase.scss
+++ b/website/src/css/showcase.scss
@@ -174,7 +174,7 @@ html[data-theme="dark"] {
   }
 
   .articleButton {
-    color: var(--ifm-color-emphasis-600);
+    color: var(--ifm-color-emphasis-800);
     font-weight: 500;
     font-size: 15px;
     padding: 6px 12px;

Note: The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications. The generated fixes were manually reviewed and validated before submission, which ensures proper contrast in both light mode and dark mode, providing consistent accessibility across all theme variations.

Fix Before:
image

Fix After:
image

@meta-cla meta-cla bot added the CLA Signed label Jan 8, 2026
@netlify
Copy link

netlify bot commented Jan 8, 2026

Deploy Preview for react-native ready!

Name Link
🔨 Latest commit 4d2a772
🔍 Latest deploy log https://app.netlify.com/projects/react-native/deploys/695f7675b4af8b0008446e4a
😎 Deploy Preview https://deploy-preview-4956--react-native.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Collaborator

@Simek Simek 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 catching that, and proposing the correction, LGTM! 🚀

@Simek Simek merged commit eeefda6 into facebook:main Jan 8, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants