Missing associated label input ошибка

I am using WebStorm IDE which is working well alerting on problems with web accessibility.

Unfortunately it does not recognize Angular binding attributes.

In my html I have below code:

<label [attr.for]='id' >My Label</label>
<input [id]='id' />

In my TS file:

id = 'name'

After compiling, the above input will have an associated label. Unfortunately WebStorm is complaining Missing associated label.

Is there a way WebStorm can be set to recognize this input as having associated label without disabling the check?

The problem also occurs when I bind to [attr.aria-label]. Same error is thrown.

Уже весь интернет облазил…. Не могу никак отключить оповещения о:
1. missing associated label
2. cannot resolve direstory (особо достала)
Как и где это отключить, подскажите?
PS искал в Fle/Settings/Intentions и в Fle/Settings/Language Intentions
нет там такого)
Версия 2019.1.2

• 
  Вопрос задан

  более трёх лет назад

• 672 просмотра

What is the exact error/warning message that Pycharm reports?

Missing associated label

So, like I said, if sequence didn’t matter, I would not have bothered to post this. But apparently it does.
Can you be more specific about how it matters?

Sure. Lots of times, you can put together a string of attributes or method calls and the sequence in which you write them does not matter. A good example would be chaining filters in Django:

The order of filter() and select_related() chaining isn’t important, https://docs.djangoproject.com/en/4.0/ref/models/querysets/#select-related

Do you just mean that it matters to Pycharm?

Yes, clearly that’s true. But what I mean is that the sequence of operations matters when the first alters state such that the second either won’t work, or won’t work as expected because it needed or expected the state which the first one received, i.e., before mutation, or a syntax error.

Or do you mean it affects how the label is displayed?

No. Not talking about that at all.

The sequence / syntax of ‘label’ and ‘input’ on this page is the reverse of the sequence on this page:
developer.mozilla.org/en-US/docs/Web/HTML/Element/form#examples

Exactly which code examples do you mean?

I see that you gave more than one response, and in the second you reference the code I am talking about.

The examples at the top of that page don’t use the for attribute. So in that case, the way to associate the label with an input is make the input element a child of the label. Right?

Right.

The examples later on in that page use for attribute. So in that case, there is no need to make the input a child of the label; instead the label can be anywhere at all in the document.

So that all looks fine.

So is the inconsistency that one page has this:

    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>

…while the other has this?

  <input type="checkbox" id="horns" name="horns">
  <label for="horns">Horns</label>

…that is, in one case, the label element precedes the input element, while in the other case the label element
follows the input element?

Yes.

It’s completely valid for the input element to not be inside the label element — as long as the label element has a for >attribute.

Ok. I did not know it was the for attribute that makes the difference.
Note that PyCharm still complains even with the for attribute:

24        <li><label for="apple pie">apple pie</label>
25        <input type="checkbox" name="apple pie"></li>
26        <li><input type="checkbox" name="applesauce"></li>
27        <label for="applesauce">applesauce</label>

Lines:
(24) No complaint
(25) Missing associated label ( even though 24 & 25 are wrapped in the same list tag)
(26) Missing associated label
(27) Element label is not allowed here

But if I do this:

26        <li><input type="checkbox" name="applesauce">
27        <label for="applesauce">applesauce</label></li>

Now, with 26 and 27 wrapped in the same list tag, PyCharm’s warning about label on 27 disappears, but the ‘missing associated label’ is there for every case where input precedes label even with the for. (It is a much longer list than I have posted).
FYI, I decided to look this up at W3:
https://www.w3.org/WAI/WCAG21/Techniques/html/H44

Note that the label is positioned after input elements of type=»checkbox» and type=»radio».

Well, thanks, I guess that clears this up for me. I am grateful for the time, because I am always learning something. I don’t consider myself a front end person. I’m not closing this issue in case you wanted to add anything.

<form mat-dialog-content [formGroup]="addressForm">
  <div class="u-flex fields-wrapper">
    <mat-form-field>
      <mat-label>Name</mat-label>
      <input type="text" matInput formControlName="name" />
    </mat-form-field>
  <button mat-raised-button (click)="submitName()">
    Submit
  </button>
</form>

2 ответа

Лучший ответ