[v10] Add support for icon buttons

[colinrotherham]

Description

This PR adds support for button with icons

It was split out from #1660 and unblocks #1719

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[colinrotherham]

This is the iOS default for regular text inputs:

background-color: canvas;
color: canvastext

The GOV.UK Frontend uplift added this warning:

nhsuk-frontend/packages/nhsuk-frontend/src/nhsuk/components/input/_index.scss

Lines 22 to 25 in 49de527

	// Setting any background-color makes text invisible when changing colours
	// to dark backgrounds in Firefox (https://bugzil.la/1335476). As
	// background-color and color need to always be set together, color should
	// not be set either

So we should test our select menu fix which goes against that:

nhsuk-frontend/packages/nhsuk-frontend/src/nhsuk/components/select/_index.scss

Lines 30 to 31 in 49de527

	color: $nhsuk-text-colour;
	background-color: $nhsuk-input-background-colour;

Setting background-color: canvas; works the same in iOS but (in theory) is dark mode friendly

[anandamaryon1]

This is the iOS default for regular text inputs:

background-color: canvas;
color: canvastext

The GOV.UK Frontend uplift added this warning:

nhsuk-frontend/packages/nhsuk-frontend/src/nhsuk/components/input/_index.scss

Lines 22 to 25 in 49de527

	// Setting any background-color makes text invisible when changing colours
	// to dark backgrounds in Firefox (https://bugzil.la/1335476). As
	// background-color and color need to always be set together, color should
	// not be set either

So we should test our select menu fix which goes against that:

nhsuk-frontend/packages/nhsuk-frontend/src/nhsuk/components/select/_index.scss

Lines 30 to 31 in 49de527

	color: $nhsuk-text-colour;
	background-color: $nhsuk-input-background-colour;

Setting background-color: canvas; works the same in iOS but (in theory) is dark mode friendly

Looks like that Firefox bug was fixed 5 years ago. Fine in latest but…

Firefox 60, it is broken, select text is unreadable. Along with primary icon buttons.

background-color: canvas;
color: canvastext;

Fixes the iOS input background display issue. 👍

[colinrotherham]

@anandamaryon1 I've updated the changelog entry regarding "aria-label" and the header search

Shall we pick up the search input background colour issue in #1660?

We should raise a separate issue for the Firefox 60 custom colours too

This PR now targets v10.x

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud