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/settings-modal/subscriptions-setting/__tests__/subscriptions-setting.test.tsx

@@ -47,7 +47,7 @@ const render = () => {
 };
 
 const getButtonByText = (text: string) => {
-  const button = Array.from(container.querySelectorAll('[role="button"]')).find((candidate) => (candidate.textContent ?? '').includes(text));
+  const button = Array.from(container.querySelectorAll('button')).find((candidate) => (candidate.textContent ?? '').includes(text));
   if (!button) {
     throw new Error(`Button containing "${text}" not found`);
   }

src/components/settings-modal/subscriptions-setting/subscriptions-setting.module.css

@@ -12,6 +12,12 @@
 }
 
 .button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  margin: 0;
+  padding: 0;
   text-transform: capitalize;
   color: var(--button-desktop-text-color);
   text-decoration: var(--button-text-decoration);
@@ -26,6 +32,11 @@
   cursor: pointer;
 }
 
+.button:focus-visible {
+  outline: 1px dotted currentcolor;
+  outline-offset: 1px;
+}
+
 .notSubscribed {
   padding-bottom: 10px;
 }

src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx

@@ -22,9 +22,9 @@ const SubscriptionButton = ({ address }: { address: string }) => {
   return (
     <span className={styles.subscriptionButton}>
       [
-      <span
+      <button
+        type='button'
         className={styles.button}
-        role='button'
         tabIndex={0}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -35,7 +35,7 @@ const SubscriptionButton = ({ address }: { address: string }) => {
         onClick={toggleSubscription}
       >
         {recentlyUnsubscribed || !subscribed ? t('subscribe') : t('unsubscribe')}
-      </span>
+      </button>
       ]
     </span>
   );
@@ -59,9 +59,9 @@ const SubscriptionsSetting = () => {
           {subscriptions?.length > 1 && (
             <div className={styles.unsubscribeAll}>
               [
-              <span
+              <button
+                type='button'
                 className={styles.button}
-                role='button'
                 tabIndex={0}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
@@ -72,7 +72,7 @@ const SubscriptionsSetting = () => {
                 onClick={unsubscribeAll}
               >
                 {t('unsubscribe_all')}
-              </span>
+              </button>
               ]
             </div>
           )}