bug: getAriaLabel can throw an exception when rendering form components

[cjorasch]

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.

[jsBiztech]

@liamdebeasi ,
Any update on when this issue will be resolved?
Or any alternative until then?

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

Angular

npm install @ionic/angular@5.6.0-dev.202102091522.082160d

React

npm install @ionic/react@5.6.0-dev.202102091522.082160d @ionic/react-router@5.6.0-dev.202102091522.082160d

Vue

npm install @ionic/vue@5.6.0-dev.202102091522.082160d @ionic/vue-router@5.6.0-dev.202102091522.082160d

Stencil/Vanilla JavaScript

npm install @ionic/core@5.6.0-dev.202102091522.082160d

[jsBiztech]

@liamdebeasi , I tried the dev build with angular and it works fine.
Update:
Ion-checkbox and toggle are shown in squares in ios instead of round.
I tried specifying mode based on platform but there is no any change.

Thanks.

[liamdebeasi]

Thanks for the issue. This has been resolved via #22680, and a fix will be available in an upcoming release of Ionic Framework.

Ion-checkbox and toggle are shown in squares in ios instead of round.
I tried specifying mode based on platform but there is no any change.

I recommend creating a post on our forums for assistance with this: http://forum.ionicframework.com/

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.