fix broken accessibility for search field

This PR fixes the incorrect use of `role=search` on the `<input>` element.  The `search` role is not a type of text input, and its use here was negating the semantics of the text field's ability to announce itself as a text field to screen readers.  The proper place for a `role=search` is on the `<form>` element that contains this input, so I have placed it there in this fix.

There are likely other accessibility improvements that could be made in this file, but this was an easy fix that I figured I could make a quick PR for.  

Thanks
This commit is contained in:
Scott O'Hara 2021-11-06 10:25:46 -04:00 committed by GitHub
parent 7899242ee8
commit 345d7eed2c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -8,8 +8,8 @@
<div class="collapse navbar-collapse">
@auth
<div class="navbar-nav d-none d-md-block mx-auto">
<form class="form-inline search-bar" method="get" action="/i/results">
<input class="form-control form-control-sm rounded-pill bg-light" name="q" placeholder="{{__('navmenu.search')}}" aria-label="search" autocomplete="off" required style="line-height: 0.6;width:200px" role="search">
<form class="form-inline search-bar" method="get" action="/i/results" role="search">
<input class="form-control form-control-sm rounded-pill bg-light" name="q" placeholder="{{__('navmenu.search')}}" aria-label="search" autocomplete="off" required style="line-height: 0.6;width:200px">
</form>
</div>
@endauth