@remit/ui 0.0.60 → 0.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "type": "module",
   "files": [
     "src"

package/src/components/blocked-reason.render.test.ts

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { BlockedReason } from "./blocked-reason.js";
+
+const REASON = "Pick a destination first.";
+
+/**
+ * Nothing disables (#477 1.7), so a dimmed control has to say what it is missing
+ * two ways: a description that is there for as long as the block is, and an
+ * announcement that happens when the control is pressed.
+ *
+ * They are separate elements because a live region announces what is written
+ * into it. One element that already holds the reason and gains `role="status"`
+ * on the press has nothing written into it, so nothing is announced — which is
+ * how a wizard comes to have a visual-only answer to "why can't I continue".
+ */
+describe("BlockedReason", () => {
+	it("describes the control before anything is pressed, silently", () => {
+		const html = renderToString(
+			createElement(BlockedReason, { id: "reason", reason: REASON }),
+		);
+		assert.match(html, /<p id="reason"[^>]*sr-only/);
+		assert.match(html, new RegExp(REASON));
+		// The live region is mounted and empty: there is nothing to announce yet.
+		assert.match(html, /role="status"[^>]*><\/span>/);
+	});
+
+	it("shows and announces the same reason once it has been pressed", () => {
+		const html = renderToString(
+			createElement(BlockedReason, {
+				id: "reason",
+				reason: REASON,
+				nudged: true,
+				className: "text-warning",
+			}),
+		);
+		assert.doesNotMatch(html, /role="status"[^>]*><\/span>/);
+		assert.match(html, new RegExp(`role="status"[^>]*>${REASON}`));
+		assert.doesNotMatch(html, /<p id="reason"[^>]*sr-only/);
+		assert.match(html, /text-warning/);
+	});
+});

package/src/components/blocked-reason.tsx

@@ -0,0 +1,41 @@
+import { cn } from "../lib/cn.js";
+
+export interface BlockedReasonProps {
+	/** What `aria-describedby` on the dimmed control points at. */
+	id: string;
+	reason: string;
+	/** The control was pressed while blocked, so the reason comes on screen. */
+	nudged?: boolean;
+	className?: string;
+}
+
+/**
+ * What a dimmed control is still missing (#477 1.7). Nothing disables, so the
+ * reason has to reach the user two ways, and they are not the same element.
+ *
+ * The description carries the reason for as long as it applies, so anything
+ * reading the control through the accessibility tree finds it without pressing
+ * anything; the press is what unhides it.
+ *
+ * The announcement is a live region that is mounted with the block and empty
+ * until the press, because a live region announces what is written into it and
+ * not what it was already holding. Marking the description live at the moment
+ * it becomes visible announces nothing.
+ */
+export function BlockedReason({
+	id,
+	reason,
+	nudged,
+	className,
+}: BlockedReasonProps) {
+	return (
+		<>
+			<p id={id} className={cn(className, !nudged && "sr-only")}>
+				{reason}
+			</p>
+			<span role="status" aria-live="polite" className="sr-only">
+				{nudged ? reason : ""}
+			</span>
+		</>
+	);
+}

package/src/components/filter-rule.ts

@@ -261,6 +261,16 @@ export const ruleBlockedCopy = {
 	recounting: "Recounting matches — save once the count settles.",
 } as const;
 
+/**
+ * What the count region says when there is no count to be had. The vector-free
+ * matcher will not read message bodies, so a `HasWords` clause cannot be counted
+ * before it is saved — which is a different answer from a count of zero, and
+ * the only one that keeps an empty sample from reading as "this matches
+ * nothing".
+ */
+export const UNCOUNTABLE_PREDICATE_REASON =
+	"Can't count matches — “has the words” reads message bodies, which only a saved rule does.";
+
 /**
  * Why the count on screen is not yet the count that will be applied, or
  * `undefined` once it has settled. This is what makes RFC 038's

package/src/components/mobile-search-view.stories.tsx

@@ -186,7 +186,7 @@ function Harness({
 	sections,
 	preset,
 	scope,
-	makeFilterDisabledReason,
+	makeFilterBlockedReason,
 	suggestions = [],
 }: {
 	initialValue?: string;
@@ -196,7 +196,7 @@ function Harness({
 	preset: Preset;
 	scope?: SearchScope;
 	/** Renders the conversion inert with a reason; it is offered either way. */
-	makeFilterDisabledReason?: string;
+	makeFilterBlockedReason?: string;
 	/** Completions for the term being typed. */
 	suggestions?: Suggestion[];
 }) {
@@ -282,7 +282,7 @@ function Harness({
 			scope={scope}
 			makeFilter={{
 				onClick: () => undefined,
-				disabledReason: makeFilterDisabledReason,
+				blockedReason: makeFilterBlockedReason,
 			}}
 			suggest={{
 				comboboxProps: suggest.comboboxProps,
@@ -343,9 +343,9 @@ export const ScopedSearch: Story = {
 };
 
 /**
- * A query with nothing a filter could match on: the conversion is offered inert
- * with the reason, rather than withheld and leaving the row to appear and vanish
- * as the user types.
+ * A query with nothing a filter could match on: the conversion stays offered and
+ * dimmed, rather than withheld and leaving the row to appear and vanish as the
+ * user types. Pressing it puts the reason on screen.
  */
 export const NothingToConvert: Story = {
 	render: () => (
@@ -353,7 +353,7 @@ export const NothingToConvert: Story = {
 			initialValue="has:attachment"
 			sections={resultSections}
 			preset="inbox"
-			makeFilterDisabledReason="Add a sender or words to filter on"
+			makeFilterBlockedReason="Add a sender or words to filter on"
 		/>
 	),
 };

package/src/components/search-results.render.test.ts

@@ -99,16 +99,17 @@ describe("SearchResults", () => {
 		assert.doesNotMatch(html, /disabled=""/);
 	});
 
-	it("disables the filter offer with its reason when nothing converts", () => {
+	it("keeps the filter offer pressable when nothing converts, carrying its reason", () => {
 		const html = renderToString(
 			createElement(SearchResults, {
 				value: "has:attachment",
 				sections: [{ id: "results", label: "Results", results: [] }],
-				makeFilter: { onClick: noop, disabledReason: "Add a sender or words" },
+				makeFilter: { onClick: noop, blockedReason: "Add a sender or words" },
 			}),
 		);
 		assert.match(html, /Make this a filter/);
-		assert.match(html, /disabled/);
+		assert.doesNotMatch(html, /disabled/);
+		assert.match(html, /aria-describedby/);
 		assert.match(html, /Add a sender or words/);
 	});
 

package/src/components/search-results.stories.tsx

@@ -190,15 +190,18 @@ export const WithMakeFilter: Story = {
 	),
 };
 
-/** The filter offer disabled — a search of only non-clause facets has nothing to convert. */
-export const MakeFilterDisabled: Story = {
+/**
+ * The filter offer dimmed — a search of only non-clause facets has nothing to
+ * convert. It stays pressable, and pressing it puts the reason on screen.
+ */
+export const MakeFilterBlocked: Story = {
 	render: () => (
 		<Harness
 			value="has:attachment"
 			sections={resultSections}
 			makeFilter={{
 				onClick: () => {},
-				disabledReason: "Add a sender or words to filter on",
+				blockedReason: "Add a sender or words to filter on",
 			}}
 		/>
 	),

package/src/components/search-results.tsx

@@ -1,6 +1,7 @@
 import { ChevronDown, Clock, Filter } from "lucide-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { BlockedReason } from "./blocked-reason.js";
 import type { FolderRole } from "./folder-role.js";
 import { type SearchResult, SearchResultRow } from "./search-result-row.js";
 import { SearchTokenChips } from "./search-token-chip.js";
@@ -86,21 +87,22 @@ export interface SearchResultsProps {
 	scope?: SearchScope;
 	/**
 	 * "Make this a filter" (RFC 038 D5) — offered above the results while a query
-	 * is active, converting the search to a pre-filled rule. Omit to drop the
-	 * affordance; a `disabledReason` renders it inert with the reason (a search of
-	 * only non-clause facets has nothing to convert).
+	 * is active, opening the selection wizard on clauses derived from it. Omit to
+	 * drop the affordance; a `blockedReason` dims it and states what is missing (a
+	 * search of only non-clause facets has nothing to convert).
 	 */
 	makeFilter?: MakeFilterActionProps;
 }
 
 export interface MakeFilterActionProps {
 	onClick: () => void;
-	/** Renders the action inert and states why, e.g. nothing in the query converts. */
-	disabledReason?: string;
+	/** What the query is still missing. Dims the action; never disables it. */
+	blockedReason?: string;
 }
 
 /**
- * "Make this a filter" — the conversion entry offered while a search is active.
+ * "Make this a filter" — the wizard's second entry, offered while a search is
+ * active.
  *
  * A standalone row rather than a part of the results body, because a search is
  * shown in more than one way: the read-only `SearchResults` panel, and a list
@@ -108,34 +110,47 @@ export interface MakeFilterActionProps {
  * not to either rendering, so the caller mounts it above whichever body is up and
  * it stays put when the body swaps. `SearchResults` renders it inline as a
  * convenience for callers that show only the panel.
+ *
+ * Nothing disables (#477 1.7). A query with nothing to convert dims the action
+ * and leaves it pressable — pressing it is what brings the reason on screen,
+ * which `disabled` would take away along with the control itself.
  */
 export function MakeFilterAction({
 	onClick,
-	disabledReason,
+	blockedReason,
 }: MakeFilterActionProps) {
-	const disabled = disabledReason !== undefined;
+	const reasonId = useId();
+	const [nudged, setNudged] = useState(false);
 	return (
 		<div className="border-b border-line px-row-inset py-1.5">
 			<button
 				type="button"
-				onClick={onClick}
-				disabled={disabled}
-				title={disabledReason}
+				onClick={() => {
+					if (blockedReason) {
+						setNudged(true);
+						return;
+					}
+					onClick();
+				}}
+				aria-describedby={blockedReason ? reasonId : undefined}
 				className={cn(
 					"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs font-medium transition-colors",
-					disabled
-						? "cursor-not-allowed text-fg-subtle"
+					blockedReason
+						? "text-fg-subtle opacity-55"
 						: "text-accent hover:bg-surface-sunken",
 				)}
 			>
 				<Filter className="size-3.5 shrink-0" aria-hidden="true" />
 				<span>Make this a filter</span>
-				{disabled && (
-					<span className="ml-auto truncate text-2xs font-normal text-fg-subtle">
-						{disabledReason}
-					</span>
-				)}
 			</button>
+			{blockedReason && (
+				<BlockedReason
+					id={reasonId}
+					reason={blockedReason}
+					nudged={nudged}
+					className="px-2 pt-1 text-2xs text-warning"
+				/>
+			)}
 		</div>
 	);
 }
@@ -286,12 +301,7 @@ export function SearchResults({
 	const chips = tokens && tokens.length > 0 && (
 		<SearchTokenChips tokens={tokens} />
 	);
-	const filterAction = makeFilter && (
-		<MakeFilterAction
-			onClick={makeFilter.onClick}
-			disabledReason={makeFilter.disabledReason}
-		/>
-	);
+	const filterAction = makeFilter && <MakeFilterAction {...makeFilter} />;
 
 	if (loading) {
 		return (

package/src/components/selection-top-bar.render.test.ts

@@ -109,16 +109,18 @@ describe("SelectionTopBar", () => {
 		);
 	});
 
-	it("offers Something else as an overflow verb, never a glyph", () => {
+	it("keeps Junk and Mark read in the overflow menu, never as glyphs", () => {
 		const html = renderToString(
 			createElement(SelectionTopBar, {
 				...handlers,
 				count: 2,
-				onSomethingElse: () => undefined,
+				onJunk: () => undefined,
+				onMarkRead: () => undefined,
 			}),
 		);
 		assert.match(html, /aria-label="More actions"/);
-		assert.doesNotMatch(row(html, "actions"), /aria-label="Something else"/);
+		assert.doesNotMatch(row(html, "actions"), /aria-label="Junk"/);
+		assert.doesNotMatch(row(html, "actions"), /aria-label="Mark read"/);
 	});
 
 	it("replaces the title with the count from the first ticked row", () => {
@@ -150,11 +152,7 @@ describe("SelectionTopBar", () => {
 				count: 3,
 				selectAll,
 				onOrganize: () => undefined,
-				moveSlot: createElement(
-					"button",
-					{ type: "button", "aria-label": "Move selected messages" },
-					"Move",
-				),
+				onMove: () => undefined,
 			}),
 		);
 

package/src/components/selection-top-bar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { FolderInput, Menu, Search, Tag } from "lucide-react";
+import { Menu, Search, Tag } from "lucide-react";
 import { Button } from "./button.js";
 import { PopoverMenu } from "./popover-menu.js";
 import { SearchBar } from "./search-bar.js";
@@ -14,8 +14,8 @@ const meta: Meta<typeof SelectionTopBar> = {
 		onCancel: () => undefined,
 		onMarkRead: () => undefined,
 		onJunk: () => undefined,
+		onMove: () => undefined,
 		onOrganize: () => undefined,
-		onSomethingElse: () => undefined,
 		onDelete: () => undefined,
 	},
 	// Full viewport width — a fixed w-[390px] wrapper inside a 390px Storybook
@@ -30,18 +30,6 @@ export default meta;
 
 type Story = StoryObj<typeof SelectionTopBar>;
 
-/** Stand-in for the caller's move-to-folder trigger, which owns its own
- *  folder-picker data. The bar only reserves the slot. */
-const MoveSlot = () => (
-	<button
-		type="button"
-		aria-label="Move selected messages"
-		className="inline-flex size-11 shrink-0 items-center justify-center rounded text-fg-muted hover:bg-surface-raised"
-	>
-		<FolderInput className="size-5" />
-	</button>
-);
-
 /** Stand-in for the caller's apply-label picker, whose list belongs to the
  *  account. A worded row, so it reads as one of the menu's actions. */
 const LabelSlot = () => (
@@ -147,16 +135,17 @@ export const IdleSearching: Story = {
 /**
  * One ticked row. The count takes the title's place and the header's own
  * chrome stands down; the verbs arrive with it: Delete, Move and Organize
- * carry a glyph, Junk, Mark read and Something else live under the kebab.
- * Below 768px select-all takes a second row, so row one stays a count and a
+ * carry a glyph, Junk and Mark read live under the kebab. Every one of them
+ * opens the wizard. Below 768px select-all takes a second row, so row one
+ * stays a count and a
  * row of verbs with a back arrow out of selection.
  */
 export const One: Story = {
-	args: { ...chrome, count: 1, selectAll, moveSlot: <MoveSlot /> },
+	args: { ...chrome, count: 1, selectAll },
 };
 
 export const Many: Story = {
-	args: { count: 3, selectAll, moveSlot: <MoveSlot /> },
+	args: { count: 3, selectAll },
 };
 
 /**
@@ -167,7 +156,6 @@ export const WithLabelPicker: Story = {
 	args: {
 		count: 3,
 		selectAll,
-		moveSlot: <MoveSlot />,
 		overflowSlot: <LabelSlot />,
 	},
 };
@@ -175,13 +163,13 @@ export const WithLabelPicker: Story = {
 /** A selection spanning folders or accounts has no move target and no
  *  account to file a rule under: the bar carries Delete and the overflow. */
 export const WithoutMoveOrOrganize: Story = {
-	args: { count: 2, onOrganize: undefined, selectAll },
+	args: { count: 2, onMove: undefined, onOrganize: undefined, selectAll },
 };
 
 /** A mutation in flight: Delete carries the spinner and every other verb
  *  stands down, because nothing else can act until it lands. */
 export const Busy: Story = {
-	args: { count: 2, isBusy: true, moveSlot: <MoveSlot />, selectAll },
+	args: { count: 2, isBusy: true, selectAll },
 };
 
 export const CrossAccountHint: Story = {
@@ -204,7 +192,6 @@ export const CrossAccountHint: Story = {
 export const AllSelected: Story = {
 	args: {
 		count: 47,
-		moveSlot: <MoveSlot />,
 		selectAll: {
 			checked: true,
 			indeterminate: false,
@@ -260,7 +247,6 @@ export const Escalated: Story = {
 	args: {
 		count: 3412,
 		statusLabel: 'All 3,412 matching "npm" selected',
-		moveSlot: <MoveSlot />,
 		notice: {
 			tone: "info",
 			text: "",
@@ -367,7 +353,6 @@ export const MarkingReadWithProgress: Story = {
 export const PartialFailureMove: Story = {
 	args: {
 		count: 340,
-		moveSlot: <MoveSlot />,
 		notice: {
 			tone: "danger",
 			text: "3,072 moved. 340 couldn't be moved.",

package/src/components/selection-top-bar.tsx

@@ -1,11 +1,11 @@
 import {
 	ArrowLeft,
+	FolderInput,
 	Loader2,
 	MailOpen,
 	ShieldAlert,
 	Sparkles,
 	Trash2,
-	Wand2,
 } from "lucide-react";
 import type { ReactNode } from "react";
 import { Banner, type BannerTone } from "./banner.js";
@@ -40,6 +40,17 @@ export interface SelectionTopBarProps {
 	/** Leaves selection, from the back arrow at the head of the bar. */
 	onCancel: () => void;
 	onDelete: () => void;
+	/**
+	 * Opens the wizard on Move. Omitted where a destination cannot be resolved —
+	 * a selection spanning accounts, or a surface with no owning mailbox.
+	 */
+	onMove?: () => void;
+	/**
+	 * The Move verb for a selection the wizard cannot take: an escalated
+	 * predicate, which no bounded list of ids stands in for, so it keeps the
+	 * caller's own folder picker. Rendered only in `onMove`'s place.
+	 */
+	moveSlot?: ReactNode;
 	/** Opens Organize for the selection. Omitted where organize cannot be
 	 *  scoped to one account. */
 	onOrganize?: () => void;
@@ -48,12 +59,6 @@ export interface SelectionTopBarProps {
 	onJunk?: () => void;
 	/** Optional — dropped from the overflow menu while `isBusy`. */
 	onMarkRead?: () => void;
-	/**
-	 * Opens the free-text organize panel. An overflow verb rather than a glyph:
-	 * it collapses a verb, a destination and a scope into one tap, which is the
-	 * opposite of what the bar's own verbs do.
-	 */
-	onSomethingElse?: () => void;
 	/**
 	 * The list header's own chrome, rendered only while nothing is ticked: the
 	 * nav button, the unread count beside the title, and the search affordance.
@@ -74,11 +79,6 @@ export interface SelectionTopBarProps {
 	 * bar over, so the second way into the same wizard stands down.
 	 */
 	idleSlot?: ReactNode;
-	/**
-	 * The Move verb. A render prop because the trigger owns the folder picker
-	 * and its API dependencies; the bar only gives it a place in the verb row.
-	 */
-	moveSlot?: ReactNode;
 	/**
 	 * Extra rows at the foot of the overflow menu — the apply-label picker,
 	 * whose list belongs to the account rather than to the bar. Withdrawn while
@@ -171,16 +171,16 @@ export function SelectionTopBar({
 	count,
 	onCancel,
 	onDelete,
+	onMove,
+	moveSlot,
 	onOrganize,
 	onJunk,
 	onMarkRead,
-	onSomethingElse,
 	navSlot,
 	titleMeta,
 	searchSlot,
 	searchField,
 	idleSlot,
-	moveSlot,
 	overflowSlot,
 	isBusy = false,
 	isCounting = false,
@@ -211,15 +211,6 @@ export function SelectionTopBar({
 			onSelect: onMarkRead,
 		});
 	}
-	if (onSomethingElse && !isBusy && !isCounting) {
-		overflowItems.push({
-			key: "something-else",
-			label: "Something else",
-			icon: <Wand2 className="size-4" />,
-			onSelect: onSomethingElse,
-		});
-	}
-
 	return (
 		<header
 			data-selection-bar=""
@@ -287,7 +278,19 @@ export function SelectionTopBar({
 							aria-busy={isBusy || undefined}
 							className="shrink-0"
 						/>
-						{!isBusy && moveSlot}
+						{!isBusy &&
+							(onMove ? (
+								<Button
+									variant="ghost"
+									size="touch"
+									icon={<FolderInput className="size-5" />}
+									onClick={onMove}
+									aria-label="Move selected messages"
+									className="shrink-0"
+								/>
+							) : (
+								moveSlot
+							))}
 						{!isBusy && onOrganize && (
 							<Button
 								variant="ghost"

package/src/components/selection-wizard.render.test.ts

@@ -4,7 +4,10 @@ import { createElement } from "react";
 import { renderToString } from "react-dom/server";
 import type { MatchCount, StepId, WizardDraft } from "../lib/wizard-steps.js";
 import { stepsFor } from "../lib/wizard-steps.js";
-import type { RuleClause } from "./filter-rule.js";
+import {
+	type RuleClause,
+	UNCOUNTABLE_PREDICATE_REASON,
+} from "./filter-rule.js";
 import {
 	FolderStepBody,
 	MatchStepBody,
@@ -172,6 +175,23 @@ describe("SelectionSample", () => {
 		assert.match(html, /Nothing matches this yet/);
 	});
 
+	// A count that could not be taken is not a count of zero. A body-text clause
+	// is the case that makes the difference load-bearing: it matches, once a
+	// saved rule is what runs it, so "nothing matches this yet" is wrong rather
+	// than merely unexplained (#477 3.5).
+	it("says a count could not be taken instead of that nothing matched", () => {
+		const html = renderToString(
+			createElement(SelectionSample, {
+				messages: [],
+				count: { status: "error", reason: UNCOUNTABLE_PREDICATE_REASON },
+				label: "What this matches",
+				emptyReason: "noMatch",
+			}),
+		);
+		assert.match(text(html), /only a saved rule does/);
+		assert.doesNotMatch(html, /Nothing matches this yet/);
+	});
+
 	it("says the total is unknown when the match has not run", () => {
 		const html = renderToString(
 			createElement(SelectionSample, {
@@ -581,7 +601,7 @@ describe("SelectionWizard", () => {
 				wizardProps({ verb: "organize", steps, step: "properties" }),
 			),
 		);
-		assert.match(text(html), /Step 1 of 4 · Apply to/);
+		assert.match(text(html), /Step 1 of 5 · Apply to/);
 		assert.match(html, /What should this apply to\?/);
 		assert.match(html, /These 2 messages/);
 		assert.doesNotMatch(html, /Match properties/);
@@ -657,23 +677,43 @@ describe("SelectionWizard", () => {
 				}),
 			),
 		);
-		assert.match(html, /Add a property to match on\./);
-		assert.match(html, /aria-disabled="true"/);
+		assert.match(text(html), /Add a property to match on\./);
+		assert.match(html, /opacity-55/);
+		// Nothing disables (#477 1.7), and `aria-disabled` disables it for
+		// everyone driving the page by anything other than a mouse.
+		assert.doesNotMatch(html, /aria-disabled/);
 		assert.doesNotMatch(html, /<button[^>]*disabled=""/);
 	});
 
-	it("holds the blocked reason back until Continue is pressed", () => {
-		const html = renderToString(
+	it("carries the blocked reason on the control before it is pressed, and announces it after", () => {
+		const reason = "Add a property to match on.";
+		const quiet = renderToString(
+			createElement(
+				SelectionWizard,
+				wizardProps({ step: "properties", blockedReason: reason }),
+			),
+		);
+		// Described, so it is heard on the control; not on screen and nothing
+		// announced until the control is pressed.
+		assert.match(quiet, /aria-describedby="/);
+		assert.match(quiet, /<p id="[^"]*"[^>]*sr-only/);
+		assert.match(quiet, /role="status"[^>]*><\/span>/);
+
+		const nudged = renderToString(
 			createElement(
 				SelectionWizard,
 				wizardProps({
 					step: "properties",
-					blockedReason: "Add a property to match on.",
+					blockedReason: reason,
+					nudged: true,
 				}),
 			),
 		);
-		assert.doesNotMatch(html, /Add a property to match on\./);
-		assert.match(html, /aria-disabled="true"/);
+		// The reason is written into the live region, which is what a screen
+		// reader announces — marking the description live would announce nothing.
+		assert.doesNotMatch(nudged, /role="status"[^>]*><\/span>/);
+		assert.match(nudged, new RegExp(`role="status"[^>]*>${reason}`));
+		assert.doesNotMatch(nudged, /<p id="[^"]*"[^>]*sr-only/);
 	});
 
 	it("commits under the scope's own label, in the verb's own tone", () => {