Layout header does not toggle search component on mobile or tablet

alphagov / govuk_publishing_components

A gem to document and distribute frontend components for GOV.UK applications

https://components.publishing.service.gov.uk

MIT License

66 stars 20 forks source link

Layout header does not toggle search component on mobile or tablet #4154

Closed MartinJJones closed 2 months ago

MartinJJones commented 3 months ago

What

Clicking the search button does not toggle visibility of the search menu on screen widths <= 640px

A live example of this issue can seen in the service manual - https://www.gov.uk/service-manual/service-standard

AshGDS commented 3 months ago

I unintentionally fixed this before realising it was a separate issue card, so I haven't committed it so you can do the fix. To fix it, it should just be a case of:

Switching the js-header-toggle class to govuk-js-header-toggle on the button.
Adding aria-controls='search' to the button.
In _layout-header.scss, delete the display: none for .gem-c-layout-header__search-form { (line 151)

MartinJJones commented 3 months ago

That's great, thanks @AshGDS