add: codegen

rome · Apr 15, 2023 · 51eee29 · 51eee29
1 parent 55a5cc4
commit 51eee29
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 48 deletions.
diff --git a/crates/rome_service/src/configuration/linter/rules.rs b/crates/rome_service/src/configuration/linter/rules.rs
diff --git a/editors/vscode/configuration_schema.json b/editors/vscode/configuration_schema.json
diff --git a/npm/backend-jsonrpc/src/workspace.ts b/npm/backend-jsonrpc/src/workspace.ts
diff --git a/npm/rome/configuration_schema.json b/npm/rome/configuration_schema.json
diff --git a/website/src/pages/lint/rules/index.mdx b/website/src/pages/lint/rules/index.mdx
@@ -25,7 +25,7 @@ Enforce that the <code>accessKey</code> attribute is not used on any HTML elemen
 	<a href="/lint/rules/noAutofocus">noAutofocus</a>
 	<span class="recommended">recommended</span>
 </h3>
-Avoid the <code>autoFocus</code> attribute
+Enforce that autoFocus prop is not used on elements.
 </section>
 <section class="rule">
 <h3 data-toc-exclude id="noBlankTarget">
@@ -46,7 +46,7 @@ Enforces that no distracting elements are used.
 	<a href="/lint/rules/noHeaderScope">noHeaderScope</a>
 	<span class="recommended">recommended</span>
 </h3>
-Check that the scope attribute is only used on <code>th</code> elements.
+The scope prop should be used only on <code>&lt;th&gt;</code> elements.
 </section>
 <section class="rule">
 <h3 data-toc-exclude id="noPositiveTabindex">

diff --git a/website/src/pages/lint/rules/noAutofocus.md b/website/src/pages/lint/rules/noAutofocus.md
@@ -7,7 +7,9 @@ parent: lint/rules/index
 
 > This rule is recommended by Rome.
 
-Avoid the `autoFocus` attribute
+Enforce that autoFocus prop is not used on elements.
+
+Autofocusing elements can cause usability issues for sighted and non-sighted users, alike.
 
 ## Examples
 
@@ -104,6 +106,11 @@ Avoid the `autoFocus` attribute
 <MyComponent autoFocus={true} />
 ```
 
+## Resources
+
+- [WHATWG HTML Standard, The autofocus attribute](https://html.spec.whatwg.org/multipage/interaction.html#attr-fe-autofocus)
+- [The accessibility of HTML 5 autofocus](https://brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/)
+
 ## Related links
 
 - [Disable a rule](/linter/#disable-a-lint-rule)

diff --git a/website/src/pages/lint/rules/noBlankTarget.md b/website/src/pages/lint/rules/noBlankTarget.md
@@ -80,33 +80,14 @@ and the [the noopener documentation](https://html.spec.whatwg.org/multipage/link
 <strong>  </strong><strong>    │ </strong>                                                               <span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span>                   
 </code></pre>
 
+### Valid
+
 ```jsx
-// case-insensitive
-<a href='http://external.link' target='_BlaNk'>child</a>
+<a href='http://external.link' rel='noreferrer' target='_blank'>child</a>
 ```
 
-<pre class="language-text"><code class="language-text">a11y/noBlankTarget.js:2:32 <a href="https://docs.rome.tools/lint/rules/noBlankTarget">lint/a11y/noBlankTarget</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Avoid using </span><span style="color: Tomato;"><strong>target=&quot;_blank&quot;</strong></span><span style="color: Tomato;"> without </span><span style="color: Tomato;"><strong>rel=&quot;noreferrer&quot;</strong></span><span style="color: Tomato;">.</span>
-
-    <strong>1 │ </strong>// case-insensitive
-<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>&lt;a href='http://external.link' target='_BlaNk'&gt;child&lt;/a&gt;
-   <strong>   │ </strong>                               <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong>
-    <strong>3 │ </strong>
-
-<strong><span style="color: rgb(38, 148, 255);">  </span></strong><strong><span style="color: rgb(38, 148, 255);">ℹ</span></strong> <span style="color: rgb(38, 148, 255);">Opening external links in new tabs without rel=&quot;noreferrer&quot; is a security risk. See </span><span style="color: rgb(38, 148, 255);"><a href="https://html.spec.whatwg.org/multipage/links.html#link-type-noopener">the explanation</a></span><span style="color: rgb(38, 148, 255);"> for more details.</span>
-
-<strong><span style="color: rgb(38, 148, 255);">  </span></strong><strong><span style="color: rgb(38, 148, 255);">ℹ</span></strong> <span style="color: rgb(38, 148, 255);">Safe fix</span><span style="color: rgb(38, 148, 255);">: </span><span style="color: rgb(38, 148, 255);">Add the </span><span style="color: rgb(38, 148, 255);"><strong>rel=&quot;noreferrer&quot;</strong></span><span style="color: rgb(38, 148, 255);"> attribute.</span>
-
-<strong>  </strong><strong>  2 │ </strong>&lt;a<span style="opacity: 0.8;">·</span>href='http://external.link'<span style="opacity: 0.8;">·</span>target='_BlaNk'<span style="opacity: 0.8;"><span style="color: MediumSeaGreen;">·</span></span><span style="color: MediumSeaGreen;">r</span><span style="color: MediumSeaGreen;">e</span><span style="color: MediumSeaGreen;">l</span><span style="color: MediumSeaGreen;">=</span><span style="color: MediumSeaGreen;">&quot;</span><span style="color: MediumSeaGreen;">n</span><span style="color: MediumSeaGreen;">o</span><span style="color: MediumSeaGreen;">r</span><span style="color: MediumSeaGreen;">e</span><span style="color: MediumSeaGreen;">f</span><span style="color: MediumSeaGreen;">e</span><span style="color: MediumSeaGreen;">r</span><span style="color: MediumSeaGreen;">r</span><span style="color: MediumSeaGreen;">e</span><span style="color: MediumSeaGreen;">r</span><span style="color: MediumSeaGreen;">&quot;</span>&gt;child&lt;/a&gt;
-<strong>  </strong><strong>    │ </strong>                                              <span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span><span style="color: MediumSeaGreen;">+</span>          
-</code></pre>
-
-### Valid
-
 ```jsx
-let a = <a href='http://external.link' rel='noreferrer' target='_blank'>child</a>;
-let a = <a href='http://external.link' target='_blank' rel="noopener" {...props}>child</a>;
+<a href='http://external.link' target='_blank' rel="noopener" {...props}>child</a>
 ```
 
 ## Related links

diff --git a/website/src/pages/lint/rules/noDistractingElements.md b/website/src/pages/lint/rules/noDistractingElements.md
@@ -18,51 +18,55 @@ By default, the following elements are visually distracting: `<marquee>` and `<b
 ### Invalid
 
 ```jsx
-<marquee/>
+<marquee />
 ```
 
 <pre class="language-text"><code class="language-text">a11y/noDistractingElements.js:1:1 <a href="https://docs.rome.tools/lint/rules/noDistractingElements">lint/a11y/noDistractingElements</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━
 
 <strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Don't use the 'marquee' element.</span>
 
-<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;marquee/&gt;
-   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong>
+<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;marquee /&gt;
+   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong>
     <strong>2 │ </strong>
 
 <strong><span style="color: rgb(38, 148, 255);">  </span></strong><strong><span style="color: rgb(38, 148, 255);">ℹ</span></strong> <span style="color: rgb(38, 148, 255);">Visually distracting elements can cause accessibility issues and should be avoided.</span>
 
 <strong><span style="color: rgb(38, 148, 255);">  </span></strong><strong><span style="color: rgb(38, 148, 255);">ℹ</span></strong> <span style="color: rgb(38, 148, 255);">Suggested fix</span><span style="color: rgb(38, 148, 255);">: </span><span style="color: rgb(38, 148, 255);">Remove the 'marquee' element.</span>
 
-<strong>  </strong><strong>  1 │ </strong><span style="color: Tomato;">&lt;</span><span style="color: Tomato;">m</span><span style="color: Tomato;">a</span><span style="color: Tomato;">r</span><span style="color: Tomato;">q</span><span style="color: Tomato;">u</span><span style="color: Tomato;">e</span><span style="color: Tomato;">e</span><span style="color: Tomato;">/</span><span style="color: Tomato;">&gt;</span>
-<strong>  </strong><strong>    │ </strong><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span>
+<strong>  </strong><strong>  1 │ </strong><span style="color: Tomato;">&lt;</span><span style="color: Tomato;">m</span><span style="color: Tomato;">a</span><span style="color: Tomato;">r</span><span style="color: Tomato;">q</span><span style="color: Tomato;">u</span><span style="color: Tomato;">e</span><span style="color: Tomato;">e</span><span style="opacity: 0.8;"><span style="color: Tomato;">·</span></span><span style="color: Tomato;">/</span><span style="color: Tomato;">&gt;</span>
+<strong>  </strong><strong>    │ </strong><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span>
 </code></pre>
 
 ```jsx
-<blink/>
+<blink />
 ```
 
 <pre class="language-text"><code class="language-text">a11y/noDistractingElements.js:1:1 <a href="https://docs.rome.tools/lint/rules/noDistractingElements">lint/a11y/noDistractingElements</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━
 
 <strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">Don't use the 'blink' element.</span>
 
-<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;blink/&gt;
-   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong>
+<strong><span style="color: Tomato;">  </span></strong><strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;blink /&gt;
+   <strong>   │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong>
     <strong>2 │ </strong>
 
 <strong><span style="color: rgb(38, 148, 255);">  </span></strong><strong><span style="color: rgb(38, 148, 255);">ℹ</span></strong> <span style="color: rgb(38, 148, 255);">Visually distracting elements can cause accessibility issues and should be avoided.</span>
 
 <strong><span style="color: rgb(38, 148, 255);">  </span></strong><strong><span style="color: rgb(38, 148, 255);">ℹ</span></strong> <span style="color: rgb(38, 148, 255);">Suggested fix</span><span style="color: rgb(38, 148, 255);">: </span><span style="color: rgb(38, 148, 255);">Remove the 'blink' element.</span>
 
-<strong>  </strong><strong>  1 │ </strong><span style="color: Tomato;">&lt;</span><span style="color: Tomato;">b</span><span style="color: Tomato;">l</span><span style="color: Tomato;">i</span><span style="color: Tomato;">n</span><span style="color: Tomato;">k</span><span style="color: Tomato;">/</span><span style="color: Tomato;">&gt;</span>
-<strong>  </strong><strong>    │ </strong><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span>
+<strong>  </strong><strong>  1 │ </strong><span style="color: Tomato;">&lt;</span><span style="color: Tomato;">b</span><span style="color: Tomato;">l</span><span style="color: Tomato;">i</span><span style="color: Tomato;">n</span><span style="color: Tomato;">k</span><span style="opacity: 0.8;"><span style="color: Tomato;">·</span></span><span style="color: Tomato;">/</span><span style="color: Tomato;">&gt;</span>
+<strong>  </strong><strong>    │ </strong><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span><span style="color: Tomato;">-</span>
 </code></pre>
 
 ### Valid
 
 ```jsx
-<div/>
+<div />
 ```
 
+## Accessibility guidelines
+
+- [WCAG 2.2.2](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide)
+
 ## Related links
 
 - [Disable a rule](/linter/#disable-a-lint-rule)

diff --git a/website/src/pages/lint/rules/noHeaderScope.md b/website/src/pages/lint/rules/noHeaderScope.md
@@ -7,9 +7,7 @@ parent: lint/rules/index
 
 > This rule is recommended by Rome.
 
-Check that the scope attribute is only used on `th` elements.
-
-ESLint Equivalent: [scope](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md)
+The scope prop should be used only on `<th>` elements.
 
 ## Examples
 
@@ -61,6 +59,11 @@ ESLint Equivalent: [scope](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/
 <th scope="col"></th>
 ```
 
+## Accessibility guidelines
+
+- [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
+- [WCAG 4.1.1](https://www.w3.org/WAI/WCAG21/Understanding/parsing)
+
 ## Related links
 
 - [Disable a rule](/linter/#disable-a-lint-rule)