Form control elements in graphiql-explore plugin have no associated label

[jair1823]

Description

I ran the IBM Equal Accessibility Checker tool on my website and it identified multiple instances of the 'Form control element has no associated label' error in the graphiql-explore plugin. Specifically, the and <textarea> elements do not have an associated element, which can make it difficult for users who rely on screen readers or other assistive technologies to understand the purpose of these form controls. I believe that this error is preventing some users from being able to interact with this feature of the website. Therefore, I would like to request that labels be added to the form controls in the graphiql-explore plugin. Steps to Reproduce Navigate to the graphiql-explore plugin Inspect the <select> and <textarea> elements for associated <label> elements Observe that no <label> elements are present Expected Results Each and <textarea> element in the graphiql-explore plugin should have an associated element that describes the purpose of the form control.

[Uthinkugood82]

Form control element ‹textarea> has no associated label
• Violation
Each form control must have an associated label
Why is this important?
Associating a meaningful label with every UI control allows the browser and assistive technology to expose and announce the control to a user. Associating a visible label also provides a larger clickable area.
Element location
‹textarea
口
style="position: absolute; bottom: -lem; padding: Op^, tabindex="0" readonly="" spellcheck="false" autocapitalize="off" autocorrect="off">
What to do

• If the control is a labelable element, add a for attribute to a visible label with the id of this control (e.g. );
• Or, if the control is a labelable element, put the control inside a visible ‹label> element;
• Or, add an aria-labelledby attribute to the control. It must point to visible text on the page that is meaningful as a label;
• Or, if the design cannot have a visible label, provide a label using the aria-label attribute (e.g. aria-label="Activities" );
• Or, if the design cannot have a visible label, use the title attribute to
  nrovide a labell