fix(react): address Doctor findings (#1143)

Accessibility/semantics pass aligned with React Doctor: role-based spans/divs become real buttons, role=status becomes <output>, modals use native <dialog>, author/peer flags render as <img>, and embed/challenge iframes are sandboxed. Includes review follow-ups: correct button chrome/centering/themed dialog colors and focus rings, the missing aria-label i18n keys (all languages), the Yandex image-search URL, clearer .bso setup steps, a keyboard-accessible image-search dropdown, and removal of the post-edit ('comment edited') display (mod edits unchanged).

src/views/directory/__tests__/directory.test.tsx

@@ -288,6 +288,6 @@ describe('Directory', () => {
 
     const cells = Array.from(getDirectoryRow('board-6.bso')?.querySelectorAll('td') ?? []).map((cell) => cell.textContent?.replace(/\s+/g, ' ').trim());
     expect(cells[3]).toBe('—?');
-    expect(getDirectoryRow('board-6.bso')?.querySelector('sup')?.closest('span')?.getAttribute('title')).toBe('directory_status_unavailable_reason');
+    expect(getDirectoryRow('board-6.bso')?.querySelector('button[aria-label="directory_status_unavailable_reason"]')).not.toBeNull();
   });
 });

src/views/directory/directory.module.css

@@ -196,11 +196,20 @@
 }
 
 .statusUnavailableHelp {
+  all: unset;
   margin-left: 2px;
   font-weight: 700;
+  font-size: 0.75em;
+  vertical-align: super;
+  line-height: 0;
   cursor: help;
 }
 
+.statusUnavailableHelp:focus-visible {
+  outline: 1px dotted currentcolor;
+  outline-offset: 1px;
+}
+
 .directoryFootnote {
   width: 80%;
   max-width: 810px;

src/views/directory/directory.tsx

@@ -129,9 +129,9 @@ const DirectoryRow = ({ board, nowSeconds, rank, onVote }: DirectoryRowProps) =>
           <span className={styles.statusUnavailable}>
             {DIRECTORY_STATUS_UNAVAILABLE_MARKER}
             <Tooltip content={statusUnavailableReason}>
-              <sup className={styles.statusUnavailableHelp} aria-label={statusUnavailableReason} tabIndex={0}>
+              <button type='button' className={styles.statusUnavailableHelp} aria-label={statusUnavailableReason} tabIndex={0}>
                 ?
-              </sup>
+              </button>
             </Tooltip>
           </span>
         ) : status === 'loading' ? (
@@ -252,7 +252,7 @@ const Directory = () => {
               values={{ boardIdentifier }}
               components={{
                 passLink: <Link to={PASS_LINK} />,
-                repoLink: <a href={repoEditUrl} target='_blank' rel='noreferrer noopener' />,
+                repoLink: <a href={repoEditUrl} target='_blank' rel='noreferrer noopener' aria-label={t('directory_submit_repo_link_label', 'directory repository')} />,
               }}
             />
           </div>