Styled Controls - Instructions

Some frameworks and component suites like to style elements as HTML controls e.g. a div becomes a button. Also developers sometimes use button input elements as interactive button controls.

Functionality

This page has styled a variety of elements to look like buttons, although they are not.
Check that click works.
Check that interactive events like tab and space, etc. work as expected as well.

Testing Risk

Styling controls to look like other controls is perfectly possible with CSS.

This can mean that you have more to test, e.g. if we use a button, we know that the click events will work and interaction will be as expected with keyboard events.

If we use a paragraph and style it, we may not have the full set of interactive events.

This might lead to accessibility issues, or cross-browser functional issues.

But it also means we have to test that it works in the same way as the styled control, which often means more work.