bug: getAriaLabel can throw an exception when rendering form components #22678
Description
Bug Report
Ionic version:
[x] 5.5.2
Current behavior:
If an element id attribute contains certain characters then form components (radio, checkbox, toggle) can fail to render and throw an exception.
For example, if you render the following:
<ion-toggle id="a.b" ... />
then the following error will occur:
DOMException: Failed to execute 'querySelector' on 'Document': 'label[for=a.b]' is not a valid selector.
at getAriaLabel
Potential solution:
The following line of code in getAriaLabel within helpers.ts causes the problem:
label = document.querySelector(`label[for=${componentId}]`);
The attribute value should be quoted to support spaces, periods and other reserved characters.
For example, document.querySelector('label[for="a.b"]') works and document.querySelector('label[for=a.b]') fails.
Note that the id could even contain a quote so it would need to be escaped as well.
Other related issues:
There are a couple of other less serious issues within the getAriaLabel function.
If the label id contains certain characters (e.g. "a.b") then it will not be found.
document.querySelector(`#${labelledBy}`)
This has less impact but could be fixed by using document.getElementById.
Lastly, the function sets the id on the label element even if it already has a value.
label.id = labelId = `${componentId}-lbl`;
It might be better to only set the id if it does not already have a value. This is not a very likely case but seems better to not overwrite specified values.