diff options
| -rw-r--r-- | app/assets/stylesheets/responsive/_header_layout.scss | 16 | ||||
| -rw-r--r-- | app/assets/stylesheets/responsive/_header_style.scss | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/responsive/_utils.scss | 15 | ||||
| -rw-r--r-- | app/views/general/_responsive_topnav.html.erb | 13 |
4 files changed, 38 insertions, 12 deletions
diff --git a/app/assets/stylesheets/responsive/_header_layout.scss b/app/assets/stylesheets/responsive/_header_layout.scss index b3103e3a9..7c7bdfe97 100644 --- a/app/assets/stylesheets/responsive/_header_layout.scss +++ b/app/assets/stylesheets/responsive/_header_layout.scss @@ -131,25 +131,25 @@ } form{ @include grid-row; - padding-right: 1em; + padding: 1em 1em 0; @include lte-ie7 { display: inline; } + @include respond-min( $main_menu-mobile_menu_cutoff ){ + padding-top: 0; + } } input{ - @include grid-column($columns:9); - margin:0; + @include grid-column($columns:10); + margin-right:0; @include lte-ie7 { width: 10.063em; } } - label{ + button[type="submit"]{ @include prefix-postfix-base; - @include grid-column($columns:3,$float:left); + @include grid-column($columns:2,$float:right); border:none; - img{ - max-width: 100%; - } @include lte-ie7 { width: 2.125em; } diff --git a/app/assets/stylesheets/responsive/_header_style.scss b/app/assets/stylesheets/responsive/_header_style.scss index 9008a73a7..ec1e8ea5c 100644 --- a/app/assets/stylesheets/responsive/_header_style.scss +++ b/app/assets/stylesheets/responsive/_header_style.scss @@ -2,3 +2,9 @@ #navigation { border-bottom: 1px solid #e9e9e9; } + +#navigation_search { + button[type="submit"] { + background:image-url('/assets/search.png') transparent no-repeat center center; + } +} diff --git a/app/assets/stylesheets/responsive/_utils.scss b/app/assets/stylesheets/responsive/_utils.scss index 68884fa7a..e19201475 100644 --- a/app/assets/stylesheets/responsive/_utils.scss +++ b/app/assets/stylesheets/responsive/_utils.scss @@ -33,3 +33,18 @@ $lte-ie7: false !default; @content; } } + +// Hide content visually, but keep it available to screen readers +// source: http://a11yproject.com/posts/how-to-hide-content/ +.visually-hidden { + // http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/ + position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + padding:0 !important; + border:0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; +} +body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; } diff --git a/app/views/general/_responsive_topnav.html.erb b/app/views/general/_responsive_topnav.html.erb index 0ece0da9a..a817de662 100644 --- a/app/views/general/_responsive_topnav.html.erb +++ b/app/views/general/_responsive_topnav.html.erb @@ -21,11 +21,16 @@ </li> <li id="navigation_search"> - <form id="navigation_search_form" method="post" action="<%= search_redirect_path %>"> - <label for="navigation_search_button"> - <img src="/assets/search.png" alt="Search:"> + <form id="navigation_search_form" method="post" action="<%= search_redirect_path %>" role="search"> + <label class="visually-hidden" for="navigation_search_button"> + Search </label> - <%= text_field_tag 'query', params[:query], { :id => "navigation_search_button", :title => "type your search term here" } %> + <%= text_field_tag 'query', params[:query], { :id => "navigation_search_button", :type => "search", :placeholder => "Search", :title => "type your search term here" } %> + <button type="submit"> + <span class="visually-hidden"> + Submit Search + </span> + </button> </form> </li> </ul> |