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 elements do not have an associated <label> 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.</p> <p>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.</p> <p><strong>Steps to Reproduce</strong></p> <pre><code>Navigate to the graphiql-explore plugin Inspect the <select> and <textarea> elements for associated <label> elements Observe that no <label> elements are present</code></pre> <p><strong>Expected Results</strong></p> <p>Each <select> and <textarea> element in the graphiql-explore plugin should have an associated <label> element that describes the purpose of the form control.</p> <img width="420" alt="image" src="https://user-images.githubusercontent.com/39355524/227366595-53497fd6-9541-460b-a030-33c66de32ab1.png"> <img width="420" alt="image" src="https://user-images.githubusercontent.com/39355524/227367401-cbd41602-43f6-4bfb-a70a-4cfb5d70f8d6.png"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Uthinkugood82"><img src="https://avatars.githubusercontent.com/u/114895036?v=4" />Uthinkugood82</a> commented <strong> 10 months ago</strong> </div> <div class="markdown-body"> <p>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</p> <ul> <li>If the control is a labelable element, add a for attribute to a visible label with the id of this control (e.g. <label for="controlID">);</li> <li>Or, if the control is a labelable element, put the control inside a visible ‹label> element;</li> <li>Or, add an aria-labelledby attribute to the control. It must point to visible text on the page that is meaningful as a label;</li> <li>Or, if the design cannot have a visible label, provide a label using the aria-label attribute (e.g. aria-label="Activities" );</li> <li>Or, if the design cannot have a visible label, use the title attribute to nrovide a labell</li> </ul> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>