Back to Rome

Lint Review

website/src/components/cli-screenshots/lint-review.md

0.4.25.8 KB
Original Source
<pre class="language-text homepage-example collapsed collapsable"><code class="language-text"><span style="color: CornflowerBlue">$</span> rome check --review <span style="color: #000; background-color: #ddd;"><strong> Reviewing diagnostics (</strong></span><span style="color: #000; background-color: #ddd;"><strong><strong>3</strong></strong></span><span style="color: #000; background-color: #ddd;"><strong><span style="opacity: 0.8;">/</span></strong></span><span style="color: #000; background-color: #ddd;"><strong><strong>3</strong></strong></span><span style="color: #000; background-color: #ddd;"><strong>) </strong></span> <span style="text-decoration-style: dashed; text-decoration-line: underline;">src/App.jsx:8:3</span> <strong>lint/jsx-a11y/altText</strong> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Tomato;">✖ </span></strong><span style="color: Tomato;">Provide </span><span style="color: Tomato;"><strong>alt</strong></span><span style="color: Tomato;"> text when using </span><span style="color: Tomato;"><strong>img</strong></span><span style="color: Tomato;">, </span><span style="color: Tomato;"><strong>area</strong></span><span style="color: Tomato;">, </span><span style="color: Tomato;"><strong>input type=&apos;image&apos;</strong></span><span style="color: Tomato;">, and </span><span style="color: Tomato;"><strong>object</strong></span> <span style="color: Tomato;">elements.</span> <strong> 6</strong><strong> │ </strong> <span class="token keyword">return</span> &lt;<span class="token attr-name">div</span> <span class="token attr-name">className</span><span class="token operator">=</span><span class="token string">&quot;App&quot;</span>&gt; <strong> 7</strong><strong> │ </strong> &lt;<span class="token attr-name">header</span> <span class="token attr-name">className</span><span class="token operator">=</span><span class="token string">&quot;App-header&quot;</span>&gt; <strong><span style="color: Tomato;">&gt;</span></strong><strong> 8</strong><strong> │ </strong> &lt;<span class="token attr-name">img</span> <span class="token attr-name">src</span><span class="token operator">=</span><span class="token punctuation">{</span><span class="token variable">logo2</span><span class="token punctuation">}</span> <span class="token attr-name">className</span><span class="token operator">=</span><span class="token string">&quot;App-logo&quot;</span> <span class="token operator">/</span>&gt; <strong> │ </strong> <span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span><span style="color: Tomato;"><strong>^</strong></span> <strong> 9</strong><strong> │ </strong> &lt;<span class="token attr-name">p</span>&gt; <strong> 10</strong><strong> │ </strong> Edit <strong><span style="color: DodgerBlue;">ℹ </span></strong><span style="color: DodgerBlue;">Meaningful alternative text on elements helps users relying on screen</span> <span style="color: DodgerBlue;">readers to understand content&apos;s purpose within a page.</span> <span style="opacity: 0.8;">❯</span> <strong>How do you want to resolve this?</strong> <strong><span style="color: DodgerBlue;">ℹ </span></strong><span style="color: DodgerBlue;">Use arrow keys and then </span><span style="color: DodgerBlue;"><strong>enter</strong></span><span style="color: DodgerBlue;"> to select an option</span> ◉ <u>Add suppression comment</u> <span style="opacity: 0.8;">(shortcut s)</span> ◯ Do nothing <span style="opacity: 0.8;">(shortcut n)</span> ◯ Exit <span style="opacity: 0.8;">(shortcut escape)</span> ◯ More options... <span style="opacity: 0.8;">(shortcut m)</span> </code><button aria-hidden="true" class="expand">Click to Expand</button></pre>