@kouji-ui/core 0.0.4 → 0.1.1

package/src/select/select.spec.ts

@@ -1,145 +1,138 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { describe, it, expect } from 'vitest';
 import { KjSelect, KjSelectTrigger, KjSelectContent, KjOption } from './select';
 
-expect.extend(toHaveNoViolations);
-
-const imports = [KjSelect, KjSelectTrigger, KjSelectContent, KjOption];
-const template = `
-  <div kjSelect [(kjSelectValue)]="val">
-    <button kjSelectTrigger aria-haspopup="listbox">Select fruit</button>
-    <div kjSelectContent>
-      <div kjOption [kjOptionValue]="'apple'">Apple</div>
-      <div kjOption [kjOptionValue]="'banana'">Banana</div>
-      <div kjOption [kjOptionValue]="'cherry'">Cherry</div>
-    </div>
-  </div>`;
-
 describe('KjSelect', () => {
-  it('listbox hidden by default', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('trigger opens listbox', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    expect(container.querySelector('[kjSelectContent]')).not.toHaveAttribute('hidden');
-  });
-
-  it('trigger sets aria-expanded to false by default', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    expect(container.querySelector('[kjSelectTrigger]')).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('trigger sets aria-expanded to true when open', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    expect(container.querySelector('[kjSelectTrigger]')).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('clicking option selects and closes', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    fireEvent.click(container.querySelector('[kjOption]')!);
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('selected option has aria-selected="true"', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: 'apple' } });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(options[0]).toHaveAttribute('aria-selected', 'true');
-    expect(options[1]).toHaveAttribute('aria-selected', 'false');
-  });
-
-  it('listbox has role="listbox"', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('role', 'listbox');
-  });
-
-  it('options have role="option"', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    const options = container.querySelectorAll('[kjOption]');
-    options.forEach(opt => expect(opt).toHaveAttribute('role', 'option'));
-  });
-
-  it('ArrowDown moves focus to next option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[0]);
-  });
-
-  it('ArrowDown then ArrowDown moves to second option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[1]);
-  });
-
-  it('Home key moves focus to first option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    // Move down first
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    // Then Home
-    fireEvent.keyDown(content, { key: 'Home' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[0]);
-  });
-
-  it('End key moves focus to last option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'End' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[2]);
-  });
-
-  it('Enter selects focused option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    fireEvent.keyDown(content, { key: 'Enter' });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('Space selects focused option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    fireEvent.keyDown(content, { key: ' ' });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('type-ahead jumps to matching option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'b' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[1]);
-  });
-
-  it('Escape closes the listbox', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    fireEvent.keyDown(document, { key: 'Escape' });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    expect(await axe(container)).toHaveNoViolations();
+  it('panel exposes role=listbox', async () => {
+    @Component({
+      selector: 'kj-sel-host',
+      standalone: true,
+      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
+      template: `
+        <div kjSelect>
+          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
+          <kj-select-content [kjFor]="t">
+            <div kjOption [kjOptionValue]="'a'">A</div>
+          </kj-select-content>
+        </div>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const panel = container.querySelector('kj-select-content') as HTMLElement;
+    expect(panel.getAttribute('role')).toBe('listbox');
+  });
+
+  it('trigger advertises aria-haspopup=listbox', async () => {
+    @Component({
+      selector: 'kj-sel-host',
+      standalone: true,
+      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
+      template: `
+        <div kjSelect>
+          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
+          <kj-select-content [kjFor]="t">
+            <div kjOption [kjOptionValue]="'a'">A</div>
+          </kj-select-content>
+        </div>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const btn = container.querySelector('button')!;
+    expect(btn.getAttribute('aria-haspopup')).toBe('listbox');
+    expect(btn.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('panel reflects aria-multiselectable when kjMultiple is set on trigger', async () => {
+    @Component({
+      selector: 'kj-sel-host',
+      standalone: true,
+      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
+      template: `
+        <div kjSelect>
+          <button kjSelectTrigger kjMultiple #t="kjSelectTrigger">Open</button>
+          <kj-select-content [kjFor]="t">
+            <div kjOption [kjOptionValue]="'a'">A</div>
+            <div kjOption [kjOptionValue]="'b'">B</div>
+          </kj-select-content>
+        </div>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const panel = container.querySelector('kj-select-content') as HTMLElement;
+    expect(panel.getAttribute('aria-multiselectable')).toBe('true');
+  });
+
+  it('panel omits aria-multiselectable in single mode', async () => {
+    @Component({
+      selector: 'kj-sel-host',
+      standalone: true,
+      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
+      template: `
+        <div kjSelect>
+          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
+          <kj-select-content [kjFor]="t">
+            <div kjOption [kjOptionValue]="'a'">A</div>
+          </kj-select-content>
+        </div>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const panel = container.querySelector('kj-select-content') as HTMLElement;
+    expect(panel.hasAttribute('aria-multiselectable')).toBe(false);
+  });
+
+  it('options carry role=option', async () => {
+    @Component({
+      selector: 'kj-sel-host',
+      standalone: true,
+      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
+      template: `
+        <div kjSelect>
+          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
+          <kj-select-content [kjFor]="t">
+            <div kjOption [kjOptionValue]="'a'">A</div>
+            <div kjOption [kjOptionValue]="'b'">B</div>
+          </kj-select-content>
+        </div>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const opts = container.querySelectorAll('[kjOption]');
+    expect(opts.length).toBe(2);
+    opts.forEach(o => expect(o.getAttribute('role')).toBe('option'));
+  });
+
+  it('ArrowDown sets aria-activedescendant on the listbox panel', async () => {
+    @Component({
+      standalone: true,
+      imports: [KjSelect, KjSelectTrigger, KjSelectContent, KjOption],
+      template: `
+        <div kjSelect>
+          <button kjSelectTrigger #t="kjSelectTrigger">Open</button>
+          <kj-select-content [kjFor]="t">
+            <div kjOption [kjOptionValue]="'a'">A</div>
+            <div kjOption [kjOptionValue]="'b'">B</div>
+          </kj-select-content>
+        </div>
+      `,
+    })
+    class Host {}
+    const { container, fixture } = await render(Host);
+    // open the overlay
+    const trigger = container.querySelector('button') as HTMLElement;
+    trigger.click();
+    fixture.detectChanges();
+    // body-portal puts panel into document.body; fall back to container if null
+    let panel = document.querySelector('kj-select-content') as HTMLElement | null;
+    if (!panel) panel = container.querySelector('kj-select-content') as HTMLElement;
+    panel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    expect(panel.getAttribute('aria-activedescendant')).toMatch(/^kj-list-item-\d+$/);
   });
 });

package/src/select/select.ts

@@ -1,250 +1,4 @@
-import {
-  afterNextRender,
-  computed,
-  Directive,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  model,
-  signal,
-} from '@angular/core';
-import { KjDisabled, KjFocusRing } from '../primitives';
-import { KJ_SELECT } from './select.context';
-
-/**
- * Root select container. Manages open/close state via `kjSelectValue` model.
- *
- * @example
- * ```html
- * <div kjSelect [(kjSelectValue)]="selected">
- *   <button kjSelectTrigger aria-haspopup="listbox">Choose fruit</button>
- *   <div kjSelectContent>
- *     <div kjOption [kjOptionValue]="'apple'">Apple</div>
- *   </div>
- * </div>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjSelect]',
-  standalone: true,
-  providers: [{ provide: KJ_SELECT, useExisting: KjSelect }],
-})
-export class KjSelect {
-  /** The currently selected value. Supports two-way binding. */
-  readonly kjSelectValue = model<unknown>(undefined);
-
-  /** Read-only signal for the current value. */
-  readonly value = this.kjSelectValue.asReadonly();
-
-  private readonly _open = signal(false);
-
-  /** Whether the listbox is currently open. */
-  readonly open = this._open.asReadonly();
-
-  /**
-   * Selects a value and closes the listbox.
-   * @param val The value to select.
-   */
-  select(val: unknown): void {
-    this.kjSelectValue.set(val);
-    this._open.set(false);
-  }
-
-  /** Toggles the open state of the listbox. */
-  toggle(): void {
-    this._open.update(v => !v);
-  }
-
-  /** Closes the listbox. */
-  hide(): void {
-    this._open.set(false);
-  }
-}
-
-/**
- * Trigger button that opens/closes the select listbox.
- * Automatically binds `aria-expanded` to reflect open state.
- *
- * @example
- * ```html
- * <button kjSelectTrigger aria-haspopup="listbox">Choose fruit</button>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjSelectTrigger]',
-  standalone: true,
-  hostDirectives: [KjFocusRing],
-  host: {
-    '[attr.aria-expanded]': 'ctx.open().toString()',
-    '(click)': '$event.stopPropagation(); ctx.toggle()',
-  },
-})
-export class KjSelectTrigger {
-  /** @internal */
-  readonly ctx = inject(KJ_SELECT);
-}
-
-/**
- * Listbox container. Provides keyboard navigation (Arrow keys, Home, End,
- * Enter, Space, type-ahead) and ARIA listbox semantics. Hidden when closed.
- *
- * @example
- * ```html
- * <div kjSelectContent>
- *   <div kjOption [kjOptionValue]="'apple'">Apple</div>
- * </div>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjSelectContent]',
-  standalone: true,
-  host: {
-    'role': 'listbox',
-    '[attr.hidden]': '!ctx.open() ? "" : null',
-    '[attr.aria-activedescendant]': 'activeId()',
-    '(keydown)': 'onKeydown($event)',
-    '(document:keydown.escape)': 'ctx.hide()',
-    '(document:click)': 'onDocClick()',
-    '(click)': '$event.stopPropagation()',
-  },
-})
-export class KjSelectContent {
-  private readonly el = inject(ElementRef<HTMLElement>);
-  /** @internal */
-  readonly ctx = inject(KJ_SELECT);
-
-  private readonly _activeIndex = signal(-1);
-
-  /** @internal */
-  readonly activeId = computed(() => {
-    const items = this.getOptions();
-    const idx = this._activeIndex();
-    return items[idx]?.id ?? null;
-  });
-
-  /** @internal */
-  onDocClick(): void {
-    if (this.ctx.open()) this.ctx.hide();
-  }
-
-  /** @internal */
-  onKeydown(e: KeyboardEvent): void {
-    const items = this.getOptions();
-    if (!items.length) return;
-    let idx = this._activeIndex();
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        idx = Math.min(idx + 1, items.length - 1);
-        this._activeIndex.set(idx);
-        items[idx]?.el.focus();
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        idx = Math.max(idx - 1, 0);
-        this._activeIndex.set(idx);
-        items[idx]?.el.focus();
-        break;
-      case 'Home':
-        e.preventDefault();
-        this._activeIndex.set(0);
-        items[0]?.el.focus();
-        break;
-      case 'End':
-        e.preventDefault();
-        this._activeIndex.set(items.length - 1);
-        items[items.length - 1]?.el.focus();
-        break;
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        if (idx >= 0) {
-          const val = items[idx]?.value;
-          if (val !== undefined) this.ctx.select(val);
-        }
-        break;
-      default: {
-        const char = e.key.length === 1 ? e.key.toLowerCase() : null;
-        if (char) {
-          const match = items.findIndex(item =>
-            item.el.textContent?.trim().toLowerCase().startsWith(char)
-          );
-          if (match >= 0) {
-            this._activeIndex.set(match);
-            items[match].el.focus();
-          }
-        }
-      }
-    }
-  }
-
-  private getOptions(): Array<{ el: HTMLElement; value: unknown; id: string }> {
-    return (Array.from(
-      this.el.nativeElement.querySelectorAll('[kjOption]')
-    ) as HTMLElement[]).map((el, i) => ({
-      el,
-      value: (el as HTMLElement & { __kjOptionValue?: unknown }).__kjOptionValue,
-      id: el.id || `kj-option-${i}`,
-    }));
-  }
-}
-
-/**
- * Individual option inside a `kjSelectContent`. Clicking or pressing Enter/Space
- * calls `select()` on the parent context.
- *
- * @example
- * ```html
- * <div kjOption [kjOptionValue]="'apple'">Apple</div>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjOption]',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-  ],
-  host: {
-    'role': 'option',
-    '[attr.tabindex]': '"0"',
-    '[attr.aria-selected]': 'selected().toString()',
-    '[attr.aria-disabled]': 'disabled() ? "true" : null',
-    '(click)': 'handleClick()',
-    '(keydown.enter)': '$event.preventDefault(); handleClick()',
-    '(keydown.space)': '$event.preventDefault(); handleClick()',
-  },
-})
-export class KjOption {
-  private readonly ctx = inject(KJ_SELECT);
-  private readonly el = inject(ElementRef<HTMLElement>);
-  /** @internal */
-  readonly disabled = inject(KjDisabled).disabled;
-
-  /** The value this option represents. */
-  readonly kjOptionValue = input.required<unknown>();
-
-  /** @internal */
-  readonly selected = computed(() => this.ctx.value() === this.kjOptionValue());
-
-  constructor() {
-    effect(() => {
-      (this.el.nativeElement as HTMLElement & { __kjOptionValue?: unknown }).__kjOptionValue = this.kjOptionValue();
-    });
-    afterNextRender(() => {
-      if (!this.el.nativeElement.id) {
-        this.el.nativeElement.id = `kj-option-${Math.random().toString(36).slice(2, 7)}`;
-      }
-    });
-  }
-
-  /** @internal */
-  handleClick(): void {
-    if (!this.disabled()) this.ctx.select(this.kjOptionValue());
-  }
-}
+export * from './select-root';
+export * from './select-trigger';
+export * from './select-content';
+export * from './select-option';

package/src/skeleton/index.ts

@@ -0,0 +1,5 @@
+export {
+  KjSkeleton,
+  type KjSkeletonAnimation,
+  type KjSkeletonShape,
+} from './skeleton';

package/src/skeleton/skeleton.spec.ts

@@ -0,0 +1,115 @@
+import { render } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { KjSkeleton } from './skeleton';
+
+expect.extend(toHaveNoViolations);
+
+describe('KjSkeleton', () => {
+  describe('aria-hidden enforcement (load-bearing contract)', () => {
+    it('sets aria-hidden="true" on the host', async () => {
+      const { container } = await render(`<div kjSkeleton></div>`, {
+        imports: [KjSkeleton],
+      });
+      expect(container.querySelector('div')).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('sets aria-hidden="true" on a <span> host', async () => {
+      const { container } = await render(`<span kjSkeleton></span>`, {
+        imports: [KjSkeleton],
+      });
+      expect(container.querySelector('span')).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('host binding wins over a consumer-supplied [attr.aria-hidden]="false"', async () => {
+      // The directive's host binding `[attr.aria-hidden]="\"true\""` is a
+      // static expression evaluated by the directive, and Angular's binding
+      // semantics give the directive's host binding precedence over a
+      // template attribute literal on the same element. The consumer cannot
+      // turn the skeleton into something AT will read by writing
+      // `aria-hidden="false"` on the tag — this is the entire reason a
+      // directive exists rather than a CSS class. (Per analysis: not
+      // user-overridable.)
+      const { container } = await render(
+        `<div kjSkeleton aria-hidden="false"></div>`,
+        { imports: [KjSkeleton] },
+      );
+      expect(container.querySelector('div')).toHaveAttribute('aria-hidden', 'true');
+    });
+  });
+
+  describe('shape reflection', () => {
+    it('defaults to data-shape="rectangle"', async () => {
+      const { container } = await render(`<div kjSkeleton></div>`, {
+        imports: [KjSkeleton],
+      });
+      expect(container.querySelector('div')).toHaveAttribute('data-shape', 'rectangle');
+    });
+
+    it('reflects kjSkeletonShape="circle" to data-shape', async () => {
+      const { container } = await render(
+        `<div kjSkeleton [kjSkeletonShape]="'circle'"></div>`,
+        { imports: [KjSkeleton] },
+      );
+      expect(container.querySelector('div')).toHaveAttribute('data-shape', 'circle');
+    });
+
+    it('reflects kjSkeletonShape="text" to data-shape', async () => {
+      const { container } = await render(
+        `<div kjSkeleton [kjSkeletonShape]="'text'"></div>`,
+        { imports: [KjSkeleton] },
+      );
+      expect(container.querySelector('div')).toHaveAttribute('data-shape', 'text');
+    });
+
+    it('reflects kjSkeletonShape="text-block" to data-shape', async () => {
+      const { container } = await render(
+        `<div kjSkeleton [kjSkeletonShape]="'text-block'"></div>`,
+        { imports: [KjSkeleton] },
+      );
+      expect(container.querySelector('div')).toHaveAttribute('data-shape', 'text-block');
+    });
+  });
+
+  describe('animation reflection', () => {
+    it('defaults to data-animation="shimmer"', async () => {
+      const { container } = await render(`<div kjSkeleton></div>`, {
+        imports: [KjSkeleton],
+      });
+      expect(container.querySelector('div')).toHaveAttribute('data-animation', 'shimmer');
+    });
+
+    it('reflects kjSkeletonAnimation="pulse" to data-animation', async () => {
+      const { container } = await render(
+        `<div kjSkeleton [kjSkeletonAnimation]="'pulse'"></div>`,
+        { imports: [KjSkeleton] },
+      );
+      expect(container.querySelector('div')).toHaveAttribute('data-animation', 'pulse');
+    });
+
+    it('reflects kjSkeletonAnimation="none" to data-animation', async () => {
+      const { container } = await render(
+        `<div kjSkeleton [kjSkeletonAnimation]="'none'"></div>`,
+        { imports: [KjSkeleton] },
+      );
+      expect(container.querySelector('div')).toHaveAttribute('data-animation', 'none');
+    });
+  });
+
+  describe('a11y audits', () => {
+    it('a default skeleton passes axe', async () => {
+      const { container } = await render(`<div kjSkeleton></div>`, {
+        imports: [KjSkeleton],
+      });
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it('a circle skeleton with explicit dimensions passes axe', async () => {
+      const { container } = await render(
+        `<div kjSkeleton [kjSkeletonShape]="'circle'" style="width: 40px; height: 40px"></div>`,
+        { imports: [KjSkeleton] },
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+});