'Associate a valid label to this input field sonarqube

Sonarqube found a bug in this line of code:

  <div class="dropdown-language">
        <label>{{'GENERALE.LINGUA' | translate }}</label>
        <select #langSelect (change)="translate.use(langSelect.value)" class="lang-style" id="language">   ---> **HERE**
              <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
            </select>   
    </div>

I didn't understood which is the problem in this part of code



Solution 1:[1]

If the sonarcube error is your title ("Associate a valid label to this input field sonarqube"). This may be warning you of an accessibility issue as there is no label directly associated with your input for the sake of screen readers.

Try either adding a for attribute to your label tag to target the input

<label for="language" ...

Or a aria tag to your input and an id to your label do the same the other way round:

<label id="languageLabel" ...
<input aria-labelledby="languageLabel" ...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1