add <label> tag for API Reference page #1560
Conversation
|
✔️ Deploy Preview for vuejs ready! 🔨 Explore the source changes: a73e169 🔍 Inspect the deploy log: https://app.netlify.com/sites/vuejs/deploys/621a3f53a568cd0008b16f63 😎 Browse the preview: https://deploy-preview-1560--vuejs.netlify.app |
There was a problem hiding this comment.
Thanks for the PR!
I think it might need a bit of tweaking for narrower viewport widths. There's a media query for that header, switching it from horizontal to vertical stacking when the viewport goes below 768px. I feel like the label and input should probably be left aligned and stacked vertically below that width.
What do you think?
|
Thanks for the comment. I believe this is fixed now. Happy to make any other changes if needed. |
src/api/ApiIndex.vue
Outdated
| @@ -204,6 +226,10 @@ h3 { | |||
| .header { | |||
| display: block; | |||
| } | |||
|
|
|||
| .api-filter { | |||
| justify-content: flex-start; | |||
There was a problem hiding this comment.
I'm wondering whether we could replace the justify-content: space-between in the earlier rule with flex-start? From what I can tell it would look exactly the same, but without needing this extra tweak in the media query?
There was a problem hiding this comment.
Yep, you are right. Will fix it. One more idea - is it OK to change the input type to "search" (instead of default "text) as we get the "x" (to cancel search) for free?
Description of Problem
The current API reference page has no tag for the filter input, which is important for A11y issues.
Proposed Solution
Inserted the tag along with some CSS changes.
Wording "Filter" and "Enter keyword" may be changed for something better.
Additional Information
My first PR (ever), please be gentle :)