starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-26 01:06:00 +03:00

[GH-ISSUE #1106] Method dropdown is not keyboard navigable #389

New issue

Closed

opened 2026-03-16 15:02:34 +03:00 by kerem · 6 comments

kerem commented

2026-03-16 15:02:34 +03:00

Owner

Originally created by @z33212 on GitHub (Aug 23, 2020).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1106

Originally assigned to: @liyasthomas on GitHub.

Describe the bug
Currently, there doesn't appear to be any way to change the request method using the keyboard. This seems to be caused by the fact that this dropdown component uses an <input> instead of a <select>, with a popover used to recreate native functionality. This behavior seems to be unique to this dropdown, since the rest appear to use a native <select>.

To Reproduce

On the homepage of the app, press tab to navigate to to the "method" dropdown.
Once this dropdown has focus, attempt to change its value with the arrow keys

Expected behavior
I would expect this dropdown to behave like the other dropdowns in the app which use a native select so that they are fully keyboard navigable.

Screenshots

Additional context
I'm working with a team that has considered moving away from Postman for our API testing due to accessibility issues (the Postman app has almost no keyboard navigability). We were super excited to find Postwoman because it has MUCH better keyboard navigability overall! 😃 This is especially important because some of our developers are blind and need to use the keyboard to get around. One dev let me know though, that he couldn't seem to be able to change the HTTP method. Like I said, Postwoman is otherwise really awesome in this department, so it would be great if this could be fixed so everybody could use the app to its fullest.

Originally created by @z33212 on GitHub (Aug 23, 2020). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1106 Originally assigned to: @liyasthomas on GitHub. **Describe the bug** Currently, there doesn't appear to be any way to change the request method using the keyboard. This seems to be caused by the fact that this dropdown component uses an `<input>` instead of a `<select>`, with a popover used to recreate native functionality. This behavior seems to be unique to this dropdown, since the rest appear to use a native `<select>`. **To Reproduce** - On the homepage of the app, press tab to navigate to to the "method" dropdown. - Once this dropdown has focus, attempt to change its value with the arrow keys **Expected behavior** I would expect this dropdown to behave like the other dropdowns in the app which use a native select so that they are fully keyboard navigable. **Screenshots** ![image](https://user-images.githubusercontent.com/60930762/90968813-e8ddf180-e4be-11ea-9e78-903f904d5beb.png) **Additional context** I'm working with a team that has considered moving away from Postman for our API testing due to accessibility issues (the Postman app has almost no keyboard navigability). We were super excited to find Postwoman because it has MUCH better keyboard navigability overall! 😃 This is especially important because some of our developers are blind and need to use the keyboard to get around. One dev let me know though, that he couldn't seem to be able to change the HTTP method. Like I said, Postwoman is otherwise really awesome in this department, so it would be great if this could be fixed so everybody could use the app to its fullest.

kerem

2026-03-16 15:02:34 +03:00

closed this issue
added the
feature
label

kerem commented

2026-03-16 15:02:51 +03:00

Author

Owner

@liyasthomas commented on GitHub (Aug 23, 2020):

This is especially important because some of our developers are blind and need to use the keyboard to get around. One dev let me know though, that he couldn't seem to be able to change the HTTP method.

You guys are the best. I respect everybody in your team.

I'm working on this feature.

We feel proud to make this platform. cc: @AndrewBastin

Let me know if there's anything else that can be done from our side to make this accessible for everyone.

@liyasthomas commented on GitHub (Aug 23, 2020): > This is especially important because some of our developers are blind and need to use the keyboard to get around. One dev let me know though, that he couldn't seem to be able to change the HTTP method. You guys are the best. I respect everybody in your team. I'm working on this feature. We feel proud to make this platform. cc: @AndrewBastin Let me know if there's anything else that can be done from our side to make this accessible for everyone.

kerem commented

2026-03-16 15:02:56 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Aug 23, 2020):

We were super excited to find Postwoman because it has MUCH better keyboard navigability overall! smiley This is especially important because some of our developers are blind and need to use the keyboard to get around. One dev let me know though, that he couldn't seem to be able to change the HTTP method. Like I said, Postwoman is otherwise really awesome in this department, so it would be great if this could be fixed so everybody could use the app to its fullest.

Oh wow! Thanks a ton for the heads up. Indeed, a11y is one of those things people ignore or forget to implement (we forget sometimes too). But it just warms my heart (actually tearing up right now) to see people with different needs and different backgrounds are using our tool.

Please, do let us know if you and your team have any a11y requirements and we will work our best to make Hoppscotch more accessible!

@AndrewBastin commented on GitHub (Aug 23, 2020): > We were super excited to find Postwoman because it has MUCH better keyboard navigability overall! smiley This is especially important because some of our developers are blind and need to use the keyboard to get around. One dev let me know though, that he couldn't seem to be able to change the HTTP method. Like I said, Postwoman is otherwise really awesome in this department, so it would be great if this could be fixed so everybody could use the app to its fullest. Oh wow! Thanks a ton for the heads up. Indeed, a11y is one of those things people ignore or forget to implement (we forget sometimes too). But it just warms my heart (actually tearing up right now) to see people with different needs and different backgrounds are using our tool. Please, do let us know if you and your team have any a11y requirements and we will work our best to make Hoppscotch more accessible!

kerem commented

2026-03-16 15:03:01 +03:00

Author

Owner

@z33212 commented on GitHub (Aug 23, 2020):

Oh wow! Thanks a ton for the heads up. Indeed, a11y is one of those things people ignore or forget (we forget sometimes too). But it just warms my heart to see people with different needs and different backgrounds are using our tool.

Please, do let us know if you and your team have any a11y requirements and we will work our best to make Hoppscotch more accessible!

The unbelievably quick response time here and immediate support warms my heart! This team is doing amazing work and I have to say this is one of the best responses to a11y concerns I've ever seen. Again, thanks so much! Our devs (and others around the world, I'm sure) will be delighted. 🤗

@z33212 commented on GitHub (Aug 23, 2020): > Oh wow! Thanks a ton for the heads up. Indeed, a11y is one of those things people ignore or forget (we forget sometimes too). But it just warms my heart to see people with different needs and different backgrounds are using our tool. > > Please, do let us know if you and your team have any a11y requirements and we will work our best to make Hoppscotch more accessible! The unbelievably quick response time here and immediate support warms _my_ heart! This team is doing amazing work and I have to say this is one of the best responses to a11y concerns I've ever seen. Again, thanks so much! Our devs (and others around the world, I'm sure) will be delighted. 🤗

kerem commented

2026-03-16 15:03:06 +03:00

Author

Owner

@liyasthomas commented on GitHub (Aug 23, 2020):

Hey @z33212 , let me know if #1107 solves your issues. We're open to any feedbacks regarding making Hoppscotch work for everyone.

Deploy Preview: https://hoppscotch-git-a11y.hoppscotch.vercel.app

@liyasthomas commented on GitHub (Aug 23, 2020): Hey @z33212 , let me know if #1107 solves your issues. We're open to any feedbacks regarding making Hoppscotch work for everyone. Deploy Preview: https://hoppscotch-git-a11y.hoppscotch.vercel.app

kerem commented

2026-03-16 15:03:11 +03:00

Author

Owner

@z33212 commented on GitHub (Aug 28, 2020):

Hey @z33212 , let me know if #1107 solves your issues. We're open to any feedbacks regarding making Hoppscotch work for everyone.

Just tried this out -- the keyboard shortcuts work and I was able to change the method with the keyboard alone, awesome! In my opinion it still might be worth revisiting this dropdown to make it behave more like a native select later, since using the arrow keys doesn't appear to work, and a person who is using the keyboard would expect that they can change the options with the arrow keys. The only issue with special keyboard shortcuts is that a user wouldn't immediately know that they have those available, so a developer with vision impairments might still be confused (at least at first). But that's relatively minor -- I confirmed that the shortcuts work and that's great! Thanks so much! Our whole team can use the app now for testing. 😁

@z33212 commented on GitHub (Aug 28, 2020): > Hey @z33212 , let me know if #1107 solves your issues. We're open to any feedbacks regarding making Hoppscotch work for everyone. Just tried this out -- the keyboard shortcuts work and I was able to change the method with the keyboard alone, awesome! In my opinion it still might be worth revisiting this dropdown to make it behave more like a native select later, since using the arrow keys doesn't appear to work, and a person who is using the keyboard would expect that they can change the options with the arrow keys. The only issue with special keyboard shortcuts is that a user wouldn't immediately know that they have those available, so a developer with vision impairments might still be confused (at least at first). But that's relatively minor -- I confirmed that the shortcuts work and that's great! Thanks so much! Our whole team can use the app now for testing. 😁

kerem commented

2026-03-16 15:03:16 +03:00

Author

Owner

@liyasthomas commented on GitHub (Aug 28, 2020):

@z33212 I really wanted to implement that native select with last iteration itself. But the component we used isn't supporting key binding. I'll need lil more time to figure out either go with a native select or add key binding feature to that select component. Stay with us - will update as soon as it's implemented. Do drop your valuable comments on anything that need to be implemented / improved.

@liyasthomas commented on GitHub (Aug 28, 2020): @z33212 I really wanted to implement that native select with last iteration itself. But the component we used isn't supporting key binding. I'll need lil more time to figure out either go with a native select or add key binding feature to that select component. Stay with us - will update as soon as it's implemented. Do drop your valuable comments on anything that need to be implemented / improved.

kerem referenced this issue

2026-03-17 00:17:18 +03:00

[PR #391] [MERGED] App UI #2599