feat: add auto-fix suggestion for require-img-alt rule

[simplicityf]

Checklist

• Addresses an existing open issue: closes #349

Description

Enhances the require-img-alt rule by adding an auto-fix suggestion that inserts an empty alt="" attribute when elements are missing the alt attribute.

Changes Made

• Added auto-fix suggestion: When an tag lacks an alt attribute, the rule now provides a suggestion to insert alt="" Enhanced error reporting: Uses ESLint's suggest property to offer quick fixes Comprehensive test coverage: Added test cases covering both standalone HTML and template literal contexts

• Test Cases Before (Invalid): html After (Suggested Fix): html

• Features Works with self-closing and regular tags Supports substitute attributes (configurable via options) Compatible with template literals Maintains existing functionality while adding helpful auto-fix suggestions

• Implementation Details Uses fixer.insertTextBefore(node.openEnd, ' alt=""') to insert the attribute Preserves existing validation logic Follows ESLint's suggestion API patterns Includes proper TypeScript definitions and JSDoc comments

** This enhancement improves developer experience by providing quick fixes for accessibility issues while maintaining the rule's core functionality.

[simplicityf]

@yeonjuan, please review

[yeonjuan]

Hi @simplicityf Thanks for your contribution. The format check in CI did not pass. Please run yarn format and commit the changed files.

[simplicityf]

@yeonjuan , what changes are you suggesting?? I don't understand you

Have you check the recent commit?

[yeonjuan]

@simplicityf

what changes are you suggesting??

https://github.com/yeonjuan/html-eslint/pull/366#discussion_r2121056610

Have you check the recent commit?

Yes I saw your latest commit. The require-img-alt rule includes a substitute option (see line 55). This option allows specifying alternative attributes that can serve as substitutes for the alt attribute. If an attribute matching the substitute option is present, the rule assumes that the alt attribute is effectively provided.

I propose that no suggestion auto-fix should be offered when the substitute option is specified.

            suggest: substitute.length ? null : [
              {
                messageId: MESSAGE_IDS.INSERT_EMPTY,
                fix(fixer) {
                  return fixer.insertTextBefore(node.openEnd, ' alt=""');
                },
              },
            ],

[simplicityf]

@simplicityf

what changes are you suggesting??

#366 (comment)

Have you check the recent commit?

Yes I saw your latest commit. The require-img-alt rule includes a substitute option (see line 55). This option allows specifying alternative attributes that can serve as substitutes for the alt attribute. If an attribute matching the substitute option is present, the rule assumes that the alt attribute is effectively provided.

I propose that no suggestion auto-fix should be offered when the substitute option is specified.

            suggest: substitute.length ? null : [
              {
                messageId: MESSAGE_IDS.INSERT_EMPTY,
                fix(fixer) {
                  return fixer.insertTextBefore(node.openEnd, ' alt=""');
                },
              },
            ],

@yeonjuan, please check now I have made the changes, it aligns well with the rules now.

[simplicityf]

@yeonjuan, I am waiting for your review

[simplicityf]

@yeonjuan confirm the changes please

[simplicityf]

@yeonjuan confirm the changes please

[yeonjuan]

@simplicityf PR hasn't been updated, could you please push the commit?

[simplicityf]

@yeonjuan

[simplicityf]

@yeonjuan. I son't think i remeber the provious description i used. If you can point that out

[simplicityf]

@yeonjuan

[simplicityf]

@yeonjuan

[simplicityf]

@yeonjuan

[yeonjuan]

@simplicityf I think I'm almost there, thank you. I left these three comments :)

• https://github.com/yeonjuan/html-eslint/pull/366#discussion_r2133668808
• https://github.com/yeonjuan/html-eslint/pull/366/files#r2132207601
• https://github.com/yeonjuan/html-eslint/pull/366/files#r2132207221

[simplicityf]

@yeonjuan, check the latest commit

The code works, likewise the test case. I don't think I have the time for any changes again. Thanks :)

[yeonjuan]

@simplicityf Okay, thanks for the work. In addition to the behavior, I think code cleanup is also important for maintaining the project. Maybe you can work on it later when you have time, or someone else can take over this task. Thanks again!

[simplicityf]

@yeonjuan

[simplicityf]

@yeonjuan

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 98.25%. Comparing base (5ba8c89) to head (892a7cf). Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #366      +/-   ##
==========================================
+ Coverage   98.22%   98.25%   +0.03%     
==========================================
  Files          77       78       +1     
  Lines        2419     2466      +47     
  Branches      660      672      +12     
==========================================
+ Hits         2376     2423      +47     
  Misses         43       43              

Flag	Coverage Δ
unittest	98.25% <100.00%> (+0.03%)	:arrow_up:

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...ackages/eslint-plugin/lib/rules/require-img-alt.js	100.00% <100.00%> (+4.34%)	:arrow_up:

... and 2 files with indirect coverage changes

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.