Duplicate HTML ids for tabs of the same view

[pano9000]

Description

Follow up issue created out of this:
multiple tabs of the same view (i.e. options)

When you have multiple tabs open of the same view (e.g. the Options can be opened up several times), HTML element IDs will be present twice in the DOM, which is not really "correct" and can cause e.g. focus issues.

This should be fixed.

Ideally the fix will be to have unique IDs for these elements.
I haven't done too much digging yet, but I think we maybe could use the ntxId from linkService.parseNavigationStateFromUrl for it?
I'll work on something this weekend - this is just a reminder to not forget about the issue.

TriliumNext Version

git

What operating system are you using?

Other Linux

What is your setup?

Server access only

Operating System Version

git

Error logs

No response

[eliandoran]

Regarding this, @pano9000 ,

Could you please double-check the problem of using implicit labels (i.e. <input> inside of <label>)? This would solve the issue of IDs. Are there any proofs that its usage is worse than explicit ones? I'm asking because it will involve additional work to ensure unique IDs.

Random article saying it's fine: https://dev.to/thejaredwilcurt/the-truth-behind-implicitexplicit-form-labels-2e10

[pano9000]

funny thing:
I also had found that random article and interpreted it a tiny bit different :-D

Regarding implicit they say:

<!--
  Works: This has the same support in screen readers as
  the next option, but semantically it's not great, as the
  label header contains non-text content
-->

Regarding explicit the say:

<!--
  Best: This separates the label tag and input so their
  duties are not conflated, it uses the for/id attributes
  that works in all screen readers
-->

so I was thinking: let's go for best ;-)

But anyways, to cite a more "credible" source:
https://www.w3.org/WAI/tutorials/forms/labels/#associating-labels-implicitly

In some situations, form controls cannot be labeled explicitly. For example, a content author might not know the id of a form field generated by a script, or that script might not add an id at all. In this case, the label element is used as a container for both the form control and the label text, so that the two are associated implicitly. Generally, explicit labels are better supported by assistive technology.

Focus on the last sentence here.

So I guess it's up to you :-) @eliandoran
If it's fine I'll take a look anyways regarding the ids. I don't think it will be too "expensive" to set that up.