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: made search bar accessible on homepage 🔍✨ #931

Merged
merged 2 commits into from
Aug 3, 2023
Merged

feat: made search bar accessible on homepage 🔍✨ #931

merged 2 commits into from
Aug 3, 2023

Conversation

0xabdulkhaliq
Copy link
Contributor

Close #860

Description

  • Added proper <label> element which has a "for" attribute that corresponds to the "id" attribute of the <input> element. This association is what makes the label functionally related to the input field.
  • When the user interacts with the label or its associated input, the browser handles the connection, ensuring proper focus and accessibility behavior.
  • By doing so, it helps users, including those with disabilities, better understand the purpose of the form control and interact with it more easily. The usage of <label> is crucial for all aspects of accessibility.
  • Additionally we make the <label> hidden by adding sr-only class, So that it couldn't visible to the user visually but it can be visible to the accessibility device user. We can ensure our search bar is completely accessible now.
  • Overall, this PR is intended to making the Search Bar accessible to accessibility devices with best standards.

Screenshots

  • We can't capture accessibility changes through screenshots as opposed to code changes since accessibility modifications are often imperceptible to the user, as their purpose is to assist disabled individuals.

@netlify
Copy link

netlify bot commented Aug 3, 2023 •
edited
Loading

✅ Deploy Preview for harmonious-stardust-e06cab ready!

Name Link
🔨 Latest commit 406825c
🔍 Latest deploy log https://app.netlify.com/sites/harmonious-stardust-e06cab/deploys/64cb22324243fa0007c8971a
😎 Deploy Preview https://deploy-preview-931--harmonious-stardust-e06cab.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 site configuration.

@0xabdulkhaliq
Copy link
Contributor Author

Your review is appreciated @panwar8279 🙌🏻

@0xabdulkhaliq
Copy link
Contributor Author

Note to reviewer @panwar8279 🚨

@panwar8279 panwar8279 added gssoc23 GirlScript summer of code level1 easy labels Aug 3, 2023
@panwar8279 panwar8279 merged commit 3c4f60b into ssitvit:main Aug 3, 2023
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
gssoc23 GirlScript summer of code level1 easy
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[FEATURE]: MAKE SEARCH BAR ACCESSIBLE 🔍
2 participants
@0xabdulkhaliq @panwar8279