Browse Source

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
Scott O'Hara 3 years ago
parent
commit
345d7eed2c
1 changed files with 2 additions and 2 deletions
  1. 2 2
      resources/views/layouts/partial/nav.blade.php

+ 2 - 2
resources/views/layouts/partial/nav.blade.php

@@ -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