SEO tab - Missing form label

[umbrabot]

SEO tab - Missing form label - <input type="text" class="typeahead tags-metaKeywords tt-hint" ng-model="vm.tagToAdd" ng-keydown="vm.addTagOnEnter($event)" ng-blur="vm.addTag()"

Note: Change based on previous comment from @bkclerke - <span class="twitter-typeahead" style="position: relative; display: inline-block;"> no longer present.

Steps to replicate:

1. Access content
2. Navigate to SEO tab
3. Missing form label - <input type="text" class="typeahead tags-metaKeywords tt-hint" ng-model="vm.tagToAdd" ng-keydown="vm.addTagOnEnter($event)" ng-blur="vm.addTag()"

Issue: Missing form label: A form control does not have a corresponding label

Why it matters: If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.

How to fix: If a text label for a form control is visible, use the element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.

W3 reference: https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels

[bkclerke]

@DannyLancaster I am not able to find the twitter-typeahead span mentioned in the ticket. I did actually go with a clean install of v10 and installed Paul Seal's clean starterkit package (the umbraco starterkit package did not have an SEO tab). I do see there is a meta keywords field utilizing the tags property editor that does not have a form label, is this by chance the error this ticket is speaking too?

[DannyLancaster]

Hi @bkclerke

Thank you for looking into this issue.

I believe this issue has changed, and you are indeed correct that the previous twitter-typeahead span is no longer present. However as mentioned, the <input type="text" class="typeahead tags-metaKeywords tt-hint" ng-model="vm.tagToAdd" ng-keydown="vm.addTagOnEnter($event)" ng-blur="vm.addTag()" ng-maxlength="200" is now erroring with the missing form label.

For reference, we are also using Paul Seal's v10 Clean Starter Kit (sorry, I meant to add the version numbers to the tickets - will update them).

I will update the ticket description for visibility of the issue instance. Thanks again!

[bkclerke]

Thanks Danny! I will look into this one & see what I can do! :)

[bkclerke]

Created a PR here to resolve this issue: umbraco/Umbraco-CMS#13142

[tiffy74]

Awesome thanks for looking into this @bkclerke sorry took a while to get back to you.

@DannyLancaster can you take a look and confirm it works as you would expect?

Doesn't look like this has been merged in V10 so we may have an issue now that we've moved onto v11 - so might need someone from HQ to see if it can easily be migrated or alternatively could just resubmit in v11

[bkclerke]

@tiffy74 I created a new PR in v11 to resolve the issue: umbraco/Umbraco-CMS#13324