Skip to content

fix(button): Fixes default button styling accessibility#2814

Merged
8bittitan merged 1 commit into
mainfrom
fix/search-button-default-accessibility
Dec 5, 2025
Merged

fix(button): Fixes default button styling accessibility#2814
8bittitan merged 1 commit into
mainfrom
fix/search-button-default-accessibility

Conversation

@8bittitan
Copy link
Copy Markdown
Contributor

What

Fixes #2804

Fixes some accessibility issues for default search button styling in light/dark mode.

Previews

Light before
light_before

Light after
light_after

Dark before
dark_before

Dark after
dark_after

@netlify
Copy link
Copy Markdown

netlify Bot commented Dec 4, 2025

Deploy Preview for docsearch-demo ready!

Name Link
🔨 Latest commit 7928761
🔍 Latest deploy log https://app.netlify.com/projects/docsearch-demo/deploys/6931c9e7becef10008f43e11
😎 Deploy Preview https://deploy-preview-2814--docsearch-demo.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.

@netlify
Copy link
Copy Markdown

netlify Bot commented Dec 4, 2025

Deploy Preview for docsearch failed.

Name Link
🔨 Latest commit 7928761
🔍 Latest deploy log https://app.netlify.com/projects/docsearch/deploys/6931c9e7ab1bcd0008031c74

Copy link
Copy Markdown
Member

@vascobettencourt vascobettencourt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@8bittitan 8bittitan merged commit b0a28f5 into main Dec 5, 2025
11 checks passed
@8bittitan 8bittitan deleted the fix/search-button-default-accessibility branch December 5, 2025 21:20
@slorber
Copy link
Copy Markdown
Contributor

slorber commented Dec 8, 2025

Thanks!

Are you sure this fixes the problem? Because my "light before" is significantly worse than the one you display in this PR

Mine:

image

Yours:

image

@8bittitan
Copy link
Copy Markdown
Contributor Author

@slorber I think the difference between ours was that the "light before" had an alpha channel on the background color 🤔

border-radius: 4px;
background-color: var(--docsearch-searchbox-background);
color: var(--docsearch-muted-color);
background-color: var(--docsearch-search-button-background);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just trying to understand: what's the difference between searchbox and search-button?

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DocSearch v4 button doesn't look good in light mode

3 participants