docs(linter): update docs Example for linter rules (#5479)

fix: #5458

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

crates/oxc_linter/src/rules/eslint/no_await_in_loop.rs

@@ -26,7 +26,8 @@ declare_oxc_lint!(
     /// Instead, they are being run in series, which can lead to poorer performance.
     ///
     /// ### Example
-    /// Bad:
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```javascript
     /// async function bad() {
     ///     for (const user of users) {
@@ -35,7 +36,7 @@ declare_oxc_lint!(
     /// }
     /// ```
     ///
-    /// Good:
+    /// Examples of **correct** code for this rule:
     /// ```javascript
     /// async function good() {
     ///     await Promise.all(users.map(user => getUserRecord(user)));

crates/oxc_linter/src/rules/eslint/no_constructor_return.rs

@@ -27,14 +27,15 @@ declare_oxc_lint!(
     /// Forbidding this pattern prevents mistakes resulting from unfamiliarity with the language or a copy-paste error.
     ///
     /// ### Example
-    /// Bad:
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```rust
     /// class C {
     ///     constructor() { return 42; }
     /// }
     /// ```
     ///
-    /// Good:
+    /// Examples of **correct** code for this rule:
     /// ```rust
     /// class C {
     ///     constructor() { this.value = 42; }

crates/oxc_linter/src/rules/eslint/no_obj_calls.rs

@@ -36,8 +36,9 @@ declare_oxc_lint! {
     /// Calling them as functions will usually result in a TypeError being thrown.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```javascript
-    /// // Bad
     /// let math = Math();
     /// let newMath = new Math();
     ///
@@ -52,8 +53,10 @@ declare_oxc_lint! {
     ///
     /// let reflect = Reflect();
     /// let newReflect = new Reflect();
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```javascript
     /// let area = r => 2 * Math.PI * r * r;
     /// let object = JSON.parse("{}");
     /// let first = Atomics.load(sharedArray, 0);

crates/oxc_linter/src/rules/eslint/no_useless_rename.rs

@@ -45,13 +45,16 @@ declare_oxc_lint!(
     /// It is unnecessary to rename a variable to the same name.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```javascript
-    /// // Bad
     /// import { foo as foo } from 'foo';
     /// const { bar: bar } = obj;
     /// export { baz as baz };
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```javascript
     /// import { foo } from 'foo';
     /// const { bar: renamed } = obj;
     /// export { baz };

crates/oxc_linter/src/rules/jsx_a11y/aria_unsupported_elements.rs

@@ -21,14 +21,16 @@ declare_oxc_lint! {
     ///
     /// ### Example
     ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Good
-    ///	<meta charset="UTF-8" />
-    ///
-    /// // Bad
     /// <meta charset="UTF-8" aria-hidden="false" />
     /// ```
     ///
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
+    ///	<meta charset="UTF-8" />
+    /// ```
+    ///
     AriaUnsupportedElements,
     correctness,
     fix

crates/oxc_linter/src/rules/jsx_a11y/autocomplete_valid.rs

@@ -32,11 +32,14 @@ declare_oxc_lint!(
     /// Incorrectly using the autocomplete attribute may decrease the accessibility of the website for users.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <input autocomplete="invalid-value" />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <input autocomplete="name" />
     /// ```
     AutocompleteValid,

crates/oxc_linter/src/rules/jsx_a11y/click_events_have_key_events.rs

@@ -34,13 +34,16 @@ declare_oxc_lint!(
     /// This does not apply for interactive or hidden elements.
     ///
     /// ### Example
-    /// ```jsx
-    /// // Good
-    /// <div onClick={() => void 0} onKeyDown={() => void 0} />
     ///
-    /// // Bad
+    /// Examples of **incorrect** code for this rule:
+    /// ```jsx
     /// <div onClick={() => void 0} />
     /// ```
+    ///
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
+    /// <div onClick={() => void 0} onKeyDown={() => void 0} />
+    /// ```
     ClickEventsHaveKeyEvents,
     correctness
 );

crates/oxc_linter/src/rules/jsx_a11y/heading_has_content.rs

@@ -49,11 +49,14 @@ declare_oxc_lint!(
     /// from accessing information on the page's structure.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <h1 />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <h1>Foo</h1>
     /// ```
     HeadingHasContent,

crates/oxc_linter/src/rules/jsx_a11y/html_has_lang.rs

@@ -41,11 +41,14 @@ declare_oxc_lint!(
     ///
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <html />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <html lang="en" />
     /// ```
     HtmlHasLang,

crates/oxc_linter/src/rules/jsx_a11y/iframe_has_title.rs

@@ -37,8 +37,9 @@ declare_oxc_lint!(
     /// This rule checks for title property on iframe element.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <iframe />
     /// <iframe {...props} />
     /// <iframe title="" />
@@ -48,8 +49,10 @@ declare_oxc_lint!(
     /// <iframe title={false} />
     /// <iframe title={true} />
     /// <iframe title={42} />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <iframe title="This is a unique title" />
     /// <iframe title={uniqueTitle} />
     /// ```

crates/oxc_linter/src/rules/jsx_a11y/img_redundant_alt.rs

@@ -80,13 +80,16 @@ declare_oxc_lint!(
     /// `<img>` and the components which you define in options.components with the exception of components which is hidden from screen reader.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <img src="foo" alt="Photo of foo being weird." />
     /// <img src="bar" alt="Image of me at a bar!" />
     /// <img src="baz" alt="Picture of baz fixing a bug." />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <img src="foo" alt="Foo eating a sandwich." />
     /// <img src="bar" aria-hidden alt="Picture of me taking a photo of an image" /> // Will pass because it is hidden.
     /// <img src="baz" alt={`Baz taking a ${photo}`} /> // This is valid since photo is a variable name.

crates/oxc_linter/src/rules/jsx_a11y/media_has_caption.rs

@@ -47,15 +47,18 @@ declare_oxc_lint!(
     /// Captions are also useful for users in noisy environments or where audio is not available.
     ///
     /// ### Example
-    /// ```jsx
-    /// // Good
-    /// <audio><track kind="captions" src="caption_file.vtt" /></audio>
-    /// <video><track kind="captions" src="caption_file.vtt" /></video>
     ///
-    /// // Bad
+    /// Examples of **incorrect** code for this rule:
+    /// ```jsx
     /// <audio></audio>
     /// <video></video>
     /// ```
+    ///
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
+    /// <audio><track kind="captions" src="caption_file.vtt" /></audio>
+    /// <video><track kind="captions" src="caption_file.vtt" /></video>
+    /// ```
     MediaHasCaption,
     correctness
 );

crates/oxc_linter/src/rules/jsx_a11y/mouse_events_have_key_events.rs

@@ -52,13 +52,16 @@ declare_oxc_lint!(
     /// AT compatibility, and screenreader users.
     ///
     /// ### Example
-    /// ```jsx
-    /// // Good
-    /// <div onMouseOver={() => void 0} onFocus={() => void 0} />
     ///
-    /// // Bad
+    /// Examples of **incorrect** code for this rule:
+    /// ```jsx
     /// <div onMouseOver={() => void 0} />
     /// ```
+    ///
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
+    /// <div onMouseOver={() => void 0} onFocus={() => void 0} />
+    /// ```
     MouseEventsHaveKeyEvents,
     correctness
 );

crates/oxc_linter/src/rules/jsx_a11y/no_access_key.rs

@@ -26,11 +26,14 @@ declare_oxc_lint!(
     /// Inconsistencies between keyboard shortcuts and keyboard commands used by screenreaders and keyboard-only users create accessibility complications so to avoid complications, access keys should not be used.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <div accessKey="h" />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <div />
     /// ```
     NoAccessKey,

crates/oxc_linter/src/rules/jsx_a11y/no_aria_hidden_on_focusable.rs

@@ -30,11 +30,14 @@ declare_oxc_lint!(
     /// `aria-hidden="true"` on focusable elements can lead to confusion or unexpected behavior for screen reader users.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <div aria-hidden="true" tabIndex="0" />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <div aria-hidden="true" />
     /// ```
     NoAriaHiddenOnFocusable,

crates/oxc_linter/src/rules/jsx_a11y/no_distracting_elements.rs

@@ -32,16 +32,19 @@ declare_oxc_lint!(
     /// This rule checks for marquee and blink element.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <marquee />
     /// <marquee {...props} />
     /// <marquee lang={undefined} />
     /// <blink />
     /// <blink {...props} />
     /// <blink foo={undefined} />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <div />
     /// <Marquee />
     /// <Blink />

crates/oxc_linter/src/rules/jsx_a11y/no_redundant_roles.rs

@@ -35,11 +35,14 @@ declare_oxc_lint!(
     /// Redundant roles can lead to confusion and verbosity in the codebase.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <nav role="navigation" />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <nav />
     /// ```
     NoRedundantRoles,

crates/oxc_linter/src/rules/jsx_a11y/prefer_tag_over_role.rs

@@ -32,11 +32,14 @@ declare_oxc_lint!(
     /// Using semantic HTML tags can improve accessibility and readability of the code.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <div role="button" />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <button />
     /// ```
     PreferTagOverRole,

crates/oxc_linter/src/rules/jsx_a11y/role_has_required_aria_props.rs

@@ -29,11 +29,14 @@ declare_oxc_lint!(
     /// semantics for assistive technology.
     ///
     /// ### Example
+    ///
+    /// Examples of **incorrect** code for this rule:
     /// ```jsx
-    /// // Bad
     /// <div role="checkbox" />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <div role="checkbox" aria-checked="false" />
     /// ```
     RoleHasRequiredAriaProps,

crates/oxc_linter/src/rules/jsx_a11y/role_supports_aria_props.rs

@@ -24,22 +24,25 @@ declare_oxc_lint!(
     /// Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. Many ARIA attributes (states and properties) can only be used on elements with particular roles. Some elements have implicit roles, such as `<a href="#" />`, which will resolve to `role="link"`.
     ///
     /// ### Example
-    /// ```jsx
-    /// // Good
-    /// <ul role="radiogroup" aria-required "aria-labelledby"="foo">
-    ///     <li tabIndex="-1" role="radio" aria-checked="false">Rainbow Trout</li>
-    ///     <li tabIndex="-1" role="radio" aria-checked="false">Brook Trout</li>
-    ///     <li tabIndex="0" role="radio" aria-checked="true">Lake Trout</li>
-    /// </ul>
     ///
-    /// // Bad
+    /// Examples of **incorrect** code for this rule:
+    /// ```jsx
     /// <ul role="radiogroup" "aria-labelledby"="foo">
     ///     <li aria-required tabIndex="-1" role="radio" aria-checked="false">Rainbow Trout</li>
     ///     <li aria-required tabIndex="-1" role="radio" aria-checked="false">Brook Trout</li>
     ///     <li aria-required tabIndex="0" role="radio" aria-checked="true">Lake Trout</li>
     /// </ul>
     /// ```
     ///
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
+    /// <ul role="radiogroup" aria-required "aria-labelledby"="foo">
+    ///     <li tabIndex="-1" role="radio" aria-checked="false">Rainbow Trout</li>
+    ///     <li tabIndex="-1" role="radio" aria-checked="false">Brook Trout</li>
+    ///     <li tabIndex="0" role="radio" aria-checked="true">Lake Trout</li>
+    /// </ul>
+    /// ```
+    ///
     RoleSupportsAriaProps,
     correctness
 );