feat(lint): display correspinding element

[fujiyamaorange]

Summary

Implements this comment.

Finally, we can get alternative element.

  ! The elements with the following roles can be changed to the following elements:
    <input type="checkbox">
  
  
    1 │ <>
  > 2 │     <div role="checkbox" ></div>
      │          ^^^^^^^^^^^^^^^

Test Plan

[codspeed-hq]

CodSpeed Performance Report

Merging #2930 will not alter performance

_{Comparing fujiyamaorange:feat-get-corresponding-element (207c4f4) with main (71fe04e)}

Summary

✅ 92 untouched benchmarks

[ematipico]

Thank you @fujiyamaorange for making the rule better.

I left some suggestions.

There's one 'important change we need to do:

There's no need to collect result_elements and result_attributes inside the function run. Instead, you could save inside your State the JSX attribute that we found, and the role name we found .e.g (AnyJsxAttribute, TokenText). And we search for the "concept"/"element" that we need inside the diagnostic function. This will remove all those string allocations that aren't need. Like this, we will only allocate the string that we need.

[fujiyamaorange]

@ematipico
Thank you for the comments!
I modified some points. 👍

[ematipico]

The range here is incorrect. It should highlight the whole attribute as before

[ematipico]

If we're able to suggest possible alternatives like in this case, why do we keep showing the loooong list at the end?

[fujiyamaorange]

Thank you for reviewing.
I modified suggestion messages in 207c4f4. 👍