@ng-prism/core 21.0.0

package/dist/app/panels/a11y/a11y-sr.component.js

@@ -0,0 +1,257 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal, } from '@angular/core';
+import { A11ySrService } from './a11y-sr.service.js';
+import { A11yPerspectiveService } from './a11y-perspective.service.js';
+import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.index;
+function A11ySrComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 4);
+    i0.ɵɵtext(1, "Select a component to simulate screen reader output.");
+    i0.ɵɵdomElementEnd();
+} }
+function A11ySrComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 4);
+    i0.ɵɵtext(1, "No announced elements found.");
+    i0.ɵɵdomElementEnd();
+} }
+function A11ySrComponent_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    let tmp_2_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" \"", (tmp_2_0 = ctx_r1.active()) == null ? null : tmp_2_0.name, "\" ");
+} }
+function A11ySrComponent_Conditional_8_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const s_r3 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(s_r3);
+} }
+function A11ySrComponent_Conditional_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 10);
+    i0.ɵɵrepeaterCreate(1, A11ySrComponent_Conditional_8_Conditional_8_For_2_Template, 2, 1, "span", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.activeStates());
+} }
+function A11ySrComponent_Conditional_8_For_16_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 15);
+    i0.ɵɵdomListener("click", function A11ySrComponent_Conditional_8_For_16_Template_div_click_0_listener() { const ɵ$index_51_r5 = i0.ɵɵrestoreView(_r4).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.activeIndex.set(ɵ$index_51_r5)); });
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ɵ$index_51_r5 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("prism-a11y-sr__dot--active", ɵ$index_51_r5 === ctx_r1.activeIndex());
+} }
+function A11ySrComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 5)(1, "div", 6)(2, "div", 7);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 8);
+    i0.ɵɵconditionalCreate(5, A11ySrComponent_Conditional_8_Conditional_5_Template, 1, 1);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "div", 9);
+    i0.ɵɵtext(7);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(8, A11ySrComponent_Conditional_8_Conditional_8_Template, 3, 0, "div", 10);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "div", 11)(10, "button", 12);
+    i0.ɵɵdomListener("click", function A11ySrComponent_Conditional_8_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.prev()); });
+    i0.ɵɵtext(11, "\u25C0");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(12, "button", 12);
+    i0.ɵɵdomListener("click", function A11ySrComponent_Conditional_8_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.next()); });
+    i0.ɵɵtext(13, "\u25B6");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(14, "div", 13);
+    i0.ɵɵrepeaterCreate(15, A11ySrComponent_Conditional_8_For_16_Template, 1, 2, "div", 14, _forTrack0);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    let tmp_2_0;
+    let tmp_3_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.activeIndex() + 1, " / ", ctx_r1.announcements().length, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(((tmp_2_0 = ctx_r1.active()) == null ? null : tmp_2_0.name) ? 5 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate((tmp_3_0 = ctx_r1.active()) == null ? null : tmp_3_0.role);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeStates().length ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", ctx_r1.activeIndex() === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", ctx_r1.activeIndex() === ctx_r1.announcements().length - 1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.announcements());
+} }
+function A11ySrComponent_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 19);
+    i0.ɵɵdomListener("click", function A11ySrComponent_Conditional_9_For_5_Template_div_click_0_listener() { const a_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.activeIndex.set(a_r7.index - 1)); });
+    i0.ɵɵdomElementStart(1, "div", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 21)(4, "span", 22);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "span", 23);
+    i0.ɵɵtext(7);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const a_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("prism-a11y-sr__item--active", a_r7.index === ctx_r1.activeIndex() + 1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(a_r7.index);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(a_r7.text);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(a_r7.role);
+} }
+function A11ySrComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 16)(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(3, "div", 17);
+    i0.ɵɵrepeaterCreate(4, A11ySrComponent_Conditional_9_For_5_Template, 8, 5, "div", 18, _forTrack0);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.announcements().length, " Announcements");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.announcements());
+} }
+export class A11ySrComponent {
+    rendererService = inject(PrismRendererService);
+    srService = inject(A11ySrService);
+    perspective = inject(A11yPerspectiveService);
+    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    announcements = computed(() => {
+        const root = this.rendererService.renderedElement();
+        if (!root)
+            return [];
+        const doc = root.ownerDocument;
+        return this.srService.buildAnnouncementList(root, doc ? (id) => doc.getElementById(id) : undefined);
+    }, ...(ngDevMode ? [{ debugName: "announcements" }] : []));
+    active = computed(() => {
+        const list = this.announcements();
+        const idx = this.activeIndex();
+        return list[idx] ?? null;
+    }, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    activeStates = computed(() => this.active()?.states.filter((s) => !s.startsWith('level')) ?? [], ...(ngDevMode ? [{ debugName: "activeStates" }] : []));
+    next() {
+        this.activeIndex.update((i) => Math.min(i + 1, this.announcements().length - 1));
+    }
+    prev() {
+        this.activeIndex.update((i) => Math.max(i - 1, 0));
+    }
+    static ɵfac = function A11ySrComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11ySrComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: A11ySrComponent, selectors: [["prism-a11y-sr"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 10, vars: 5, consts: [[1, "prism-a11y-sr"], [1, "prism-a11y-sr__perspective"], [1, "prism-a11y-sr__persp-btn", 3, "click"], [1, "prism-a11y-sr__persp-btn", "prism-a11y-sr__persp-btn--sr", 3, "click"], [1, "prism-a11y-sr__empty"], [1, "prism-a11y-sr__player"], [1, "prism-a11y-sr__player-card"], [1, "prism-a11y-sr__player-counter"], [1, "prism-a11y-sr__player-name"], [1, "prism-a11y-sr__player-role"], [1, "prism-a11y-sr__player-states"], [1, "prism-a11y-sr__nav-btns"], [1, "prism-a11y-sr__nav-btn", 3, "click", "disabled"], [1, "prism-a11y-sr__dots"], [1, "prism-a11y-sr__dot", 3, "prism-a11y-sr__dot--active"], [1, "prism-a11y-sr__dot", 3, "click"], [1, "prism-a11y-sr__header"], [1, "prism-a11y-sr__list"], [1, "prism-a11y-sr__item", 3, "prism-a11y-sr__item--active"], [1, "prism-a11y-sr__item", 3, "click"], [1, "prism-a11y-sr__idx"], [1, "prism-a11y-sr__text-wrap"], [1, "prism-a11y-sr__announcement"], [1, "prism-a11y-sr__role-label"]], template: function A11ySrComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
+            i0.ɵɵdomListener("click", function A11ySrComponent_Template_button_click_2_listener() { return ctx.perspective.mode.set("visual"); });
+            i0.ɵɵtext(3, " \uD83D\uDC41 Visual ");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(4, "button", 3);
+            i0.ɵɵdomListener("click", function A11ySrComponent_Template_button_click_4_listener() { return ctx.perspective.mode.set("screen-reader"); });
+            i0.ɵɵtext(5, " \uD83C\uDFA7 Screen Reader ");
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵconditionalCreate(6, A11ySrComponent_Conditional_6_Template, 2, 0, "div", 4)(7, A11ySrComponent_Conditional_7_Template, 2, 0, "div", 4)(8, A11ySrComponent_Conditional_8_Template, 17, 7, "div", 5)(9, A11ySrComponent_Conditional_9_Template, 6, 1);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("prism-a11y-sr__persp-btn--active", ctx.perspective.mode() === "visual");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("prism-a11y-sr__persp-btn--active", ctx.perspective.mode() === "screen-reader");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.rendererService.renderedElement() ? 6 : !ctx.announcements().length ? 7 : ctx.perspective.mode() === "screen-reader" ? 8 : 9);
+        } }, styles: ["[_nghost-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-sr[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-sr__perspective[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 2px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n    .prism-a11y-sr__persp-btn[_ngcontent-%COMP%] {\n      padding: 4px 12px;\n      font-size: 12px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      border: 1px solid var(--prism-border);\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-radius: 5px;\n      transition: all 0.12s;\n    }\n    .prism-a11y-sr__persp-btn[_ngcontent-%COMP%]:hover { color: var(--prism-text-2); }\n    .prism-a11y-sr__persp-btn--active[_ngcontent-%COMP%] {\n      background: rgba(124, 159, 236, 0.1);\n      border-color: rgba(124, 159, 236, 0.3);\n      color: var(--prism-primary);\n    }\n    .prism-a11y-sr__persp-btn--sr.prism-a11y-sr__persp-btn--active[_ngcontent-%COMP%] {\n      background: rgba(167, 139, 250, 0.1);\n      border-color: rgba(167, 139, 250, 0.3);\n      color: #a78bfa;\n    }\n\n    .prism-a11y-sr__empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    \n\n    .prism-a11y-sr__header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      font-size: 12px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .prism-a11y-sr__hint[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #a78bfa;\n      cursor: default;\n    }\n\n    .prism-a11y-sr__list[_ngcontent-%COMP%] { flex: 1; overflow: auto; }\n\n    .prism-a11y-sr__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 8px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      cursor: pointer;\n      transition: background 0.1s;\n    }\n    .prism-a11y-sr__item[_ngcontent-%COMP%]:hover { background: rgba(167, 139, 250, 0.04); }\n    .prism-a11y-sr__item--active[_ngcontent-%COMP%] { background: rgba(167, 139, 250, 0.08); }\n\n    .prism-a11y-sr__idx[_ngcontent-%COMP%] {\n      width: 18px; height: 18px;\n      background: #a78bfa;\n      color: white;\n      border-radius: 9px;\n      font-size: 10px; font-weight: 700;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0; margin-top: 2px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n    .prism-a11y-sr__item--active[_ngcontent-%COMP%]   .prism-a11y-sr__idx[_ngcontent-%COMP%] {\n      box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3);\n    }\n\n    .prism-a11y-sr__text-wrap[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-a11y-sr__announcement[_ngcontent-%COMP%] {\n      font-size: 12.5px;\n      color: var(--prism-text);\n      font-style: italic;\n      line-height: 1.4;\n    }\n    .prism-a11y-sr__role-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-muted);\n    }\n\n    \n\n    .prism-a11y-sr__player[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 16px;\n      flex: 1;\n      padding: 20px;\n    }\n\n    .prism-a11y-sr__player-card[_ngcontent-%COMP%] {\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-top: 2px solid #a78bfa;\n      border-radius: 10px;\n      padding: 20px 28px;\n      text-align: center;\n      min-width: 180px;\n    }\n    .prism-a11y-sr__player-counter[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      margin-bottom: 8px;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-a11y-sr__player-name[_ngcontent-%COMP%] {\n      font-size: 17px;\n      font-weight: 600;\n      color: var(--prism-text);\n      margin-bottom: 4px;\n      min-height: 24px;\n    }\n    .prism-a11y-sr__player-role[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #a78bfa;\n    }\n    .prism-a11y-sr__player-states[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 5px;\n      justify-content: center;\n      flex-wrap: wrap;\n      margin-top: 6px;\n    }\n    .prism-a11y-sr__player-states[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      padding: 1px 6px;\n      border-radius: 3px;\n      font-size: 11px;\n      font-weight: 600;\n      background: color-mix(in srgb, #fbbf24 12%, transparent);\n      color: #fbbf24;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-sr__nav-btns[_ngcontent-%COMP%] { display: flex; gap: 8px; }\n    .prism-a11y-sr__nav-btn[_ngcontent-%COMP%] {\n      width: 36px; height: 36px;\n      background: rgba(167, 139, 250, 0.1);\n      border: 1px solid rgba(167, 139, 250, 0.2);\n      border-radius: 6px;\n      color: #a78bfa;\n      cursor: pointer;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: background 0.1s;\n    }\n    .prism-a11y-sr__nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) { background: rgba(167, 139, 250, 0.18); }\n    .prism-a11y-sr__nav-btn[_ngcontent-%COMP%]:disabled { opacity: 0.3; cursor: default; }\n\n    .prism-a11y-sr__dots[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 5px;\n      flex-wrap: wrap;\n      justify-content: center;\n      max-width: 200px;\n    }\n    .prism-a11y-sr__dot[_ngcontent-%COMP%] {\n      width: 6px; height: 6px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n    .prism-a11y-sr__dot--active[_ngcontent-%COMP%] {\n      background: #a78bfa;\n      width: 14px;\n      border-radius: 3px;\n    }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-a11y-sr', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="prism-a11y-sr">
+      <div class="prism-a11y-sr__perspective">
+        <button
+          class="prism-a11y-sr__persp-btn"
+          [class.prism-a11y-sr__persp-btn--active]="perspective.mode() === 'visual'"
+          (click)="perspective.mode.set('visual')"
+        >
+          👁 Visual
+        </button>
+        <button
+          class="prism-a11y-sr__persp-btn prism-a11y-sr__persp-btn--sr"
+          [class.prism-a11y-sr__persp-btn--active]="perspective.mode() === 'screen-reader'"
+          (click)="perspective.mode.set('screen-reader')"
+        >
+          🎧 Screen Reader
+        </button>
+      </div>
+
+      @if (!rendererService.renderedElement()) {
+        <div class="prism-a11y-sr__empty">Select a component to simulate screen reader output.</div>
+      } @else if (!announcements().length) {
+        <div class="prism-a11y-sr__empty">No announced elements found.</div>
+      } @else if (perspective.mode() === 'screen-reader') {
+        <div class="prism-a11y-sr__player">
+          <div class="prism-a11y-sr__player-card">
+            <div class="prism-a11y-sr__player-counter">
+              {{ activeIndex() + 1 }} / {{ announcements().length }}
+            </div>
+            <div class="prism-a11y-sr__player-name">
+              @if (active()?.name) { "{{ active()?.name }}" }
+            </div>
+            <div class="prism-a11y-sr__player-role">{{ active()?.role }}</div>
+            @if (activeStates().length) {
+              <div class="prism-a11y-sr__player-states">
+                @for (s of activeStates(); track s) { <span>{{ s }}</span> }
+              </div>
+            }
+          </div>
+          <div class="prism-a11y-sr__nav-btns">
+            <button class="prism-a11y-sr__nav-btn" (click)="prev()" [disabled]="activeIndex() === 0">◀</button>
+            <button class="prism-a11y-sr__nav-btn" (click)="next()" [disabled]="activeIndex() === announcements().length - 1">▶</button>
+          </div>
+          <div class="prism-a11y-sr__dots">
+            @for (a of announcements(); track a.index; let i = $index) {
+              <div
+                class="prism-a11y-sr__dot"
+                [class.prism-a11y-sr__dot--active]="i === activeIndex()"
+                (click)="activeIndex.set(i)"
+              ></div>
+            }
+          </div>
+        </div>
+      } @else {
+        <div class="prism-a11y-sr__header">
+          <span>{{ announcements().length }} Announcements</span>
+        </div>
+        <div class="prism-a11y-sr__list">
+          @for (a of announcements(); track a.index) {
+            <div
+              class="prism-a11y-sr__item"
+              [class.prism-a11y-sr__item--active]="a.index === activeIndex() + 1"
+              (click)="activeIndex.set(a.index - 1)"
+            >
+              <div class="prism-a11y-sr__idx">{{ a.index }}</div>
+              <div class="prism-a11y-sr__text-wrap">
+                <span class="prism-a11y-sr__announcement">{{ a.text }}</span>
+                <span class="prism-a11y-sr__role-label">{{ a.role }}</span>
+              </div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: ["\n    :host { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-sr { display: flex; flex-direction: column; height: 100%; }\n\n    .prism-a11y-sr__perspective {\n      display: flex;\n      gap: 2px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n    .prism-a11y-sr__persp-btn {\n      padding: 4px 12px;\n      font-size: 12px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n      border: 1px solid var(--prism-border);\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-radius: 5px;\n      transition: all 0.12s;\n    }\n    .prism-a11y-sr__persp-btn:hover { color: var(--prism-text-2); }\n    .prism-a11y-sr__persp-btn--active {\n      background: rgba(124, 159, 236, 0.1);\n      border-color: rgba(124, 159, 236, 0.3);\n      color: var(--prism-primary);\n    }\n    .prism-a11y-sr__persp-btn--sr.prism-a11y-sr__persp-btn--active {\n      background: rgba(167, 139, 250, 0.1);\n      border-color: rgba(167, 139, 250, 0.3);\n      color: #a78bfa;\n    }\n\n    .prism-a11y-sr__empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 100px; color: var(--prism-text-muted); font-size: 13px;\n    }\n\n    /* \u2500\u2500 List mode \u2500\u2500 */\n    .prism-a11y-sr__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      font-size: 12px;\n      color: var(--prism-text-muted);\n      flex-shrink: 0;\n    }\n\n    .prism-a11y-sr__hint {\n      font-size: 11px;\n      color: #a78bfa;\n      cursor: default;\n    }\n\n    .prism-a11y-sr__list { flex: 1; overflow: auto; }\n\n    .prism-a11y-sr__item {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 8px 16px;\n      border-bottom: 1px solid var(--prism-border);\n      cursor: pointer;\n      transition: background 0.1s;\n    }\n    .prism-a11y-sr__item:hover { background: rgba(167, 139, 250, 0.04); }\n    .prism-a11y-sr__item--active { background: rgba(167, 139, 250, 0.08); }\n\n    .prism-a11y-sr__idx {\n      width: 18px; height: 18px;\n      background: #a78bfa;\n      color: white;\n      border-radius: 9px;\n      font-size: 10px; font-weight: 700;\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0; margin-top: 2px;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n    .prism-a11y-sr__item--active .prism-a11y-sr__idx {\n      box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3);\n    }\n\n    .prism-a11y-sr__text-wrap {\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-a11y-sr__announcement {\n      font-size: 12.5px;\n      color: var(--prism-text);\n      font-style: italic;\n      line-height: 1.4;\n    }\n    .prism-a11y-sr__role-label {\n      font-size: 11px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-muted);\n    }\n\n    /* \u2500\u2500 Player mode \u2500\u2500 */\n    .prism-a11y-sr__player {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 16px;\n      flex: 1;\n      padding: 20px;\n    }\n\n    .prism-a11y-sr__player-card {\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-top: 2px solid #a78bfa;\n      border-radius: 10px;\n      padding: 20px 28px;\n      text-align: center;\n      min-width: 180px;\n    }\n    .prism-a11y-sr__player-counter {\n      font-size: 11px;\n      color: var(--prism-text-muted);\n      margin-bottom: 8px;\n      font-family: var(--prism-font-mono, monospace);\n    }\n    .prism-a11y-sr__player-name {\n      font-size: 17px;\n      font-weight: 600;\n      color: var(--prism-text);\n      margin-bottom: 4px;\n      min-height: 24px;\n    }\n    .prism-a11y-sr__player-role {\n      font-size: 13px;\n      color: #a78bfa;\n    }\n    .prism-a11y-sr__player-states {\n      display: flex;\n      gap: 5px;\n      justify-content: center;\n      flex-wrap: wrap;\n      margin-top: 6px;\n    }\n    .prism-a11y-sr__player-states span {\n      padding: 1px 6px;\n      border-radius: 3px;\n      font-size: 11px;\n      font-weight: 600;\n      background: color-mix(in srgb, #fbbf24 12%, transparent);\n      color: #fbbf24;\n      font-family: var(--prism-font-sans, system-ui, sans-serif);\n    }\n\n    .prism-a11y-sr__nav-btns { display: flex; gap: 8px; }\n    .prism-a11y-sr__nav-btn {\n      width: 36px; height: 36px;\n      background: rgba(167, 139, 250, 0.1);\n      border: 1px solid rgba(167, 139, 250, 0.2);\n      border-radius: 6px;\n      color: #a78bfa;\n      cursor: pointer;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: background 0.1s;\n    }\n    .prism-a11y-sr__nav-btn:hover:not(:disabled) { background: rgba(167, 139, 250, 0.18); }\n    .prism-a11y-sr__nav-btn:disabled { opacity: 0.3; cursor: default; }\n\n    .prism-a11y-sr__dots {\n      display: flex;\n      gap: 5px;\n      flex-wrap: wrap;\n      justify-content: center;\n      max-width: 200px;\n    }\n    .prism-a11y-sr__dot {\n      width: 6px; height: 6px;\n      border-radius: 50%;\n      background: var(--prism-text-muted);\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n    .prism-a11y-sr__dot--active {\n      background: #a78bfa;\n      width: 14px;\n      border-radius: 3px;\n    }\n  "] }]
+    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11ySrComponent, { className: "A11ySrComponent", filePath: "app/panels/a11y/a11y-sr.component.ts", lineNumber: 288 }); })();

package/dist/app/panels/a11y/a11y-sr.service.d.ts

@@ -0,0 +1,8 @@
+import type { SrAnnouncement } from './a11y.types.js';
+import * as i0 from "@angular/core";
+export declare class A11ySrService {
+    buildAnnouncementList(root: Element, getById?: (id: string) => Element | null): SrAnnouncement[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11ySrService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<A11ySrService>;
+}
+//# sourceMappingURL=a11y-sr.service.d.ts.map

package/dist/app/panels/a11y/a11y-sr.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-sr.service.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-sr.service.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AAwCtD,qBACa,aAAa;IACxB,qBAAqB,CACnB,IAAI,EAAE,OAAO,EACb,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,GACvC,cAAc,EAAE;yCAJR,aAAa;6CAAb,aAAa;CAYzB"}

package/dist/app/panels/a11y/a11y-sr.service.js

@@ -0,0 +1,102 @@
+import { Injectable } from '@angular/core';
+import { computeAccessibleName, extractStates, getRole, isHidden, statesToList, } from './a11y-dom-utils.js';
+import * as i0 from "@angular/core";
+const ROLE_LABELS = {
+    button: 'button',
+    link: 'link',
+    textbox: 'text field',
+    searchbox: 'search field',
+    checkbox: 'checkbox',
+    radio: 'radio button',
+    listbox: 'list box',
+    slider: 'slider',
+    spinbutton: 'spin button',
+    combobox: 'combo box',
+    heading: 'heading',
+    list: 'list',
+    listitem: 'list item',
+    navigation: 'navigation',
+    main: 'main',
+    banner: 'banner',
+    contentinfo: 'content info',
+    complementary: 'complementary',
+    form: 'form',
+    dialog: 'dialog',
+    table: 'table',
+    row: 'row',
+    columnheader: 'column header',
+    cell: 'cell',
+    img: 'image',
+    region: 'region',
+    article: 'article',
+    group: 'group',
+};
+const ANNOUNCED_ROLES = new Set(Object.keys(ROLE_LABELS));
+const STRUCTURAL_TAGS = new Set([
+    'SCRIPT', 'STYLE', 'NOSCRIPT', 'META', 'LINK', 'TITLE', 'HEAD',
+    'DIV', 'SPAN',
+]);
+export class A11ySrService {
+    buildAnnouncementList(root, getById) {
+        const announcements = [];
+        walk(root, announcements, getById);
+        announcements.forEach((a, i) => {
+            a.index = i + 1;
+        });
+        return announcements;
+    }
+    static ɵfac = function A11ySrService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || A11ySrService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: A11ySrService, factory: A11ySrService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11ySrService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+function walk(element, out, getById) {
+    if (isHidden(element))
+        return;
+    const tag = element.tagName?.toUpperCase() ?? '';
+    if (STRUCTURAL_TAGS.has(tag) && !element.getAttribute('role')) {
+        for (const child of Array.from(element.childNodes)) {
+            if (child.nodeType === 1)
+                walk(child, out, getById);
+        }
+        return;
+    }
+    const role = getRole(element);
+    if (ANNOUNCED_ROLES.has(role)) {
+        const { name } = computeAccessibleName(element, getById);
+        const states = extractStates(element);
+        const stateList = statesToList(states);
+        const roleLabel = ROLE_LABELS[role] ?? role;
+        let levelSuffix = '';
+        if (role === 'heading' && states['level']) {
+            levelSuffix = ` level ${states['level']}`;
+        }
+        const parts = [];
+        if (name)
+            parts.push(`"${name}"`);
+        parts.push(`${roleLabel}${levelSuffix}`);
+        parts.push(...stateList.filter((s) => s !== 'level'));
+        out.push({
+            index: 0,
+            text: parts.join(' '),
+            name,
+            role: roleLabel,
+            states: stateList,
+            element,
+        });
+        if (role === 'list') {
+            for (const child of Array.from(element.childNodes)) {
+                if (child.nodeType === 1)
+                    walk(child, out, getById);
+            }
+        }
+    }
+    else {
+        for (const child of Array.from(element.childNodes)) {
+            if (child.nodeType === 1)
+                walk(child, out, getById);
+        }
+    }
+}

package/dist/app/panels/a11y/a11y-tree.component.d.ts

@@ -0,0 +1,27 @@
+import { PrismRendererService } from '../../services/prism-renderer.service.js';
+import type { A11yNode } from './a11y.types.js';
+import * as i0 from "@angular/core";
+export declare class A11yTreeNodeComponent {
+    readonly node: import("@angular/core").InputSignal<A11yNode>;
+    readonly depth: import("@angular/core").InputSignal<number>;
+    protected readonly expanded: import("@angular/core").WritableSignal<boolean>;
+    protected readonly visibleChildren: import("@angular/core").Signal<A11yNode[]>;
+    protected readonly hiddenChildren: import("@angular/core").Signal<A11yNode[]>;
+    protected readonly stateEntries: import("@angular/core").Signal<{
+        key: string;
+        label: string;
+    }[]>;
+    protected toggleExpanded(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yTreeNodeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yTreeNodeComponent, "prism-a11y-tree-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class A11yTreeComponent {
+    protected readonly rendererService: PrismRendererService;
+    private readonly treeService;
+    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
+    protected readonly expandAll: import("@angular/core").WritableSignal<boolean>;
+    protected readonly tree: import("@angular/core").Signal<A11yNode | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<A11yTreeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<A11yTreeComponent, "prism-a11y-tree", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=a11y-tree.component.d.ts.map

package/dist/app/panels/a11y/a11y-tree.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-tree.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/a11y/a11y-tree.component.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;;AAEhD,qBAmHa,qBAAqB;IAChC,QAAQ,CAAC,IAAI,gDAA8B;IAC3C,QAAQ,CAAC,KAAK,8CAAY;IAE1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kDAAgB;IAE3C,SAAS,CAAC,QAAQ,CAAC,eAAe,6CAEhC;IAEF,SAAS,CAAC,QAAQ,CAAC,cAAc,6CAE/B;IAEF,SAAS,CAAC,QAAQ,CAAC,YAAY;;;SAQ5B;IAEH,SAAS,CAAC,cAAc,IAAI,IAAI;yCAxBrB,qBAAqB;2CAArB,qBAAqB;CA6BjC;AAED,qBAuEa,iBAAiB;IAC5B,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2B;IAEvD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,kDAAgB;IAE5C,SAAS,CAAC,QAAQ,CAAC,IAAI,kDAQpB;yCAhBQ,iBAAiB;2CAAjB,iBAAiB;CAiB7B"}