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/catalog-search/__tests__/catalog-search.test.tsx

@@ -72,8 +72,8 @@ const clickElement = async (element: Element | null) => {
   });
 };
 
-const querySearchButton = () => Array.from(container.querySelectorAll('span')).find((node) => node.textContent === 'search') ?? null;
-const queryCloseButton = () => Array.from(container.querySelectorAll('span')).find((node) => node.textContent === '✖') ?? null;
+const querySearchButton = () => Array.from(container.querySelectorAll('button')).find((node) => node.textContent === 'search') ?? null;
+const queryCloseButton = () => Array.from(container.querySelectorAll('button')).find((node) => node.textContent === '✖') ?? null;
 const queryInput = () => container.querySelector('input');
 
 const dispatchInput = async (element: HTMLInputElement, value: string) => {

src/components/catalog-search/catalog-search.module.css

@@ -31,8 +31,13 @@
 }
 
 .closeSearch {
+  appearance: none;
+  background: transparent;
   cursor: pointer;
   border: none;
+  font: inherit;
+  margin: 0;
+  padding: 0;
   white-space: nowrap;
   color: var(--button-desktop-text-color, revert);
 }
@@ -41,6 +46,11 @@
   color: var(--button-desktop-text-color-hover, revert);
 }
 
+.closeSearch:focus-visible {
+  outline: 1px dotted currentcolor;
+  outline-offset: 1px;
+}
+
 @media (max-width: 640px) {
   .searchContainer input {
     width: 75px;

src/components/catalog-search/catalog-search.tsx

@@ -85,9 +85,9 @@ const CatalogSearch = () => {
   return (
     <>
       {!isMobile && '['}
-      <span
+      <button
+        type='button'
         className={`${styles.filtersButton} button`}
-        role='button'
         tabIndex={0}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -98,13 +98,14 @@ const CatalogSearch = () => {
         onClick={handleToggleSearch}
       >
         {t('search')}
-      </span>
+      </button>
       {!isMobile && ']'}
       {openSearch && (
         <div className={styles.searchContainer}>
           <input
             ref={(el) => el?.focus()}
             type='text'
+            aria-label={t('search')}
             value={inputValue}
             onChange={handleSearchChange}
             onKeyDown={(e) => {
@@ -113,9 +114,9 @@ const CatalogSearch = () => {
               }
             }}
           />
-          <span
+          <button
+            type='button'
             className={styles.closeSearch}
-            role='button'
             tabIndex={0}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
@@ -126,7 +127,7 @@ const CatalogSearch = () => {
             onClick={handleCloseSearch}
           >
             ✖
-          </span>
+          </button>
         </div>
       )}
     </>