Accessibility issues in explorer

[emroussel]

Describe the bug

Some elements in the request and response sections of the explorer are not accessible.

If you accept contributions, I'm happy to open a PR to address this (should all be small/simple fixes).

Expected behavior

I expected all behavior and content in the openapi explorer to be accessible using keyboard navigation and screen readers.

Current behavior

This list isn't exhaustive, but a couple of examples:

1. The "clear" button to the right of the "response" title cannot be focused or interacted with using the keyboard.
2. Some form controls such as the content type select in the body of the request section (where you can select "application/json") aren't associated with their label, so the label isn't read by screen readers when focusing them.
3. The "show optional parameters" collapsible doesn't implement the disclosure WCAG pattern.

Possible solution

For the list above:

1. Use a <button> instead of a <span> or <div> for interactive elements
2. Associate form controls with their labels using htmlFor and unique ids
3. Use details/summary elements for this disclosure

Steps to reproduce

Navigate through the openapi request/response section of an openapi page generated with this plugin (e.g. https://docusaurus-openapi.tryingpan.dev/petstore_versioned/add-pet) using the keyboard and a screen reader.

Screenshots

N/A

Context

We need our docs to conform to WCAG 2.2 Level AA.

Your Environment

• Version used: 4.5.1