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/components/create-board-modal/create-board-modal.module.css

@@ -8,6 +8,14 @@
   z-index: 999;
 }
 
+.backdropButton {
+  all: unset;
+  position: absolute;
+  inset: 0;
+  cursor: default;
+  z-index: 0;
+}
+
 .createBoardDialog {
   position: absolute;
   width: 500px;
@@ -22,7 +30,9 @@
   box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px 1px;
   font-size: var(--body-font-size);
   line-height: 16.003px;
-  z-index: 1000;
+  z-index: 1;
+  color: inherit;
+  padding: 0;
 }
 
 @media (max-width: 600px) {
@@ -122,4 +132,3 @@
   justify-content: center;
   gap: 10px;
 }
-

src/components/create-board-modal/create-board-modal.tsx

@@ -8,29 +8,13 @@ const CreateBoardModal = () => {
     return null;
   }
 
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      closeCreateBoardModal();
-    }
-  };
-
   return (
-    <div
-      className={styles.backdrop}
-      role='button'
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          closeCreateBoardModal();
-        }
-      }}
-      onClick={handleBackdropClick}
-    >
-      <div className={styles.createBoardDialog} role='dialog' aria-modal='true' aria-labelledby='create-board-modal-title'>
+    <div className={styles.backdrop}>
+      <button type='button' className={styles.backdropButton} aria-label='Close create board modal' onClick={closeCreateBoardModal} />
+      <dialog open className={styles.createBoardDialog} aria-modal='true' aria-labelledby='create-board-modal-title'>
         <div className={styles.hd}>
           <h2 id='create-board-modal-title'>Create a Board</h2>
-          <button className={styles.closeButton} onClick={closeCreateBoardModal} title='Close' aria-label='Close' />
+          <button type='button' className={styles.closeButton} onClick={closeCreateBoardModal} title='Close' aria-label='Close' />
         </div>
         <div className={styles.bd}>
           <div className={styles.section}>
@@ -73,9 +57,11 @@ const CreateBoardModal = () => {
           </div>
         </div>
         <div className={styles.createBoardFooter}>
-          <button onClick={closeCreateBoardModal}>Close</button>
+          <button type='button' onClick={closeCreateBoardModal}>
+            Close
+          </button>
         </div>
-      </div>
+      </dialog>
     </div>
   );
 };