@gjsify/adwaita-web 0.54.0 → 0.56.0

package/src/adw-multi-layout-view.spec.ts

@@ -0,0 +1,243 @@
+// DOM-level tests for `<adw-multi-layout-view>` and the `<adw-layout-slot>` holes its
+// layouts are built from.
+//
+// The behaviour under test is the pairing the C describes in one paragraph: every child
+// has an ID, every layout has slots with IDs, and switching layouts re-inserts each
+// child into the slot of the SAME id — plus the three rules around it that are easy to
+// miss. `adw_multi_layout_view_add_layout` makes the FIRST layout current rather than
+// waiting for a `layout-name` (:553); a `layout-name` no layout carries is a
+// `g_critical` that leaves the current layout alone (:520); and `visible` is bound ONE
+// way, child to slot, so hiding the child hides the hole (:151).
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwLayoutSlot } from './elements/adw-layout-slot.js';
+import type { AdwMultiLayoutView } from './elements/adw-multi-layout-view.js';
+
+/** Two frame callbacks — where a `ResizeObserver` delivery and a MutationObserver land. */
+function settle(): Promise<void> {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+    });
+}
+
+/**
+ * Two layouts over the same two children, as the C's own documentation spells it: a
+ * secondary pane that is a sidebar in one and the content in the other.
+ */
+function markup(): string {
+    return (
+        '<adw-multi-layout-view layout-name="sidebar">' +
+        '<adw-navigation-split-view name="sidebar">' +
+        '<adw-layout-slot id="secondary" slot="sidebar"></adw-layout-slot>' +
+        '<adw-layout-slot id="primary" slot="content"></adw-layout-slot>' +
+        '</adw-navigation-split-view>' +
+        '<adw-navigation-split-view name="stacked" collapsed>' +
+        '<adw-layout-slot id="secondary" slot="content"></adw-layout-slot>' +
+        '<adw-layout-slot id="primary" slot="content"></adw-layout-slot>' +
+        '</adw-navigation-split-view>' +
+        '<adw-navigation-page slot="primary" tag="inbox" title="Inbox"></adw-navigation-page>' +
+        '<adw-navigation-page slot="secondary" tag="about" title="About"></adw-navigation-page>' +
+        '</adw-multi-layout-view>'
+    );
+}
+
+function mount(body: string): { view: AdwMultiLayoutView; host: HTMLElement } {
+    const host = document.createElement('div');
+    host.style.width = '800px';
+    host.style.height = '600px';
+    document.body.appendChild(host);
+    host.innerHTML = body;
+    return { view: host.querySelector('adw-multi-layout-view') as AdwMultiLayoutView, host };
+}
+
+/** Where each id's child landed in the mounted layout, `id -> slot id`. */
+function placement(view: AdwMultiLayoutView): string[] {
+    const found: string[] = [];
+    for (const slot of view.querySelectorAll('adw-layout-slot')) {
+        for (const child of slot.children) {
+            found.push(`${slot.id}←${child.getAttribute('slot')}`);
+        }
+    }
+    return found.sort();
+}
+
+export const AdwMultiLayoutViewTest = async () => {
+    await describe('<adw-multi-layout-view> switching layouts', async () => {
+        await it('starts on the layout `layout-name` names', () => {
+            const { view, host } = mount(markup());
+            const report = `layout:${view.layoutName} parent:${view.layout?.getAttribute('name')}`;
+            host.remove();
+            expect(report).toBe('layout:sidebar parent:sidebar');
+        });
+
+        await it('moves each child into the slot of the SAME id', () => {
+            const { view, host } = mount(markup());
+            const before = placement(view).join(' ');
+            view.layoutName = 'stacked';
+            const after = placement(view).join(' ');
+            host.remove();
+            expect(`sidebar:${before} → stacked:${after}`).toBe(
+                'sidebar:primary←primary secondary←secondary → stacked:primary←primary secondary←secondary',
+            );
+        });
+
+        await it('notifies BOTH properties on a switch, as `set_layout` does', () => {
+            const { view, host } = mount(markup());
+            const log: string[] = [];
+            view.addEventListener('notify::layout', () => log.push(`layout:${view.layoutName}`));
+            view.addEventListener('notify::layout-name', () => log.push(`name:${view.layoutName}`));
+            view.layoutName = 'stacked';
+            view.layoutName = 'stacked';
+            host.remove();
+            // Once for the change and NOT for the repeat: `set_layout` returns early when
+            // the layout is unchanged (adw-multi-layout-view.c:255).
+            expect(log.join(' | ')).toBe('layout:stacked | name:stacked');
+        });
+
+        await it('leaves the current layout alone for a name no layout carries', () => {
+            const { view, host } = mount(markup());
+            view.layoutName = 'nowhere';
+            const report = `layout:${view.layoutName} mounted:${view.layout?.getAttribute('name')}`;
+            host.remove();
+            expect(report).toBe('layout:sidebar mounted:sidebar');
+        });
+
+        await it('is driven by a breakpoint through the bin, and keeps the layout when it unwinds', async () => {
+            const host = document.createElement('div');
+            host.style.width = '900px';
+            host.style.height = '600px';
+            document.body.appendChild(host);
+            host.innerHTML =
+                '<adw-breakpoint-bin breakpoints=\'[{"condition":"max-width: 720px","setters":' +
+                '[{"target":"#view","property":"layout-name","value":"stacked"}]}]\'>' +
+                '<adw-multi-layout-view id="view">' +
+                '<adw-navigation-split-view name="sidebar">' +
+                '<adw-layout-slot id="primary" slot="content"></adw-layout-slot>' +
+                '</adw-navigation-split-view>' +
+                '<adw-navigation-split-view name="stacked" collapsed>' +
+                '<adw-layout-slot id="primary" slot="content"></adw-layout-slot>' +
+                '</adw-navigation-split-view>' +
+                '<adw-navigation-page slot="primary" title="Inbox"></adw-navigation-page>' +
+                '</adw-multi-layout-view>' +
+                '</adw-breakpoint-bin>';
+            const view = host.querySelector('adw-multi-layout-view') as AdwMultiLayoutView;
+            await settle();
+            const wide = view.layoutName;
+            host.style.width = '500px';
+            await settle();
+            const narrow = view.layoutName;
+            host.style.width = '900px';
+            await settle();
+            const wideAgain = view.layoutName;
+            host.remove();
+            // The restore writes `layout-name` back to what it was — which was NOTHING,
+            // because the markup declared no name — and `set_layout_name(NULL)` RETURNS
+            // without switching (adw-multi-layout-view.c:514). So the view stays on the
+            // layout the breakpoint put it on, exactly as it does on GTK. Restoring the
+            // ORIGINAL is right and it is not the same as reverting the switch.
+            expect(`900:${wide} → 500:${narrow} → 900:${wideAgain}`).toBe('900:sidebar → 500:stacked → 900:stacked');
+        });
+    });
+
+    await describe('<adw-multi-layout-view> children and slots', async () => {
+        await it('binds the slot’s visibility to the child’s, one way', async () => {
+            const { view, host } = mount(markup());
+            const child = view.getChild('primary');
+            const slot = view.querySelector('adw-layout-slot#primary') as HTMLElement;
+            const before = slot.hidden;
+            child?.setAttribute('hidden', '');
+            // The binding is a MutationObserver, so it lands a microtask later.
+            await settle();
+            const hiddenChild = slot.hidden;
+            (child as HTMLElement).hidden = false;
+            await settle();
+            const shownAgain = slot.hidden;
+            host.remove();
+            expect(`start:${before} child hidden:${hiddenChild} child shown:${shownAgain}`).toBe(
+                'start:false child hidden:true child shown:false',
+            );
+        });
+
+        await it('reports a child by id and a layout by name', () => {
+            const { view, host } = mount(markup());
+            const report = [
+                `child:${view.getChild('secondary')?.getAttribute('tag')}`,
+                `missing:${view.getChild('nowhere') === null}`,
+                `layout:${view.getLayoutByName('stacked')?.getAttribute('name')}`,
+                `layoutless:${view.getLayoutByName('nowhere') === null}`,
+            ].join(' | ');
+            host.remove();
+            expect(report).toBe('child:about | missing:true | layout:stacked | layoutless:true');
+        });
+
+        await it('picks a child appended after connect', async () => {
+            const { view, host } = mount(
+                '<adw-multi-layout-view layout-name="sidebar">' +
+                    '<adw-navigation-split-view name="sidebar">' +
+                    '<adw-layout-slot id="late" slot="content"></adw-layout-slot>' +
+                    '</adw-navigation-split-view>' +
+                    '</adw-multi-layout-view>',
+            );
+            const child = document.createElement('adw-navigation-page');
+            child.setAttribute('slot', 'late');
+            view.appendChild(child);
+            await settle();
+            const slot = view.querySelector('adw-layout-slot#late') as HTMLElement;
+            const landed = slot.contains(child);
+            host.remove();
+            expect(`late child landed:${landed}`).toBe('late child landed:true');
+        });
+
+        await it('keeps the child in place when the layout has no slot for its id', () => {
+            const { view, host } = mount(
+                '<adw-multi-layout-view layout-name="sidebar">' +
+                    '<adw-navigation-split-view name="sidebar">' +
+                    '<adw-layout-slot id="primary" slot="content"></adw-layout-slot>' +
+                    '</adw-navigation-split-view>' +
+                    '<adw-navigation-page slot="orphan" title="Nowhere"></adw-navigation-page>' +
+                    '</adw-multi-layout-view>',
+            );
+            // `parent_child` returns on an unmatched id (adw-multi-layout-view.c:143), and
+            // `unparent_child` returns on one the layout has no slot for (:175) — so the
+            // child is neither inserted nor destroyed upstream: it rides out with the
+            // content and is left. Here that is a detached node, still reachable through
+            // `getChild`, and C is silent about it, so this port is too.
+            const orphan = view.getChild('orphan');
+            const parent = orphan?.parentElement?.localName ?? 'none';
+            host.remove();
+            expect(`orphan parent:${parent} known:${view.getChild('orphan') !== null}`).toBe(
+                'orphan parent:none known:true',
+            );
+        });
+    });
+
+    await describe('<adw-layout-slot>', async () => {
+        await it('has the group role and takes no box of its own', () => {
+            const { view, host } = mount(markup());
+            const slot = view.querySelector('adw-layout-slot') as AdwLayoutSlot;
+            const report = `role:${slot.getAttribute('role')} display:${slot.style.display} id:${slot.slotId}`;
+            host.remove();
+            expect(report).toBe('role:group display:contents id:secondary');
+        });
+
+        await it('refuses to be built without an id, as `g_error` does', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            host.innerHTML = '<adw-multi-layout-view><adw-layout-slot></adw-layout-slot></adw-multi-layout-view>';
+            const view = host.querySelector('adw-multi-layout-view') as AdwMultiLayoutView;
+            const registered = (view as unknown as { _slots: Map<string, unknown> })._slots.size;
+            host.remove();
+            expect(`registered:${registered}`).toBe('registered:0');
+        });
+
+        await it('is not a layout slot outside a view, so nothing claims it', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            host.innerHTML = '<adw-layout-slot id="orphan"></adw-layout-slot>';
+            const slot = host.querySelector('adw-layout-slot') as AdwLayoutSlot;
+            const report = `id:${slot.slotId} parent:${slot.parentElement?.localName}`;
+            host.remove();
+            expect(report).toBe('id:orphan parent:div');
+        });
+    });
+};

package/src/adw-preferences-row.spec.ts

@@ -0,0 +1,164 @@
+// DOM-level tests for <adw-preferences-row>: the four properties that are ALL about
+// the title label (adw-preferences-row.c:118-170) — `title` as Pango markup,
+// `use-markup`, `use-underline`, `title-selectable` — plus the one port decision the
+// element's header records, that this base row presents the title rather than
+// presenting nothing as C does (adw-preferences-row.c:20).
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwPreferencesRow } from './elements/adw-preferences-row.js';
+
+function mount(
+    attributes: Record<string, string | true> = {},
+    children: Node[] = [],
+): {
+    el: AdwPreferencesRow;
+    host: HTMLElement;
+} {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('adw-preferences-row') as AdwPreferencesRow;
+    for (const [name, value] of Object.entries(attributes)) {
+        if (value === true) el.setAttribute(name, '');
+        else el.setAttribute(name, value);
+    }
+    host.appendChild(el);
+    for (const child of children) el.appendChild(child);
+    return { el, host };
+}
+
+/** The title label the element builds, which is what all four properties drive. */
+function titleEl(el: AdwPreferencesRow): HTMLElement {
+    return el.querySelector('.adw-row-title') as HTMLElement;
+}
+
+/** Where a `child` property lands, so a caller can put the preference's controls beside it. */
+function contentEl(el: AdwPreferencesRow): HTMLElement {
+    return el.querySelector('.adw-preferences-row-content') as HTMLElement;
+}
+
+export const AdwPreferencesRowTest = async () => {
+    await describe('<adw-preferences-row> the title', async () => {
+        await it('presents it, which is the one place this port departs from C', () => {
+            const { el, host } = mount({ title: 'Appearance' });
+            expect(titleEl(el).textContent).toBe('Appearance');
+            expect(titleEl(el).hidden).toBe(false);
+            host.remove();
+        });
+
+        await it("is a list item of the group's list, and says so", () => {
+            const { el, host } = mount({ title: 'Appearance' });
+            expect(el.getAttribute('role')).toBe('listitem');
+            host.remove();
+        });
+
+        await it('an absent title is C\'s NULL → "" — no line at all', () => {
+            const { el, host } = mount();
+            expect(el.title).toBe('');
+            expect(titleEl(el).hidden).toBe(true);
+            // `row_has_title` keeps such a row out of the preferences search, and the
+            // element keeps its title empty so that check agrees.
+            expect(el.title).toBe('');
+            host.remove();
+        });
+
+        await it('an emptied title drops the attribute rather than leaving "" behind', () => {
+            const { el, host } = mount({ title: 'Appearance' });
+            el.title = '';
+            expect(el.hasAttribute('title')).toBe(false);
+            expect(titleEl(el).hidden).toBe(true);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-preferences-row> use-markup and use-underline', async () => {
+        await it("reduces markup when use-markup is set — C's TRUE default, opt-in here", () => {
+            const marked = mount({ title: '<b>Dark</b> Style', 'use-markup': true });
+            expect(titleEl(marked.el).textContent).toBe('Dark Style');
+            // Text in the DOM either way: `use-markup` chooses what the title MEANS, and
+            // the string is never parsed as HTML.
+            expect(titleEl(marked.el).querySelector('b')).toBeNull();
+            marked.host.remove();
+
+            const plain = mount({ title: '<b>Dark</b> Style' });
+            expect(titleEl(plain.el).textContent).toBe('<b>Dark</b> Style');
+            plain.host.remove();
+        });
+
+        await it('takes the `_` out when use-underline is set', () => {
+            const { el, host } = mount({ title: '_Appearance', 'use-underline': true });
+            expect(titleEl(el).textContent).toBe('Appearance');
+            host.remove();
+        });
+
+        await it('reduces markup FIRST, so an underscore inside a tag survives', () => {
+            const { el, host } = mount({
+                title: '<span font_desc="Sans">_Style</span>',
+                'use-markup': true,
+                'use-underline': true,
+            });
+            expect(titleEl(el).textContent).toBe('Style');
+            host.remove();
+        });
+
+        await it('reports both flags as the attributes carry them', () => {
+            const { el, host } = mount({ 'use-markup': true });
+            expect(el.useMarkup).toBe(true);
+            expect(el.useUnderline).toBe(false);
+            expect(el.titleSelectable).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-preferences-row> title-selectable', async () => {
+        await it('makes the title copyable, which is `Gtk.Label:selectable` in the DOM', () => {
+            const { el, host } = mount({ title: 'Appearance', 'title-selectable': true });
+            expect(el.titleSelectable).toBe(true);
+            expect(titleEl(el).style.userSelect).toBe('text');
+            host.remove();
+        });
+
+        await it('leaves it unselectable by default', () => {
+            const { el, host } = mount({ title: 'Appearance' });
+            expect(titleEl(el).style.userSelect).toBe('');
+            host.remove();
+        });
+    });
+
+    await describe('<adw-preferences-row> the child property', async () => {
+        await it('routes a `slot="child"` control into the content box, after the title', async () => {
+            const switchRow = document.createElement('adw-switch-row');
+            switchRow.setAttribute('slot', 'child');
+            const { el, host } = mount({ title: 'Night Light' }, [switchRow]);
+            await new Promise<void>((resolve) => setTimeout(resolve, 0));
+            expect(el.child).toBe(switchRow);
+            expect(contentEl(el).contains(switchRow)).toBe(true);
+            // The title comes FIRST, the control after it — a row, not a column.
+            expect(el.firstElementChild).toBe(titleEl(el));
+            host.remove();
+        });
+
+        await it('accepts the child as a property too', () => {
+            const { el, host } = mount({ title: 'Night Light' });
+            const control = document.createElement('gtk-switch');
+            el.child = control;
+            expect(el.child).toBe(control);
+            expect(contentEl(el).children.length).toBe(1);
+            el.child = null;
+            expect(el.child).toBeNull();
+            host.remove();
+        });
+    });
+
+    await describe('<adw-preferences-row> notification', async () => {
+        await it('emits one notify:: per observed attribute', async () => {
+            const { el, host } = mount({ title: 'Appearance' });
+            const seen: string[] = [];
+            el.addEventListener('notify::title', (event) => seen.push((event as CustomEvent).detail.title));
+            el.title = 'Theme';
+            el.title = 'Theme 2';
+            expect(seen).toStrictEqual(['Theme', 'Theme 2']);
+            expect(titleEl(el).textContent).toBe('Theme 2');
+            host.remove();
+        });
+    });
+};

package/src/adw-row-state.spec.ts

@@ -490,6 +490,82 @@ export const AdwRowStateTest = async () => {
         });
     });
 
+    // `row.spin spinbutton > button.image-button.up/.down`
+    // (refs/libadwaita/src/stylesheet/widgets/_lists.scss:250-262) extends `%button_basic`
+    // AND `%circular_button` (_buttons.scss:19-27, :312-320): a 30px CIRCLE, filled at rest,
+    // with `margin: 10px 2px`. It rendered here as a transparent 32px rounded square. Read
+    // from the SHIPPED sheet — `test.browser.mts` imports the package for its side effects,
+    // so it is in the document — against a native capture of `Adw.SpinRow` (libadwaita
+    // 1.9.3, light): each button allocated 34x50 with min = nat, painted as a 30px circle of
+    // flat rgb(235,235,235), the two circles 10px apart, at y=12..41 inside the 54px row.
+    await describe('adw-spin-row stepper buttons', async () => {
+        /** The two steppers, as the element builds them: `−`, the input, then `+`. */
+        function steppers(row: AdwSpinRow): { dec: HTMLElement; inc: HTMLElement; control: HTMLElement } {
+            const control = row.querySelector('.adw-spin-control') as HTMLElement;
+            return {
+                control,
+                dec: row.querySelector('.adw-spin-dec') as HTMLElement,
+                inc: row.querySelector('.adw-spin-inc') as HTMLElement,
+            };
+        }
+
+        await it("is a 30px circle with upstream's margins, not a 32px rounded square", () => {
+            const { el: row, host } = parse<AdwSpinRow>(
+                `<adw-spin-row title="Amount" value="5" adjustment='{"lower":0,"upper":10}'></adw-spin-row>`,
+                'adw-spin-row',
+            );
+            const style = getComputedStyle(steppers(row).dec);
+            // A floor, as upstream writes it, so a wider glyph grows the circle.
+            expect(style.minWidth).toBe('30px');
+            expect(style.minHeight).toBe('30px');
+            expect(style.margin).toBe('10px 2px');
+            expect(style.padding).toBe('0px');
+            expect(style.borderRadius).toBe('9999px');
+            host.remove();
+        });
+
+        await it('paints the filled rest state rather than a transparent one', async () => {
+            const { el: row, host } = parse<AdwSpinRow>(
+                `<adw-spin-row title="Amount" value="5" adjustment='{"lower":0,"upper":10}'></adw-spin-row>`,
+                'adw-spin-row',
+            );
+            const { dec } = steppers(row);
+            // `$button_color` (_buttons.scss:1) — the 10% mix that composites to the 235
+            // the native pixels show. A transparent rest state resolves to alpha 0.
+            expect(getComputedStyle(dec).backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
+            host.remove();
+        });
+
+        await it('renders both circles 30px across, spaced as native lays them out', async () => {
+            const { el: row, host } = parse<AdwSpinRow>(
+                `<adw-spin-row title="Amount" value="5" adjustment='{"lower":0,"upper":10}'></adw-spin-row>`,
+                'adw-spin-row',
+            );
+            const { dec, inc } = steppers(row);
+            const input = row.querySelector('input') as HTMLElement;
+            const decBox = dec.getBoundingClientRect();
+            const incBox = inc.getBoundingClientRect();
+            const inputBox = input.getBoundingClientRect();
+            const rowBox = row.getBoundingClientRect();
+
+            expect(Math.round(decBox.width)).toBe(30);
+            expect(Math.round(decBox.height)).toBe(30);
+            expect(Math.round(incBox.width)).toBe(30);
+            expect(Math.round(incBox.height)).toBe(30);
+            // 8px on each side of the entry: `border-spacing: 6px` (:242) plus this button's
+            // own 2px margin. Native's two circles stand 10px apart with NO entry between
+            // them; this port sandwiches the input between them, so its dec-to-inc distance
+            // is not the comparable number.
+            expect(Math.round(inputBox.left - decBox.right)).toBe(8);
+            expect(Math.round(incBox.left - inputBox.right)).toBe(8);
+            // The 10px margins put each circle 12px down the 54px row, which is the native
+            // capture's y=12..41.
+            expect(Math.round(rowBox.height)).toBe(54);
+            expect(Math.round(decBox.top - rowBox.top)).toBe(12);
+            host.remove();
+        });
+    });
+
     await describe('adw-toggle-group (ToggleGroupState)', async () => {
         await it('tracks the active segment and notifies only on a click', async () => {
             const { el: group, host } = parse<AdwToggleGroup>(
@@ -550,6 +626,72 @@ export const AdwRowStateTest = async () => {
             expect(group.active).toBe(1);
             host.remove();
         });
+
+        await it('carries a toggle tooltip onto its button (adw-toggle-group.c:215)', async () => {
+            // `update_button` sets the tooltip before it looks at anything else, so it
+            // holds for a labelled toggle and an icon-only one alike.
+            const { el: group, host } = parse<AdwToggleGroup>(
+                `<adw-toggle-group>
+                    <adw-toggle label="Picture" tooltip="Picture Mode"></adw-toggle>
+                    <adw-toggle icon-name="camera-photo" tooltip="Take a photo"></adw-toggle>
+                </adw-toggle-group>`,
+                'adw-toggle-group',
+            );
+            const buttons = Array.from(group.querySelectorAll('button.adw-toggle')) as HTMLButtonElement[];
+
+            expect(buttons.map((btn) => btn.title)).toStrictEqual(['Picture Mode', 'Take a photo']);
+            host.remove();
+        });
+
+        await it('names an icon-only toggle by its tooltip, not by its icon name', async () => {
+            // The fall-through in `update_button` (:226-282): a label names the toggle,
+            // otherwise the TOOLTIP does, and the symbolic icon name is the last resort.
+            // Naming it `camera-photo` — which is what this element did before — announces
+            // an identifier rather than words.
+            const { el: group, host } = parse<AdwToggleGroup>(
+                `<adw-toggle-group>
+                    <adw-toggle icon-name="camera-photo" tooltip="Take a photo"></adw-toggle>
+                    <adw-toggle icon-name="camera-photo"></adw-toggle>
+                </adw-toggle-group>`,
+                'adw-toggle-group',
+            );
+            const buttons = Array.from(group.querySelectorAll('button.adw-toggle')) as HTMLButtonElement[];
+
+            expect(buttons[0].getAttribute('aria-label')).toBe('Take a photo');
+            // No tooltip, so the icon name still names it rather than leaving it blank.
+            expect(buttons[1].getAttribute('aria-label')).toBe('camera-photo');
+            host.remove();
+        });
+
+        await it('leaves a labelled toggle named by its label, not by its tooltip', async () => {
+            // The label is the visible text and names the button; the tooltip becomes the
+            // DESCRIPTION in GTK. Setting `aria-label` here would override the text a
+            // reader already sees on the control.
+            const { el: group, host } = parse<AdwToggleGroup>(
+                `<adw-toggle-group>
+                    <adw-toggle label="Picture" tooltip="Picture Mode"></adw-toggle>
+                </adw-toggle-group>`,
+                'adw-toggle-group',
+            );
+            const button = group.querySelector('button.adw-toggle') as HTMLButtonElement;
+
+            expect(button.getAttribute('aria-label')).toBe(null);
+            host.remove();
+        });
+
+        await it('leaves an unlabelled, untooltipped toggle unnamed rather than blank-named', async () => {
+            const { el: group, host } = parse<AdwToggleGroup>(
+                `<adw-toggle-group>
+                    <adw-toggle></adw-toggle>
+                </adw-toggle-group>`,
+                'adw-toggle-group',
+            );
+            const button = group.querySelector('button.adw-toggle') as HTMLButtonElement;
+
+            expect(button.getAttribute('aria-label')).toBe(null);
+            expect(button.title).toBe('');
+            host.remove();
+        });
     });
 
     await describe('adw-expander-row (ExpanderState)', async () => {