fix(a11y): each Clean Up pane's working sentence is said in a live region that is in the sheet from the start - it stood only in the aria-label of a role="status" element that one innerHTML write put on screen already filled, and a screen reader announces a live region's text as it changes, not its label, and seldom a region that appears filled (review F3.9 risk)

The Clean Up sheet now keeps #cleanWorking (sr-only, role="status",
aria-live="polite", aria-atomic="true") in its markup. Once Smart
suggestions, Empty folders, Shrink video or Find writes its working rows,
cleanSayWorking reads their sentence from the rows' own label and puts it
in the region's text a frame later, emptying the region first so the same
sentence said again is a change a screen reader hears. Once those rows are
gone (the pane answered, failed or says it waits) the region is emptied, so
it never says a pane is working after it stopped; a newer pane's rows take
the region over. The rows keep their label, so the pane says what it is
doing when it is reached by reading.

treeScanKey runs the four panes, the page's own cleanSayWorking, a stub
MutationObserver and frames by hand: each sentence reaches the region's
text and leaves with its rows; asked again it is emptied and said again; of
two panes at work only the newer one's sentence is said, and the older one
answering does not empty it.

Mutants F39-a (no region in the markup), b (the sentence never set), c (set
at once, not a frame later), c2 (not emptied first), d (never emptied), e
(an older pane's frame saying its sentence), f (an older pane's watch left
running), g1-g4 (each pane's call removed), i (Smart's request not out),
each RED, restored by SHA-256.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Prithvi-Web

public/index.html

@@ -4968,6 +4968,12 @@ <h3 id="cleanTitle"><span data-icon="sparkles"></span>Clean Up</h3>
       <!-- Where what Clean Up removes goes: the system Trash, or a cloud account's own trash.
            Written by the Clean Up button for the scan the sheet opens on (cleanUpWhereItGoes). -->
       <div class="muted" id="cleanWhereNote" style="margin-bottom:6px;"></div>
+      <!-- What a pane is working on, said aloud (review F3.9): a pane's working
+           rows carry their sentence as a label, which a screen reader does not
+           announce. This region is in the sheet from the start; cleanSayWorking
+           puts the sentence in its text once the rows are on screen, and takes
+           it out once they are gone. -->
+      <div id="cleanWorking" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>
       <div id="cleanPaneRules" class="pane-fade">
         <!-- v4 §4.5 — the ladder: a saved view is a Clean Up rule, and a Clean
              Up rule is an Autopilot policy. One matching engine throughout. -->
@@ -39340,6 +39346,36 @@ <h2><span style="display:inline-flex;">${icon('diff', 13)}</span>${cmpWhenPair(r
   if (cleanOpen()) void load();
 }
 
+/* ── What a pane is working on, said aloud (review F3.9) ──
+   A pane's working rows (skeletonRows) carry their sentence as the aria-label
+   of a role="status" element that one innerHTML write puts on screen already
+   filled: a screen reader announces a live region's text as it changes, not
+   its label, and seldom a region that appears filled. So the sentence, read
+   from those rows, goes into the text of the sheet's own live region,
+   #cleanWorking, there from the start: a frame after the rows are written,
+   the region emptied first, so the same sentence said again is a change too.
+   Once the rows are gone — the pane answered, failed or says it waits — the
+   region is emptied, so it never says a pane is working after it stopped. A
+   newer pane's rows take the region over. */
+let cleanWorkingFor = null; // { rows, watch }: the working rows the region speaks for, and what sees them go
+function cleanSayWorking(host) {
+  const live = $('cleanWorking');
+  const rows = host.firstElementChild;
+  const sentence = rows && rows.getAttribute('aria-label');
+  if (!live || !sentence) return;
+  if (cleanWorkingFor) cleanWorkingFor.watch.disconnect();
+  const watch = new MutationObserver(() => {
+    if (rows.isConnected) return;
+    watch.disconnect();
+    cleanWorkingFor = null;
+    live.textContent = '';
+  });
+  watch.observe(host, { childList: true });
+  cleanWorkingFor = { rows, watch };
+  live.textContent = '';
+  requestAnimationFrame(() => { if (cleanWorkingFor && cleanWorkingFor.rows === rows) live.textContent = sentence; });
+}
+
 /**
  * The tree on screen changed, or whether a scan of it is coming (TOPIC.scan;
  * a scan starting, stopped or failing — beginScanChrome, stopScan, failScan,
@@ -39430,6 +39466,8 @@ <h2><span style="display:inline-flex;">${icon('diff', 13)}</span>${cmpWhenPair(r
   if (!scanId) { videoCandidates = []; host.innerHTML = cleanNoScanHtml('video'); return; }
   // Labelled, so assistive technology hears that the pane is working, not bare shimmer rows (review F3.9).
   host.innerHTML = skeletonRows(4, 34, 'Finding videos worth re-encoding…');
+  // And said aloud (cleanSayWorking). Guarded: a page reader may lift this function without it.
+  if (typeof cleanSayWorking === 'function') cleanSayWorking(host);
   let data;
   try { data = await api('/api/compression/candidates?scanId=' + scanId); }
   catch (e) {
@@ -39627,6 +39665,7 @@ <h2><span style="display:inline-flex;">${icon('diff', 13)}</span>${cmpWhenPair(r
   const scanId = treeScanId();
   if (!scanId) { emptyFolders = []; host.innerHTML = cleanNoScanHtml('empty'); updateCleanSummary(); return; }
   host.innerHTML = skeletonRows(4, 30, 'Finding empty folders…'); // labelled for assistive technology (review F3.9)
+  if (typeof cleanSayWorking === 'function') cleanSayWorking(host); // and said aloud (guarded, as above)
   try {
     const data = await api(`/api/empty-folders?scanId=${scanId}&ignoreJunk=${$('emptyIgnoreJunk').checked}`);
     if (seq !== loadEmptyFoldersSeq) return; // a newer load owns the list
@@ -40217,6 +40256,7 @@ <h2><span style="display:inline-flex;">${icon('diff', 13)}</span>${cmpWhenPair(r
   // Working from here, while its sections are asked before it: a notice that it waits for the scan stood
   // through their requests once the scan had finished (review F2.9) — in words assistive technology reads (F3.9).
   host.innerHTML = skeletonRows(4, 34, 'Working out what Clean Up suggests…');
+  if (typeof cleanSayWorking === 'function') cleanSayWorking(host); // and said aloud (guarded, as above)
   void renderGitRepos();
   const hadPackages = await renderPackageOrphans();
   const hadBrowsers = await renderBrowserProfiles();
@@ -40504,7 +40544,11 @@ <h2><span style="display:inline-flex;">${icon('diff', 13)}</span>${cmpWhenPair(r
   // A list with none of its own — blank, or saying it waits for the scan, which has finished — says it is
   // working (review F2.9). Results already listed stand until the new ones replace them, as before.
   const working = cleanFindNoList;
-  if (working) { cleanFindNoList = false; $('cleanResults').innerHTML = skeletonRows(4, 30, 'Finding files that match…'); } // labelled (review F3.9)
+  if (working) {
+    cleanFindNoList = false;
+    $('cleanResults').innerHTML = skeletonRows(4, 30, 'Finding files that match…'); // labelled (review F3.9)
+    if (typeof cleanSayWorking === 'function') cleanSayWorking($('cleanResults')); // and said aloud (guarded, as above)
+  }
   /** Matched again against the scan the tree now on screen came from, the list still holding none of its own. */
   const askAgain = () => { if (working) cleanFindNoList = true; cleanAskAgain(() => runCleanFind(fetcher)); };
   const findBtn = $('cleanFindBtn');

src/ui/app/220-clean-up-modal.js

@@ -104,6 +104,36 @@ function cleanAskAgain(load) {
   if (cleanOpen()) void load();
 }
 
+/* ── What a pane is working on, said aloud (review F3.9) ──
+   A pane's working rows (skeletonRows) carry their sentence as the aria-label
+   of a role="status" element that one innerHTML write puts on screen already
+   filled: a screen reader announces a live region's text as it changes, not
+   its label, and seldom a region that appears filled. So the sentence, read
+   from those rows, goes into the text of the sheet's own live region,
+   #cleanWorking, there from the start: a frame after the rows are written,
+   the region emptied first, so the same sentence said again is a change too.
+   Once the rows are gone — the pane answered, failed or says it waits — the
+   region is emptied, so it never says a pane is working after it stopped. A
+   newer pane's rows take the region over. */
+let cleanWorkingFor = null; // { rows, watch }: the working rows the region speaks for, and what sees them go
+function cleanSayWorking(host) {
+  const live = $('cleanWorking');
+  const rows = host.firstElementChild;
+  const sentence = rows && rows.getAttribute('aria-label');
+  if (!live || !sentence) return;
+  if (cleanWorkingFor) cleanWorkingFor.watch.disconnect();
+  const watch = new MutationObserver(() => {
+    if (rows.isConnected) return;
+    watch.disconnect();
+    cleanWorkingFor = null;
+    live.textContent = '';
+  });
+  watch.observe(host, { childList: true });
+  cleanWorkingFor = { rows, watch };
+  live.textContent = '';
+  requestAnimationFrame(() => { if (cleanWorkingFor && cleanWorkingFor.rows === rows) live.textContent = sentence; });
+}
+
 /**
  * The tree on screen changed, or whether a scan of it is coming (TOPIC.scan;
  * a scan starting, stopped or failing — beginScanChrome, stopScan, failScan,
@@ -194,6 +224,8 @@ async function loadVideoCandidates() {
   if (!scanId) { videoCandidates = []; host.innerHTML = cleanNoScanHtml('video'); return; }
   // Labelled, so assistive technology hears that the pane is working, not bare shimmer rows (review F3.9).
   host.innerHTML = skeletonRows(4, 34, 'Finding videos worth re-encoding…');
+  // And said aloud (cleanSayWorking). Guarded: a page reader may lift this function without it.
+  if (typeof cleanSayWorking === 'function') cleanSayWorking(host);
   let data;
   try { data = await api('/api/compression/candidates?scanId=' + scanId); }
   catch (e) {
@@ -391,6 +423,7 @@ async function loadEmptyFolders() {
   const scanId = treeScanId();
   if (!scanId) { emptyFolders = []; host.innerHTML = cleanNoScanHtml('empty'); updateCleanSummary(); return; }
   host.innerHTML = skeletonRows(4, 30, 'Finding empty folders…'); // labelled for assistive technology (review F3.9)
+  if (typeof cleanSayWorking === 'function') cleanSayWorking(host); // and said aloud (guarded, as above)
   try {
     const data = await api(`/api/empty-folders?scanId=${scanId}&ignoreJunk=${$('emptyIgnoreJunk').checked}`);
     if (seq !== loadEmptyFoldersSeq) return; // a newer load owns the list
@@ -981,6 +1014,7 @@ async function loadSmartSuggestions() {
   // Working from here, while its sections are asked before it: a notice that it waits for the scan stood
   // through their requests once the scan had finished (review F2.9) — in words assistive technology reads (F3.9).
   host.innerHTML = skeletonRows(4, 34, 'Working out what Clean Up suggests…');
+  if (typeof cleanSayWorking === 'function') cleanSayWorking(host); // and said aloud (guarded, as above)
   void renderGitRepos();
   const hadPackages = await renderPackageOrphans();
   const hadBrowsers = await renderBrowserProfiles();
@@ -1268,7 +1302,11 @@ async function runCleanFind(fetcher) {
   // A list with none of its own — blank, or saying it waits for the scan, which has finished — says it is
   // working (review F2.9). Results already listed stand until the new ones replace them, as before.
   const working = cleanFindNoList;
-  if (working) { cleanFindNoList = false; $('cleanResults').innerHTML = skeletonRows(4, 30, 'Finding files that match…'); } // labelled (review F3.9)
+  if (working) {
+    cleanFindNoList = false;
+    $('cleanResults').innerHTML = skeletonRows(4, 30, 'Finding files that match…'); // labelled (review F3.9)
+    if (typeof cleanSayWorking === 'function') cleanSayWorking($('cleanResults')); // and said aloud (guarded, as above)
+  }
   /** Matched again against the scan the tree now on screen came from, the list still holding none of its own. */
   const askAgain = () => { if (working) cleanFindNoList = true; cleanAskAgain(() => runCleanFind(fetcher)); };
   const findBtn = $('cleanFindBtn');

src/ui/markup/090-modal-cleanup.html

@@ -16,6 +16,12 @@ <h3 id="cleanTitle"><span data-icon="sparkles"></span>Clean Up</h3>
       <!-- Where what Clean Up removes goes: the system Trash, or a cloud account's own trash.
            Written by the Clean Up button for the scan the sheet opens on (cleanUpWhereItGoes). -->
       <div class="muted" id="cleanWhereNote" style="margin-bottom:6px;"></div>
+      <!-- What a pane is working on, said aloud (review F3.9): a pane's working
+           rows carry their sentence as a label, which a screen reader does not
+           announce. This region is in the sheet from the start; cleanSayWorking
+           puts the sentence in its text once the rows are on screen, and takes
+           it out once they are gone. -->
+      <div id="cleanWorking" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>
       <div id="cleanPaneRules" class="pane-fade">
         <!-- v4 §4.5 — the ladder: a saved view is a Clean Up rule, and a Clean
              Up rule is an Autopilot policy. One matching engine throughout. -->