fix: use cross-only fullscreen diagram close control

scripts/portal.test.mjs

@@ -65,6 +65,16 @@ test('Archify is pinned, licensed and rebuilt, not a remote embed', () => {
   assert(wrapper.includes('aria-hidden="true"'));
   assert(read('src/css/custom.css').includes('justify-content: flex-end'));
 });
+test('full-screen close is cross-only with an accessible name and square touch target', () => {
+  const wrapper = read('src/components/ArchifyDiagram/index.tsx');
+  const button = wrapper.match(/<button[^>]*aria-label="Close full-screen diagram"[^>]*>(.*?)<\/button>/s);
+  assert(button, 'close button retains its accessible name');
+  assert.equal(button[1], '<span aria-hidden="true">×</span>');
+  assert(button[0].includes('autoFocus') && button[0].includes('onClick={close}'));
+  const styles = read('src/css/custom.css').match(/\.archify-modal-toolbar button \{([^}]+)\}/)[1];
+  assert(styles.includes('width: 44px') && styles.includes('height: 44px'));
+  assert(styles.includes('padding: 0') && styles.includes('flex-shrink: 0'));
+});
 test('Product owns two teams and Technology owns five separate teams', () => {
   const spec = JSON.parse(read('diagrams/organization-structure.architecture.json'));
   const page = read('docs/organization/structure.mdx');

src/components/ArchifyDiagram/index.tsx

@@ -20,7 +20,7 @@ export default function ArchifyDiagram({name, title, compact = false}: {name: st
     <div className="archify-toolbar"><button ref={opener} type="button" className="archify-expand" aria-label={`Expand ${title}`} title="Expand diagram" onClick={() => setExpanded(true)}><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5" /></svg></button></div>
     <iframe src={source} title={title} sandbox="allow-scripts allow-downloads" loading="lazy" referrerPolicy="no-referrer" />
     <dialog ref={dialog} className="archify-modal" aria-labelledby={headingId} onClose={() => {setExpanded(false); opener.current?.focus();}}>
-      <div className="archify-modal-toolbar"><strong id={headingId}>{title}</strong><button type="button" onClick={close} autoFocus aria-label="Close full-screen diagram">Close ×</button></div>
+      <div className="archify-modal-toolbar"><strong id={headingId}>{title}</strong><button type="button" onClick={close} autoFocus aria-label="Close full-screen diagram"><span aria-hidden="true">×</span></button></div>
       {expanded && <iframe src={source} title={`${title} — expanded`} sandbox="allow-scripts allow-downloads" referrerPolicy="no-referrer" />}
     </dialog>
   </section>;

src/css/custom.css

@@ -114,6 +114,6 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
 .archify-modal[open] {display: flex; flex-direction: column;}
 .archify-modal::backdrop {background: #000b;}
 .archify-modal-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line);}
-.archify-modal-toolbar button {flex-shrink: 0; padding: 8px 16px; background: var(--gold); color: #14131a; font: inherit; font-weight: 700; border: 0; cursor: pointer;}
+.archify-modal-toolbar button {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; background: var(--gold); color: #14131a; font: inherit; font-size: 24px; font-weight: 700; border: 0; cursor: pointer;}
 .archify-panel .archify-modal iframe {flex: 1; min-height: 0; height: 100%; width: 100%;}
 @media (prefers-reduced-motion: reduce) {.start-card {transition: none;} .start-card:hover {transform: none;}}