Improve display of map filters.

This makes them more form-like, and using GOV.UK styling.

The group of filters are now wrapped with a fieldset element. The label and aria-label now match, to comply with WCAG 2.5.3. The upgraded multi select library allows optgroup elements to be turned into fieldsets and adds a proper legend to the fieldset group.

The change made directly to the vendored library in 235931eb to add the for attribute to hidden labels, is now done in a better way.

As the markup order does not match the usual GOV.UK ordering - input is nested inside label here, rathern than label and input as siblings - we use the has() selector, with a fallback in JavaScript.

We lastly tweak the display on /dashboard due to the difference between the heights of default and .js-multiple selects. This can be removed in time once all selfct elements have the same appearance.

Please check the following:

[ ] Has the code POD documentation been added or updated?
[ ] Whether this PR should include changes to any public documentation, or the FAQ;
[ ] All cobrand-specific commits start their commit message with the cobrand in square brackets;
[ ] Is new functionality tested? CodeCov will warn you about the diff coverage, but won’t complain about e.g. new files;
[ ] Will cobrand-specific changes require additional work to ensure consistent behaviour on www.fixmystreet.com?
[ ] Are the changes tested for accessibility?
[ ] Have you updated the changelog? If this is not necessary, put square brackets around this: skip changelog

Please check the contributing docs, and describe your pull request here. Screenshots or GIF animations (using e.g. LICEcap) may be helpful.

Please include any issues that are fixed, using "fixes" or "closes" so that they are auto-closed when the PR is merged.

Thanks for contributing!

mysociety / fixmystreet

Improve display of map filters. #5057

Codecov Report