12

When I write the code below in the LWC html file, the waring Clickable images, Lightning button icons, and form elements require labels for mobile users. is shown.
Anyone knows how to solve it?
My understanding is there is no attribute label for lightning-button-icon

<lightning-button-icon
  alternative-text="refresh"
  title="refresh data"
  icon-name="utility:refresh"
  disabled={isDisabled}
  onclick={onClickRefreshButton}
></lightning-button-icon>

enter image description here

Even when I add label, labels attributes, same warning is show.

enter image description here

Improve this question
5
  • label is not a documented attribute, however, have you tried adding it? what is the behavior afterwards?
    – glls
    Commented Aug 21, 2021 at 16:10
  • @glls Thank you for checking my post. Even when I add label, labels attributes, same warning is show as I edited the post.
    – Shinya
    Commented Aug 22, 2021 at 1:09
  • maybe its just a vs code warning, is it affecting your actual deployment?
    – glls
    Commented Aug 22, 2021 at 3:10
  • @glls Currently, it seems not to affect to the deployment. However, why is it shown and how could I stop this warning?
    – Shinya
    Commented Aug 22, 2021 at 5:29
  • I have the same issue. This seems like a bug with the LWC plugin for vscode. The documented properties title and alternative-text also do not resolve this.
    – Benjamin Vogler
    Commented Sep 17, 2021 at 19:31

3 Answers 3

Reset to default
21

I solved it. When I put a new element label inside lightning-button-icon, the warning message is not shown.

enter image description here

Improve this answer
1

One way to ignore these issues is by adding "<!-- sldsValidatorIgnore -->" on top of your HTML file. Note that this will only apply to the current file and not affect other HTML files. You may want to reset VSCode to see the change.

Improve this answer
1
  • Restricting that from the settings is better, since no files should be modified, if you have them a lot.
    – ABC_SF_SC
    Commented Oct 12, 2023 at 7:32
1

In VS Code Preferences, go to Settings | Extensions | SLDS Validator | Salesforce-vscode-slds | Basic: Mobile Validation.

Reference: Use Mobile Validation with Salesforce Lightning Design System

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .