Invalid element IDs used in nimbus-ui

[jaredlockhart]

I just noticed on the branch page we have a bunch of element IDs that aren't queryable without special escaping ie

Normal document query returns null:

document.querySelector('#referenceBranch.featureEnabled')
null

Same query with \\ escape returns input as expected:

document.querySelector('#referenceBranch\\.featureEnabled')
<input id="referenceBranch.featureEnabled" class="custom-control-input" data-testid="referenceBranch.featureEnabled" name="referenceBranch.featureEnabled" type="checkbox">

Querying the 0th treatment branch gives an exception:

document.querySelector('#treatmentBranches[0].featureEnabled')
Uncaught DOMException: Document.querySelector: '#treatmentBranches[0].featureEnabled' is not a valid selector

We should probably be using - instead of [] or .

┆Issue is synchronized with this Jira Task

[purna135]

I'd like to get started on this, but I'm a beginner. Could you please point me in the right direction?

[eliserichards]

Hi @purna135! Are you still interested in trying this?

[purna135]

Hi @eliserichards It will be a pleasure for me to try this.

[eliserichards]

Wonderful! I will assign you to this issue. Take a look at how to query documents. I updated the description to make it a little clearer

[nox1134]

Hey @eliserichards! I'd like to take this issue, any beginner pointers on where to change?