[graphiql] Settings dialog button group does not comply with accessibility behaviors

[TheMightyPenguin]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

The ButtonGroup in the Settings dialog, specifically when changing the current theme:

Behaves more like a RadioGroup control, and it doesn't have the appropriate keyboard event handling or aria attributes to indicate this: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/

Expected Behavior

These buttons should comply with the standard for accessible radio groups.

Steps To Reproduce

1. Open the GraphiQL demo http://graphql.org/swapi-graphql
2. Open the settings dialog
3. Navigate it using `tab` and once you land on the "System" button, try navigating using the arrow keys
4. Also inspect the elements and you'll notice they don't have the appropriate attributes

Module pattern

• graphiql-umd
• graphiql-esm
• graphiql-commonjs

Environment

- GraphiQL Version: latest
- OS: Mac OS 12.5
- Browser: Chrome 107
- Bundler:
- `react` Version: 17
- `graphql` Version: 16

Anything else?

No response

[TheMightyPenguin]

I'd like to give this one a go after I finish #2793