📚 Linter rules properties: I can't remember the icon labels

[xnuk]

Documentation URL

https://biomejs.dev/linter/rules/

Description

At the very top of the page, it explains what each icon means what:

Below the list of rules supported by Biome, divided by group. Here’s a legend of the emojis:

• The icon indicates that the rule is part of the recommended rules.
• The icon indicates that the rule provides a code action (fix) that is safe to apply.
• The icon indicates that the rule provides a code action (fix) that is unsafe to apply.
• The icon indicates that the rule is applied to JavaScript and super languages files.
• The icon indicates that the rule is applied to TypeScript and TSX files.
• The icon indicates that the rule is applied to JSON files.
• The icon indicates that the rule is applied to CSS files.

But this page is too long; scrolling little bit I forgot what stands for, more scrolling I forgot what stands for, and after the half of the doc only I can remember was and . There's no mouseover tooltip in icons, so I have to scroll back to the top.

Expectations

One could be a tooltip, like moving from existing aria-label to title:

<span class="inline-icon" title="The rule has a safe fix" role="img">
  <Icon name="seti:config" />
</span>

Or one could be a text label instead of icons, for clear meaning. I think it can be short enough to label as a text.

<td>
  <span class="badge">Recommended</span>
  <span class="badge">Safe fix</span>
  <span class="badge">CSS</span>
</td>

Code of Conduct

• [X] I agree to follow Biome's Code of Conduct

[ematipico]

Do you want to send a PR @xnuk ?

[xnuk]

No for now. I just wanted to add an idea and ask about which direction you prefer.

[ematipico]

I am more incline towards the first approach (which is very similar to the first version we have before having starlight)