search

nationalarchives / tna-components

This repo will host all components and it's assets, built with JS & React
https://nationalarchives.gov.uk
MIT License
2 stars 1 forks source link

url and accessibility improvements #91

Closed AshGDS closed 3 years ago

AshGDS commented 3 years ago

Hi @gtvj

Would you be able to look at this PR?

It addresses an issue where we were using an sr-only checkbox to show or hide the mobile search component. This lead to an issue where the keyboard focus would latch onto this hidden component, and hide the keyboard focus from the user. It also lead to a scenario where two elements were doing the same thing (both the input and label would show/hide the mobile search) which may be frustrating for screen readers.

I changed the show/hide to a <button> element, and style wise gave it a slightly different style when the search form is expanded. I made the Search button on mobile use Open Sans as we phase out Roboto Mono. I also made the select search type radio buttons sit on their own lines, to improve their click boundary.

I also added www. to nationalarchives.gov.uk links as this is preferable according to the DevOps team.

I've tested in Chrome, Firefox and IE11. There was a small issue which I couldn't figure out - on Firefox the search button has an incorrect focus width, but it corrects itself if you modify any CSS value in DevTools. Maybe Firefox is computing the focus width too early?

image

Would you be able to merge this if all is OK?

Thanks :+1:

AshGDS commented 3 years ago

@gtvj do you think we should begin to use the lighter focus styles on dark backgrounds on our legacy applications? I noticed that this component uses the darker focus colour.

gtvj commented 3 years ago

Hi Ash - yes, good spot. That would be a good thing to do. We do have a lighter focus colour defined for Etna.