Skip to content

chore: add @html-eslint #2385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore: add @html-eslint #2385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38ca45e
chore: add @html-eslint
yeonjuan May 20, 2025
96e6c85
style: lint with sort-attrs
bennypowers May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions docs/_includes/layouts/pages/element.11ty.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default class ElementsPage extends Renderer<Context> {
].filter(Boolean);

return html`${stylesheets.map(x => html`
<link rel="stylesheet" data-helmet href="${x}">`).join('')}
<link data-helmet href="${x}" rel="stylesheet">`).join('')}

<noscript data-helmet>
<style>
Expand Down Expand Up @@ -124,9 +124,9 @@ export default class ElementsPage extends Renderer<Context> {

#actionsLabels = html`
<span slot="action-label-copy">Copy to Clipboard</span>
<span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
<span slot="action-label-copy" data-code-block-state="active" hidden>Copied!</span>
<span slot="action-label-wrap">Wrap lines</span>
<span slot="action-label-wrap" hidden data-code-block-state="active">Overflow lines</span>
<span slot="action-label-wrap" data-code-block-state="active" hidden>Overflow lines</span>
`;

async #innerMD(content = '') {
Expand Down Expand Up @@ -178,7 +178,7 @@ export default class ElementsPage extends Renderer<Context> {
: ctx.doc.overviewImageHref.endsWith('svg') ? html`
<uxdot-example>${await this.#getOverviewInlineSvg(ctx)}</uxdot-example>
` : html`
<uxdot-example color-palette="lightest"><img src="${ctx.doc.overviewImageHref}" alt="" aria-labelledby="overview-image-description"></uxdot-example>`}
<uxdot-example color-palette="lightest"><img alt="" aria-labelledby="overview-image-description" src="${ctx.doc.overviewImageHref}"></uxdot-example>`}
${this.#header('Status')}
<uxdot-repo-status-list element="${ctx.tagName}"></uxdot-repo-status-list>
${this.#header('Sample element')}
Expand All @@ -195,7 +195,7 @@ export default class ElementsPage extends Renderer<Context> {
return [
content,
html`
<section class="band" id="installation">
<section id="installation" class="band">
${this.#header('Importing')}
<p>Add ${doc.docsPage.tagName} to your page with this import statement:</p>
<rh-code-block actions="copy" highlighting="prerendered">${this.highlight('html', dedent(html`
Expand All @@ -204,7 +204,7 @@ export default class ElementsPage extends Renderer<Context> {
</script>`))}
${this.#actionsLabels}
</rh-code-block>
<p>To learn more about installing RHDS elements on your site using an import map read our <a href="/get-started/developers/installation/">getting started docs</a>.
<p>To learn more about installing RHDS elements on your site using an import map read our <a href="/get-started/developers/installation/">getting started docs</a>.
</section>
`,

Expand Down Expand Up @@ -239,7 +239,7 @@ export default class ElementsPage extends Renderer<Context> {

<rh-code-block actions="copy" highlighting="prerendered">
${this.highlight('html', html`
<link rel="stylesheet" href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom.css">
<link href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom.css" rel="stylesheet">
`.trim())}
</rh-code-block>
`;
Expand All @@ -259,7 +259,7 @@ export default class ElementsPage extends Renderer<Context> {

<rh-code-block actions="copy" highlighting="prerendered">
${this.highlight('html', html`
<link rel="stylesheet" href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom-shim.css">
<link href="/path/to/${docsPage.tagName}/${docsPage.tagName}-lightdom-shim.css" rel="stylesheet">
`.trim())}
</rh-code-block>

Expand Down Expand Up @@ -634,7 +634,7 @@ export default class ElementsPage extends Renderer<Context> {
${!cssProperties.length ? html`
<em>None</em>` : html`
<rh-table>
<table class=css-custom-properties>
<table class="css-custom-properties">
<thead>
<tr>
<th scope="col">CSS Property</th>
Expand All @@ -647,7 +647,7 @@ export default class ElementsPage extends Renderer<Context> {
<td><code>${prop.name}</code></td>
<td>${await this.#innerMD(prop.description ?? '')}</td>
<td>
${!prop.default?.startsWith('#') ? html`<code>` : html`<code data-color="${prop.default}" style="--color:${prop.default}">`}${prop.default ?? '—'}</code>
${!prop.default?.startsWith('#') ? html`<code>` : html`<code style="--color:${prop.default}" data-color="${prop.default}">`}${prop.default ?? '—'}</code>
</td>
</tr>`))).join('')}
</tbody>
Expand Down Expand Up @@ -758,12 +758,12 @@ export default class ElementsPage extends Renderer<Context> {
return html`
${this.#header(demo.title, 2, `demo-${labelSlug}`)}
<uxdot-demo id="${projectId}"
tag="${tagName}"
demo="${demoSlug}"
demo-title="${demo.title}"
demo-file-path="${demo.filePath}"
demo-source-url="${sourceUrl}"
demo-title="${demo.title}"
demo-url="${demoUrl}"
demo-file-path="${demo.filePath}"
tag="${tagName}"
>${codeblocks}</uxdot-demo>
`;
} else {
Expand Down
12 changes: 6 additions & 6 deletions docs/_includes/layouts/pages/tokens.11ty.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ export default class TokensPage extends Renderer<Data> {
${isColor && token.path.includes('text') ? 'Aa'
: isFont ? (example || (token.attributes?.aliases as string[])?.[0] || 'Aa')
: name === 'breakpoint' ? html`
<img src="/assets/breakpoints/device-${token.name}.svg" role="presentation">`
<img role="presentation" src="/assets/breakpoints/device-${token.name}.svg">`
: example}
</samp>
</td>
Expand All @@ -244,7 +244,7 @@ export default class TokensPage extends Renderer<Data> {
</td>
<td>
${( isDimension ? html`<code>${token.$value}<code>`
: isColor ? html`<code style="--color: ${token.$value}">${token.$value}</code> `
: isColor ? html`<code style="--color: ${token.$value}">${token.$value}</code>`
: isWeight ? html`
<code class="numerical">${token.$value}</code>
<code class="common">${(token.attributes?.aliases as string[])?.[0] ?? ''}</code>`
Expand Down Expand Up @@ -310,7 +310,7 @@ export default class TokensPage extends Renderer<Data> {
class="swatches"
color-palette="lightest">
<h${level + 1} slot="header">Theme Tokens</h${level + 1}>
<label for="picker-${slug}" slot="header">Color Palette</label>
<label slot="header" for="picker-${slug}">Color Palette</label>
<rh-context-picker id="picker-${slug}"
slot="header"
allow="lightest,darkest"
Expand Down Expand Up @@ -420,9 +420,9 @@ export default class TokensPage extends Renderer<Data> {
const seenPaths = new Set<string>();
const options: Options = { tokens, name, path, slug, level: 1, exclude, include, seenPaths };
return html`
<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
<link rel="stylesheet" data-helmet href="/styles/samp.css">
<link rel="stylesheet" data-helmet href="/styles/pages/tokens.css">
<link data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css" rel="stylesheet">
<link data-helmet href="/styles/samp.css" rel="stylesheet">
<link data-helmet href="/styles/pages/tokens.css" rel="stylesheet">
<script type="module" data-helmet>
import '@uxdot/elements/uxdot-spacer-tokens-table.js';
import '@rhds/elements/rh-card/rh-card.js';
Expand Down
2 changes: 1 addition & 1 deletion docs/_plugins/markdown-it.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ function rhdsCodeBlock(md: MarkdownIt) {
const redactedToken = Object.assign(token, { info });
return html`
<rh-code-block ${normalized.startsWith('rh' ) ? 'full-height' : ''}
dedent
actions="${actions.join(' ')}"
dedent
highlighting="prerendered"
${slf.renderAttrs(redactedToken)}>${rendered}</rh-code-block>`.trim();
} else {
Expand Down
4 changes: 2 additions & 2 deletions docs/_plugins/tokensHelpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@ export function copyCell(token: DesignToken) {
<td data-label="Copy">
<div>
<uxdot-copy-button class="icon-only" copy="${getVariableSyntax(token)}">
<span slot="extra-content" class="visually-hidden">
<span class="visually-hidden" slot="extra-content">
Full CSS Variable
</span>
</uxdot-copy-button>
<uxdot-copy-button class="icon-only" copy="${getTokenHref(token)}" icon="link">
<span slot="extra-content" class="visually-hidden">
<span class="visually-hidden" slot="extra-content">
Permalink to this token
</span>
</uxdot-copy-button>
Expand Down
4 changes: 2 additions & 2 deletions docs/foundations/iconography/iconography.11ty.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default class IconsPage {
async render(ctx) {
const { icons } = ctx;
return html`
<script type="module" src="./icons.js" data-helmet></script>
<script type="module" data-helmet src="./icons.js"></script>

<style data-helmet>
.icon-set {
Expand Down Expand Up @@ -84,7 +84,7 @@ export default class IconsPage {
const label = `Copy icon HTML for ${set} ${icon}`;
return html`
<li>
<rh-icon set="${set}" icon="${icon}"></rh-icon>
<rh-icon icon="${icon}" set="${set}"></rh-icon>
<rh-button accessible-label="${label}" variant="link">${icon}</rh-button>
</li>
`;
Expand Down
2 changes: 1 addition & 1 deletion docs/foundations/iconography/icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ document.addEventListener('click', async function(event) {
if (event.target instanceof RhButton) {
const { icon, set } = event.target.parentElement.querySelector('rh-icon[icon][set]');
if (icon && set) {
const html = /* html*/`<rh-icon set="${set}" icon="${icon}"></rh-icon>`;
const html = /* html*/`<rh-icon icon="${icon}" set="${set}"></rh-icon>`;
await navigator.clipboard.writeText(html);
const message = html;
await RhAlert.toast({ heading: 'Copied', message });
Expand Down
4 changes: 2 additions & 2 deletions elements/rh-accordion/rh-accordion-header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@ export class RhAccordionHeader extends LitElement {
</span>
<svg id="icon"
role="presentation"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg">
<path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
</svg>
</button>
Expand Down
6 changes: 3 additions & 3 deletions elements/rh-accordion/test/rh-accordion.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ describe('<rh-accordion>', function() {
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.</p>
</rh-accordion-panel>
</rh-accordion>
</rh-accordion>
`);
headers = Array.from(element.querySelectorAll('rh-accordion-header'));
panels = Array.from(element.querySelectorAll('rh-accordion-panel'));
Expand Down Expand Up @@ -496,9 +496,9 @@ describe('<rh-accordion>', function() {
beforeEach(async function() {
element = await fixture<RhAccordion>(html`
<rh-accordion>
<h2><rh-accordion-header expanded id="attribute-header-1">h1</rh-accordion-header></h2>
<h2><rh-accordion-header id="attribute-header-1" expanded>h1</rh-accordion-header></h2>
<rh-accordion-panel id="attribute-panel-1"><p>p1</p></rh-accordion-panel>
<h2><rh-accordion-header expanded id="attribute-header-2">h2</rh-accordion-header></h2>
<h2><rh-accordion-header id="attribute-header-2" expanded>h2</rh-accordion-header></h2>
<rh-accordion-panel id="attribute-panel-2"><p>p2</p></rh-accordion-panel>
<h2><rh-accordion-header>h3</rh-accordion-header></h2>
<rh-accordion-panel><p>p3</p></rh-accordion-panel>
Expand Down
2 changes: 1 addition & 1 deletion elements/rh-alert/demo/dismissable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h3 slot="header">Dismissable With Prevent Default</h3>
</section>

<script type="module">
/* eslint-disable no-console */
import { AlertCloseEvent } from '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
document.body.addEventListener('close', event => {
Expand Down
24 changes: 12 additions & 12 deletions elements/rh-alert/rh-alert.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,11 +215,11 @@ export class RhAlert extends LitElement {
[state]: true,
[variant]: !!variant,
})}"
role="alert"
aria-hidden="false"
color-palette="lightest">
color-palette="lightest"
role="alert">
<div id="left-column">
<rh-icon id="icon" set="ui" icon="${this.#icon}"></rh-icon>
<rh-icon id="icon" icon="${this.#icon}" set="ui"></rh-icon>
</div>
<div id="middle-column">
<header ?hidden="${!_isServer && this.#slots.isEmpty('header')}">
Expand All @@ -228,10 +228,10 @@ export class RhAlert extends LitElement {
</div>${!this.dismissable && this.variant !== 'toast' ? '' : html`
<div id="header-actions">
<rh-button id="close-button"
variant="close"
@click="${this.#onClose}"
accessible-label="Close"
confirm
@click="${this.#onClose}"></rh-button>
variant="close"></rh-button>
</div>`}
</header>
<div id="description">
Expand Down Expand Up @@ -288,22 +288,22 @@ function renderToasts() {
const [firstAction, secondAction] = actions ?? [];
return html`
<rh-alert id="${id}"
state="${state}"
class="${classMap({ persistent })}"
variant="toast"
role="status"
aria-live="polite"
@focusin="${manageAlertAnimation}"
@focusout="${manageAlertAnimation}"
@mouseenter="${manageAlertAnimation}"
@mouseleave="${manageAlertAnimation}">
@mouseleave="${manageAlertAnimation}"
aria-live="polite"
role="status"
state="${state}"
variant="toast">
<h3 slot="header">${heading}</h3>
${!message ? '' : typeof message !== 'string' ? message : html`
<p class="text" ?hidden="${!message}">${message}</p>`}
${[firstAction, secondAction].filter(x => !!x).map(action => html`
<rh-button slot="actions"
variant="${action === firstAction ? 'secondary' : 'link'}"
data-action="${action.action}">${action.text}</rh-button>
data-action="${action.action}"
variant="${action === firstAction ? 'secondary' : 'link'}">${action.text}</rh-button>
`) ?? []}
</rh-alert>
`;
Expand Down
10 changes: 5 additions & 5 deletions elements/rh-announcement/rh-announcement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export class RhAnnouncement extends LitElement {
})}">
<div id="row" part="row">
<div id="image"
part="image"
class="${classMap({ empty: !this.#slots.hasSlotted('image') })}">
class="${classMap({ empty: !this.#slots.hasSlotted('image') })}"
part="image">
<slot name="image"></slot>
</div>
<div id="content">
Expand All @@ -92,10 +92,10 @@ export class RhAnnouncement extends LitElement {
?hidden="${!this.dismissable}"
?inert="${!this.dismissable}">
<rh-button id="close-button"
label="Close"
@click=${this.#closeHandler}
confirm
variant="close"
@click=${this.#closeHandler}></rh-button>
label="Close"
variant="close"></rh-button>
</div>
</div>
`;
Expand Down
6 changes: 3 additions & 3 deletions elements/rh-announcement/test/rh-announcement.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ describe('with `dismissable` and `image-position` attributes, a slotted image, a
beforeEach(async function() {
element = await createFixture<RhAnnouncement>(html`
<rh-announcement dismissable image-position="inline-start">
<svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
<rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4"></rect>
<text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
<svg slot="image" aria-label="Sample image" height="48" role="img" width="80">
<rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" height="100%" stroke="var(--rh-color-border-subtle)" stroke-dasharray="4 4" stroke-width="2px" width="100%"></rect>
<text style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))" x="17" y="30">
Image
</text>
</svg>
Expand Down
2 changes: 1 addition & 1 deletion elements/rh-audio-player/rh-audio-player-about.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export class RhAudioPlayerAbout extends LitElement {
${heading}
</rh-audio-player-scrolling-text-overflow>
</hgroup>`}
<div part="body" ?hidden="${!hasContent}" tabindex=0><slot></slot></div>
<div part="body" ?hidden="${!hasContent}" tabindex="0"><slot></slot></div>
<slot part="profile" name="profile"></slot>`;
}

Expand Down
22 changes: 11 additions & 11 deletions elements/rh-audio-player/rh-audio-player-rate-stepper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,30 +51,30 @@ export class RhAudioPlayerRateStepper extends LitElement {
<div>
<button id="stepdown"
class="tabbable playback-rate-step"
tabindex="-1"
aria-label="<"
?disabled="${this.disabled || this.playbackRate < 0.5}"
@click="${this.#dec}">
@click="${this.#dec}"
aria-label="<"
tabindex="-1">
<rh-icon icon="caret-left" set="microns"></rh-icon>
</button>
<select id="playback-rate"
class="tabbable"
aria-label="${ifDefined(this.label)}"
?disabled="${this.disabled}"
@click="${this.#onPlaybackRateSelect}"
.value="${this.playbackRate?.toFixed(pbrFixed)}"
@change="${this.#onPlaybackRateSelect}"
.value="${this.playbackRate?.toFixed(pbrFixed)}">${this.#playbackRates.map(step => html`
<option .value="${step.toFixed(pbrFixed)}"
?selected=${this.playbackRate.toFixed(pbrFixed) === step.toFixed(pbrFixed)}>
@click="${this.#onPlaybackRateSelect}"
aria-label="${ifDefined(this.label)}">${this.#playbackRates.map(step => html`
<option ?selected=${this.playbackRate.toFixed(pbrFixed) === step.toFixed(pbrFixed)}
.value="${step.toFixed(pbrFixed)}">
${step.toFixed(pbrFixed)}x
</option>`)}
</select>
<button id="stepup"
class="tabbable playback-rate-step"
tabindex="-1"
aria-label=">"
?disabled="${this.disabled || this.playbackRate > 1.75}"
@click="${this.#inc}">
@click="${this.#inc}"
aria-label=">"
tabindex="-1">
<rh-icon icon="caret-right" set="microns"></rh-icon>
</button>
</div>
Expand Down
Loading
Loading