[PR #2270] [MERGED] fix: add aria labels to forms #3696

New issue

Closed

opened 2026-03-17 01:17:24 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:17:24 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2270
Author: @sweetkane
Created: 4/17/2022
Status: ✅ Merged
Merged: 4/18/2022
Merged by: @liyasthomas

Base: main ← Head: main

📝 Commits (1)

b43fad8 fix: add aria labels to forms

📊 Changes

1 file changed (+1 additions, -0 deletions)

View changed files

📝 packages/hoppscotch-app/components/smart/EnvInput.vue (+1 -0)

📄 Description

Closes #2137

Description

Add code to make all forms on page have an aria label equivelent to their placeholder text. This fix works as long as forms have descriptive placeholder text. There may still be more screen reader accessibility improvements to make in the future, but it looks like every component is properly labeled for screen reader use at the moment.

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

Additional Information

Google Lighthouse accessibility rating before change

Google Lighthouse accessibility rating after change

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/2270 **Author:** [@sweetkane](https://github.com/sweetkane) **Created:** 4/17/2022 **Status:** ✅ Merged **Merged:** 4/18/2022 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (1) - [`b43fad8`](https://github.com/hoppscotch/hoppscotch/commit/b43fad88e5125869f3bc3632f77ef5269e46a78d) fix: add aria labels to forms ### 📊 Changes **1 file changed** (+1 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-app/components/smart/EnvInput.vue` (+1 -0) </details> ### 📄 Description   Closes #2137 ### Description Add code to make all forms on page have an aria label equivelent to their placeholder text. This fix works as long as forms have descriptive placeholder text. There may still be more screen reader accessibility improvements to make in the future, but it looks like every component is properly labeled for screen reader use at the moment. ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed ### Additional Information #### Google Lighthouse accessibility rating before change ![Lighthouse pre](https://user-images.githubusercontent.com/71854758/163727212-4113141b-d312-4d5e-bee0-0f4aa7236554.png) #### Google Lighthouse accessibility rating after change ![Lighthouse post](https://user-images.githubusercontent.com/71854758/163727210-06496ca7-97cb-4130-958d-76abde41195a.png) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>