search

AlaskaAirlines / auro-radio

Custom input element of type radio generally used in radio groups—collections of radio buttons describing a set of related options
https://auro.alaskaair.com/components/auro/radio
Apache License 2.0
1 stars 5 forks source link

auro-radio: id attribute is required (at least in Angular) #69

Open bdahl1 opened 2 years ago

bdahl1 commented 2 years ago

Describe the bug

The id attribute is required for auro-radio (and auro-checkbox) to function properly... at least in Angular.

To Reproduce

Steps to reproduce the behavior:

  1. Set up a vanilla radio button (or grab my angular demo branch)
  2. In the HTML, remove the id attribute
  3. Try to interact with the component (e.g.: select values several times)

Expected behavior

The component should function as normal. It does not, you can't select values.

Desktop (please complete the following information):

Additional context

I'm not sure if this is a "bug" or "feature request" but typically I try to avoid setting ids whenever possible because as soon as you have to dynamically build something up or want to re-use a component you end up having a bad time.

blackfalcon commented 2 years ago

This is a unique request. The model we are following is that the ID used is addressing an internal need to have an ID on the input element and then the label element uses the for attribute. This is necessary in HTML to bind these elements and is an accessibility requirement.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Regardless of the platform, this model is strongly recommended. Alternatives to this model make use of Aria tags, but only when the native label and input elements are not being used.

I am not 100% up on Angular, but looking at this example https://material.angular.io/components/radio/overview while the editor is not responsible for the placement of the ID, this is still being used behind the scenes. From this, I can only assume that the mat-radio-button is creating IDs on the fly.

I feel like this is the feature you are looking for?

Patrick-Daly-AA commented 9 months ago

Will review for updating documentation to support this request