Hide native radios and checkboxes while leaving them accessible to dragons

[chee]

this should fix these:
https://financialtimes.atlassian.net/browse/NOPS-235
https://financialtimes.atlassian.net/secure/RapidBoard.jspa?rapidView=1108&projectKey=ACC&modal=detail&selectedIssue=ACC-423

and this Financial-Times/n-feedback#88

tested in:

Dragon on IE11 on Windows 10
Firefox on Linux

hopefully a kind robot can show us some visual regression tests from other browsers so we know we haven't made anything worse?

Also worth testing it has the same screenreader experience as the previous version

npm i -g origami-build-tools
git clone git@github.com:financial-times/o-forms
cd o-forms
obt install
obt dev

and try out http://localhost:8999/checkboxes and http://localhost:8999/radio-round

[origamiserviceuser]

👋 Percy has finished running the visual regression testing!

[chee]

that hodgehog is taking 144 screenshots

[chee]

🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔 🦔

[chee]

um. according to the hedgehog everything got slightly bigger

[NickColley]

I dug out GOV.UK Elements (the thing that predates GOV.UK Design System) to see why the Design System custom inputs use this method of opacity instead of the regular visually hidden class and found they ran into the same issue:

• opacity change
• z-index: 1 change

[chee]

I dug out GOV.UK Elements (the thing that predates GOV.UK Design System) to see why the Design System custom inputs use this method of opacity instead of the regular visually hidden class and found they ran into the same issue:

* [opacity change](https://github.com/alphagov/govuk_elements/commit/f1fdcc45516c91e124e5476c12d7ff0994dd9374)

* [z-index: 1 change](https://github.com/alphagov/govuk_elements/commit/7190226a366570028d3a54bbb0a0567afe1e50df)

nice! excellent prior art

[NickColley]

Since now the real input is in front of the custom input the cursor is back to the regular pointer instead of the hand.

[thurstontye]

👍 nice to have the comments re dragon on this too.

[NickColley]

In GOV.UK's work they reset the margin to zero, this seems to be done for us using normalize. Which is an dependency so should be fine:

https://github.com/Financial-Times/o-forms/blob/master/bower.json#L13

[NickColley]

I've tested that saying "Click Stacked 1" and "Click Default 1" works in both examples in Dragon.

[NickColley]

Non-blocking: May be able to remove the cursor: pointer from the pseudo element now since it's not doing anything? 🤔

[chee]

nice, thank you so much @NickColley !

i'll merge this tomorrow morning.

if i could still get ft.com things to work on my laptop then i'd even try it in the context of some apps, but

[NickColley]

@chee if you can explain what you're aiming to do and some of the steps I may be able to do that bit. Let me know.

[chee]

@NickColley installing this branch of o-forms in the front page app and checking out the n-feedback form, or in myft and testing out the problematic radio buttons

[taraojo]

This is great, thanks @chee 🎉
➕ 1️⃣ for the Dragon comment too

[taraojo]

💃

[origamiserviceuser]

🎉 This PR is included in version v8.3.9 🎉