Accessibility with complex custom components - html

Question

Accessibility guidelines were invented before components were released, so they always say that a label is used to identify a form control like <input> or <textarea>, etc. What happens when I have a complex Angular / React / ... component that acts like a form control?
Imagine a <custom-select> that renders an input and adds items to a list. The resulting html looks like:
<custom-select ....>
<input ...>
</custom-select>
When I type something in the input and I press enter, it adds that entry to the list and renders the input again, something like:
<custom-select ....>
<span>What I typed</span>
<input ...>
</custom-select>
Of course, if I type something else in the input and I press enter, it gets added to the list:
<custom-select ....>
<span>What I typed</span>
<span>Something else</span>
<input ...>
</custom-select>
If we want to use this custom component in a form, we would like to put a label to it like any other form item, p.e:
<label for="foo">Foo</label>
<input id="foo" type="text">
<label for="select">Select a country</label>
<custom-select id="select"></custom-select>
Is this even valid a11y? Wave tool will complain of an orphan label while axe says nothing. So, can we use a plain old label to tag a custom component for accessibility purposes? We need a label to be put there for consistency but needs to be accessible.
In case I can do this, that custom-select is also rendering an input. That input needs its own label or aria-label, right?

Answer 1

Yes the input will need to be labeled.
Is there any reason for the component to not manage this? Accept the labeling text and then render the correct accessible HTML for the label and input pair?
So in React:
<CustomSelect labelText="Enter your destination" />
with the component doing:
const id = generatedUniqueId() // This will need to be memoized in the real implementation to avoid creating new id's with every render.
...
<>
<label for={id}>{labelText}</label>
<input id={id} />
</>

Answer 2

Atleast in angular: You can preserve a11y like the following:
// Custom Input HTML (Using Angular Material for eg);
// You can import the label inside the custom component and bind it to the
input field so that you can always have a new ID to every custom input
<mat-form-field [attr.aria-labelledby]="customAriaLabelledByIDs">
<mat-label *ngIf="label" [for]="customId">{{ label }}</mat-label>
<input matInput [id]="customId" />
</mat-form-field>
// In your component.ts file,
#Input() customId: string;
#Input() customAriaLabelledByIDs: string[];
combinedAriaLabelledByIDs: string;
ngOnInit() {
if (this.customAriaLabelledByIDs) {
this.combinedAriaLabelledByIDs =
this.customAriaLabelledByIDs.length === 1
? this.customAriaLabelledByIDs[0]
: this.customAriaLabelledByIDs.join(' ');
}
}
/// Wherever you use, now you will have something like this:
<your-custom-selector
[customAriaLabelledByIDs]="['id-1', 'id-2', 'id-3']"
[customId]="first-name-ID"
></your-custom-selector>
<your-custom-selector
[customAriaLabelledByIDs]="['id-4', 'id-5', 'id-6']"
[customId]="second-name-ID"
></your-custom-selector>
etc.,
You can add multiple aria-attributes to the #Input() and use it from the custom component like, aria-label, role, aria-expanded, etc...
Let me know if you need any more explanation on any of the things i mentioned above. Will be happy to help!!