RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

No "for" attribute on RuxSelect #1331

Closed micahjones13 closed 4 weeks ago

micahjones13 commented 1 month ago

Describe the bug In React Testing Library (and likely other testing frameworks) there is a 'getByLabelText' option for finding dom elements. This method finds the given label text and returns the element that the label is for. Because of this, the label needs to have the for attribute to return the correct element associated with it. The RuxSelect label does not have a for attribute, and therefore the method does not work. This method works fine with RuxInput, since that components label has a for.

To Reproduce Steps to reproduce the behavior:

Visit my demo repo: https://github.com/micahjones13/rtl-RuxSelect/blob/main/src/App.test.tsx If you clone and run it, you'll see that the testing logic works for Ruxinput, but not for RuxSelect.

Current behavior RuxSelect's label does not have a for attribute.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

CodeSandbox If applicable, please provide a CodeSandbox or other online code editor tool link that contains an example of the bug.

Environment (please complete the following information): React Testing Library, Viteset, Jest

Additional context Add any other context about the problem here.

micahjones13 commented 4 weeks ago

Use the "input-id" property: https://astro-components.netlify.app/?path=/docs/forms-select-menu--select-menu