Guidelines: WCAG 2.0 (Level AA) not followed for ngb date-picker

[kedar9444]

Bug description: The auto generated select fields for month and year violates the WCAG 2.0 (Level AA) guidelines.

Error code : Check 91: select element missing an associated label.
Repair: Add a label element that surrounds the control's label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.

since the html is auto-generated we can not add the label for it.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: "^5.1.3"

ng-bootstrap: "1.1.0"

Bootstrap: "4.0.0"

[kedar9444]

website used for checking : https://achecker.ca/

you can use the html from this link to reproduce the error :
https://ng-bootstrap.github.io/#/components/datepicker/overview

[maxokorokov]

An option would be to add a title something like:

<select title="months"></select>
<select title="years"></select>

But these strings should be added to i18n in this case

[kedar9444]

@maxokorokov : But these strings should be added to i18n in this case?
i am not clear about this step can you please elaborate it further.

[kedar9444]

This is what my code looks like:

Add this is how it appears :

and here is dynamically generated DOM elements for date-picker, which are clearly missing labels for select boxes used for month and year selection :

which violates the WCAG 2.0 guild lines which states : Check 91: select element missing an associated label

[maxokorokov]

@kedar9444, sure, I see the problem, it was clear from the description. Adding the title attribute should fix it.

But these strings should be added to i18n in this case

Just wanted to say that if we put a hardcoded string as a select box title, we should not forget to translate it.

[kedar9444]

@maxokorokov : yes, got it.
do you guys have any plan to add/implement these WCAG guidelines for ng-bootstrap?

[pkozlowski-opensource]

@maxokorokov title="..." would add a "tooltip" to a <select> element, right?
Maybe it is enough to add aria-label="..." if we don't want to have this "tooltip" visually / functionally speaking?

[Kumar-Aakash]

@pkozlowski-opensource how we plan to add area-label or title to dynamically generated 'SELECT' element. Because we can't do it from HTML as we can only add ngb-datepicker and available inputs to pass.
Are you planning it for upcoming releases or next versions?

[maxokorokov]

website used for checking : https://achecker.ca/

By the way, adding aria-label still reported an error for me with the website in question

[Kumar-Aakash]

@maxokorokov how did you add area-label, can you share HTML snippet ?

[kedar9444]

@maxokorokov : adding title along with aria-label solves the problem for achecker.ca

[pkozlowski-opensource]

Fixed through #2636, will be part of a next release.

[kedar9444]

thanks a lot folks. ❤️❤️❤️