umb-control-group label-for property does not populate for attribute

[lordscarlet]

When using the umb-control-group directive, there is a label-for attribute. However, this attribute does not populate the for attribute of the <label> that is created as part of the directive.

Umbraco version

I am seeing this issue on Umbraco version: 8.6.1

Reproduction

Specifics

Navigate to /umbraco/#/users/users/users?create=true

The label/input fields do not have a for mapping between one another

Looking at the source, I see a couple of problems:

1. In the umbControlGroup directive, there is a labelFor attribute. However, that is not used for the <label> element's for attribute. Instead it uses the alias property to set a value on the for attribute.

   Umbraco-CMS/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html

   Line 4 in 55c37e0

   <label ng-if="hideLabel!=='true'" class="control-label" for="{{alias}}">

2. Even if alias was used when using the umb-control-group directive, or (1) was not an issue, in many (all?) instances of the umb-control-group directive, the related <input> does not have an id, so the for attribute would not have any value regardless

   Umbraco-CMS/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html

   Lines 318 to 319 in 55c37e0

   	<input type="text" name="username" localize="placeholder" placeholder="@placeholders_enterusername" class="input-block-level"
   	ng-model="vm.newUser.username" val-server-field="Username" ng-required="vm.usernameIsEmail" />

Expected result

1. The <label> should have a for attribute with the same value as the id of the <input> field
2. The <input> field should have an id attribute that matches the for in the <label>

Actual result

1. The <label> does not have a value for the for attribute
2. The <input> does not have an id attribute to relate to the for attribute

[MMasey]

@nul800sebastiaan Can this be tagged with the accessibility label please. Thanks

[nul800sebastiaan]

Thanks @lordscarlet ! I see you've added a few issues around accessibility and I'll label them as such and put them in up for grabs. I don't know if you intended to work on them or just report them? If you intend to help out with these issue then we're more than happy to look at a PR without having to create an issue for each of them, just so you know! 👍

[nul800sebastiaan]

Additionally, if you're not aware yet, we have an accessibility team who are coordinating more accessibility updates. More info and links to their Trello board etc can be found here: https://our.umbraco.com/get-involved/the-accessibility-team/

[lordscarlet]

No problem at all @nul800sebastiaan. I will probably address a lot of them, but I am getting them in to start. We currently have an edict that we can't onboard any users until the 508 compliance is improved.

I will check out your link, but also complain at the same time: It is a little tough for someone coming in and trying to see the status of accessibility issues if you have a separate, not obvious location where accessibility issues are cataloged. I went to the regular github issues expecting to find all known issues here.

[nul800sebastiaan]

I understand @lordscarlet! The idea is that there is a LOT of stuff that needs improving and the team didn't want to frustrate the process we have on the issue tracker too much, which is we "approve" all incoming issues. We all agree that these issues need to be fixed and we're happy to take any and all incoming contributions for that! I am just sorry I didn't catch you earlier after the first few issues, would have immediately pointed you in that direction! 👍

[lordscarlet]

Not to belabor the point (but obviously I am about to :) ), but someone evaluating the status of accessibility in Umbraco could take a look at the current release, see there are too many problems, check the issues on github, and decide nothing is being done about it and move on to another solution.

Thank you for pointing me in the right direction!

[nul800sebastiaan]

I'm seeing a great deal of activity, just need a hint as to where to look I guess 😅 https://github.com/umbraco/Umbraco-CMS/issues?q=label%3Acategory%2Faccessibility+

[lordscarlet]

I went there, and I looked for open issues, which is a much smaller bucket. However, I missed this one, which would have helped some. #5277

Again, not trying to get into any sort of argument here, but I hope you can see the frustration with having two different places to look for open issues.

[umbrabot]

Hiya @lordscarlet,

Just wanted to let you know that we noticed that this issue got a bit stale and might not be relevant any more.

We will close this issue for now but we're happy to open it up again if you think it's still relevant (for example: it's a feature request that's not yet implemented, or it's a bug that's not yet been fixed).

To open it this issue up again, you can write @umbrabot still relevant in a new comment as the first line. It would be super helpful for us if on the next line you could let us know why you think it's still relevant.

For example:

@umbrabot still relevant
This bug can still be reproduced in version x.y.z

This will reopen the issue in the next few hours.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂