a11y: make link into button

[microbit-mark]

fixes https://github.com/microbit-foundation/platform-software-issue-tracker/issues/596
Buttons are accessible by default as opposed to links
Before

After

[microbit-carlos]

Let's create a generic class for this as we have more link in other modals that could use this.

[microbit-mark]

Do you mean the links created by

PythonEditor/python-main.js

Line 1740 in 3b27fe8

modalLinks.push('<a href="#" id="modal-msg-close-link">' + key + '</a>');

and

PythonEditor/python-main.js

Line 1445 in 3b27fe8

'<a href="#" onclick="flashErrorClose()">' + config["translate"]["webusb"]["close"] + '</a>' +

If so, shall I update the JS to use buttons and as they are using a different class

PythonEditor/static/css/style.css

Line 807 in 3b27fe8

.modal-msg-links {

update this to use a single class for all error modal links?

[microbit-carlos]

Yes, the WebUSB error modal and the modalMsg modal.

PythonEditor/static/css/style.css

Line 807 in 3b27fe8

.modal-msg-links {

update this to use a single class for all error modal links?

Not necessarily, that CSS class set-ups the padding and things like that, which would apply as before.

The new class to replace #file-upload-link should only contain the CSS required to make a button look exactly like a link, we then add that css class to all the links reworked into buttons, and keep all the old classes that were already attached to them.

[microbit-mark]

I've updated this, but I'm now stuck at how to now trigger the click for the webUSB not availble modal in' Find Out More'

[microbit-carlos]

Thanks Mark!
Could you provide a before and after screenshot as well?
There are also other modals with link that could use this for accessibility in macOS Firefox, could you update those too?

[microbit-carlos]

Have you tested this? I think this has broken the links in the WebUSB not available modal.
Also, would this not open the link in the same window instead of a new one?

[microbit-mark]

Got a bit stuck triggering the button, but have fixed this and it should now work

[microbit-carlos]

Great, thank you Mark!