A11Y and label issues with switch component

[fungairino]

Describe the bug

• The switch component we use for forms and other isolated controls has a few issues (we use BootstrapSwitchButton)
  • The switch is not focusable. I.e. you can't tab into it and can't toggle it with enter/space
  • The switch is not labelled properly. I.e. the label next to it is not connected properly to it as a form control. (i.e. the label element for` does not point to anything)
    • If it were labelled properly, it would be selectable/focusable if you clicked on the label, and it would be queryable by external locators (i.e. playwright findByLabel)

Screenshots/Loom

Recording: https://www.loom.com/share/d66e6da1133b44a8a19f49a2334e2a63

Code refs

pixiebrix-extension/src/components/fields/schemaFields/widgets/BooleanWidget.tsx

Line 38 in a8d3920

<BootstrapSwitchButton

https://github.com/pixiebrix/pixiebrix-extension/blob/main/end-to-end-tests/pageObjects/basePageObject.ts#L98-L101

[github-actions]

This issue will be closed in 7 days unless the stale label is removed, or a comment is added to the issue.

[github-actions]

This issue was closed because it has been stale for 7 days with no activity.