Associate a valid label to this input field sonarqube

Question

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

Answer 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" ...