J4 Issue ?
avatar brianteeman
brianteeman
30 Apr 2019

Tags Fields

Issue

Form elements must have labels (label)

Target application

Articles: New - Thursday Alpha 8 - Administration

Element path

.choices__inner > .choices__input--cloned[autocapitalize="off"][spellcheck="false"]

Snippet

<input type="text" class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Type or select some options" style="width: 191px;">

How to fix

Fix any of the following:
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Form element does not have an implicit (wrapped) <label>
  Form element does not have an explicit 
avatar brianteeman brianteeman - open - 30 Apr 2019
avatar joomla-cms-bot joomla-cms-bot - change - 30 Apr 2019
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 30 Apr 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 30 Apr 2019
Labels Added: J4 Issue
avatar franz-wohlkoenig franz-wohlkoenig - labeled - 30 Apr 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 30 Apr 2019
Title
[4.0]WCAG 1.3.1,WCAG 3.3.2: Form elements must have labels (.choices__input--cloned[autocapitalize="off"][spellcheck="false"])
[4.0] WCAG 1.3.1,WCAG 3.3.2: Form elements must have labels (.choices__input--cloned[autocapitalize="off"][spellcheck="false"])
avatar franz-wohlkoenig franz-wohlkoenig - change - 30 Apr 2019
Title
[4.0]WCAG 1.3.1,WCAG 3.3.2: Form elements must have labels (.choices__input--cloned[autocapitalize="off"][spellcheck="false"])
[4.0] WCAG 1.3.1,WCAG 3.3.2: Form elements must have labels (.choices__input--cloned[autocapitalize="off"][spellcheck="false"])
avatar franz-wohlkoenig franz-wohlkoenig - edited - 30 Apr 2019
avatar brianteeman
brianteeman - comment - 30 Apr 2019

The problem is that the label we have is "for" an "id" that is hidden. The id needs to be removed from the hidden select element and added to the choices generated input element.

image

avatar franz-wohlkoenig franz-wohlkoenig - change - 1 May 2019
Status New Discussion
avatar brianteeman
brianteeman - comment - 2 May 2019

On further investigation the problem is not coming from our implementation of choices as their own demo has the exact same problem

Possible solutions

avatar brianteeman
brianteeman - comment - 18 Nov 2019

This has been resolved by an upstream update of choices.js and applied with #27093

avatar brianteeman brianteeman - change - 18 Nov 2019
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2019-11-18 11:04:13
Closed_By brianteeman
avatar brianteeman brianteeman - close - 18 Nov 2019

Add a Comment

Login with GitHub to post a comment