From a4998e3fe6bd4113ae3ee949718778f3081226bb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 27 Mar 2026 13:08:22 +0000
Subject: [PATCH] Fix div-in-p issues

---
 .../css/views/elements/_AccessibleButton.pcss |  5 ++
 .../res/css/views/elements/_CopyableText.pcss |  1 -
 .../auth/InteractiveAuthEntryComponents.tsx   |  5 +-
 .../views/elements/AccessibleButton.tsx       | 79 ++++++++++---------
 .../views/elements/CopyableText.tsx           |  5 +-
 .../components/views/elements/LearnMore.tsx   |  8 +-
 .../src/components/views/elements/Spinner.tsx | 11 ++-
 .../views/right_panel/VerificationPanel.tsx   |  2 +-
 .../room_settings/UrlPreviewSettings.tsx      |  2 +-
 .../views/settings/EventIndexPanel.tsx        |  7 +-
 .../tabs/room/SecurityRoomSettingsTab.tsx     |  2 +
 11 files changed, 77 insertions(+), 50 deletions(-)

diff --git a/apps/web/res/css/views/elements/_AccessibleButton.pcss b/apps/web/res/css/views/elements/_AccessibleButton.pcss
index fafe75c642..3374935904 100644
--- a/apps/web/res/css/views/elements/_AccessibleButton.pcss
+++ b/apps/web/res/css/views/elements/_AccessibleButton.pcss
@@ -9,6 +9,11 @@ Please see LICENSE files in the repository root for full details.
 .mx_AccessibleButton {
     cursor: pointer;
 
+    button& {
+        /* Clear default button styling */
+        all: unset;
+    }
+
     &.mx_AccessibleButton_disabled {
         cursor: not-allowed;
 
diff --git a/apps/web/res/css/views/elements/_CopyableText.pcss b/apps/web/res/css/views/elements/_CopyableText.pcss
index 6219055085..e5cf1c51da 100644
--- a/apps/web/res/css/views/elements/_CopyableText.pcss
+++ b/apps/web/res/css/views/elements/_CopyableText.pcss
@@ -28,7 +28,6 @@ Please see LICENSE files in the repository root for full details.
         /* using em here to adapt to the local font size */
         width: 1em;
         height: 1em;
-        cursor: pointer;
         padding-left: 12px;
         padding-right: 10px;
         display: block;
diff --git a/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
index 49443bdd2e..edd44019ba 100644
--- a/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -459,8 +459,8 @@ export class EmailIdentityAuthEntry extends React.Component<
                                 {
                                     a: (text: string) => (
                                         <Fragment>
-                                            <AccessibleButton kind="link_inline" onClick={null} disabled>
-                                                {text} <Spinner size={14} />
+                                            <AccessibleButton element="a" kind="link_inline" onClick={null} disabled>
+                                                {text} <Spinner as="span" size={14} />
                                             </AccessibleButton>
                                         </Fragment>
                                     ),
@@ -475,6 +475,7 @@ export class EmailIdentityAuthEntry extends React.Component<
                                 {
                                     a: (text: string) => (
                                         <AccessibleButton
+                                            element="a"
                                             kind="link_inline"
                                             title={
                                                 this.state.requested ? _t("auth|uia|email_resent") : _t("action|resend")
diff --git a/apps/web/src/components/views/elements/AccessibleButton.tsx b/apps/web/src/components/views/elements/AccessibleButton.tsx
index a2018b2211..3032312b32 100644
--- a/apps/web/src/components/views/elements/AccessibleButton.tsx
+++ b/apps/web/src/components/views/elements/AccessibleButton.tsx
@@ -152,46 +152,49 @@ const AccessibleButton = function AccessibleButton<T extends ElementType = typeo
         } else {
             newProps.onClick = onClick ?? undefined;
         }
-        // We need to consume enter onKeyDown and space onKeyUp
-        // otherwise we are risking also activating other keyboard focusable elements
-        // that might receive focus as a result of the AccessibleButtonClick action
-        // It's because we are using html buttons at a few places e.g. inside dialogs
-        // And divs which we report as role button to assistive technologies.
-        // Browsers handle space and enter key presses differently and we are only adjusting to the
-        // inconsistencies here
-        newProps.onKeyDown = (e: KeyboardEvent<never>) => {
-            const action = getKeyBindingsManager().getAccessibilityAction(e);
 
-            switch (action) {
-                case KeyBindingAction.Enter:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    return onClick?.(e);
-                case KeyBindingAction.Space:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    break;
-                default:
-                    onKeyDown?.(e);
-            }
-        };
-        newProps.onKeyUp = (e: KeyboardEvent<never>) => {
-            const action = getKeyBindingsManager().getAccessibilityAction(e);
+        if (element !== "button") {
+            // We need to consume enter onKeyDown and space onKeyUp
+            // otherwise we are risking also activating other keyboard focusable elements
+            // that might receive focus as a result of the AccessibleButtonClick action
+            // It's because we are using html buttons at a few places e.g. inside dialogs
+            // And divs which we report as role button to assistive technologies.
+            // Browsers handle space and enter key presses differently and we are only adjusting to the
+            // inconsistencies here
+            newProps.onKeyDown = (e: KeyboardEvent<never>) => {
+                const action = getKeyBindingsManager().getAccessibilityAction(e);
 
-            switch (action) {
-                case KeyBindingAction.Enter:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    break;
-                case KeyBindingAction.Space:
-                    e.stopPropagation();
-                    e.preventDefault();
-                    return onClick?.(e);
-                default:
-                    onKeyUp?.(e);
-                    break;
-            }
-        };
+                switch (action) {
+                    case KeyBindingAction.Enter:
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return onClick?.(e);
+                    case KeyBindingAction.Space:
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
+                    default:
+                        onKeyDown?.(e);
+                }
+            };
+            newProps.onKeyUp = (e: KeyboardEvent<never>) => {
+                const action = getKeyBindingsManager().getAccessibilityAction(e);
+
+                switch (action) {
+                    case KeyBindingAction.Enter:
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
+                    case KeyBindingAction.Space:
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return onClick?.(e);
+                    default:
+                        onKeyUp?.(e);
+                        break;
+                }
+            };
+        }
     }
 
     // Pass through the ref - used for keyboard shortcut access to some buttons
diff --git a/apps/web/src/components/views/elements/CopyableText.tsx b/apps/web/src/components/views/elements/CopyableText.tsx
index 8deaad1d4f..834386e450 100644
--- a/apps/web/src/components/views/elements/CopyableText.tsx
+++ b/apps/web/src/components/views/elements/CopyableText.tsx
@@ -44,6 +44,7 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
 
     return (
         <AccessibleButton
+            element="button"
             title={tooltip ?? _t("action|copy")}
             onClick={onCopyClickInternal}
             className={className}
@@ -62,12 +63,12 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
     });
 
     return (
-        <div className={combinedClassName} {...props}>
+        <span className={combinedClassName} {...props}>
             {children}
             <CopyTextButton getTextToCopy={getTextToCopy} className="mx_CopyableText_copyButton">
                 <CopyIcon />
             </CopyTextButton>
-        </div>
+        </span>
     );
 };
 
diff --git a/apps/web/src/components/views/elements/LearnMore.tsx b/apps/web/src/components/views/elements/LearnMore.tsx
index 7e61bcc789..7be2809e1b 100644
--- a/apps/web/src/components/views/elements/LearnMore.tsx
+++ b/apps/web/src/components/views/elements/LearnMore.tsx
@@ -29,7 +29,13 @@ const LearnMore: React.FC<Props> = ({ title, description, ...rest }) => {
     };
 
     return (
-        <AccessibleButton {...rest} kind="link_inline" onClick={onClick} className="mx_LearnMore_button">
+        <AccessibleButton
+            {...rest}
+            element="button"
+            kind="link_inline"
+            onClick={onClick}
+            className="mx_LearnMore_button"
+        >
             {_t("action|learn_more")}
         </AccessibleButton>
     );
diff --git a/apps/web/src/components/views/elements/Spinner.tsx b/apps/web/src/components/views/elements/Spinner.tsx
index a3ba625e89..4df3177976 100644
--- a/apps/web/src/components/views/elements/Spinner.tsx
+++ b/apps/web/src/components/views/elements/Spinner.tsx
@@ -15,6 +15,11 @@ interface IProps {
     size?: number;
     message?: string;
     onFinished: any; // XXX: Spinner pretends to be a dialog so it must accept an onFinished, but it never calls it
+    /**
+     * Whether to render the content in a div or span.
+     * @default "div"
+     */
+    as?: "span" | "div";
 }
 
 export default class Spinner extends React.PureComponent<IProps> {
@@ -23,16 +28,16 @@ export default class Spinner extends React.PureComponent<IProps> {
     };
 
     public render(): React.ReactNode {
-        const { size, message } = this.props;
+        const { size, message, as: Component = "div" } = this.props;
         return (
-            <div className="mx_Spinner">
+            <Component className="mx_Spinner">
                 {message && (
                     <React.Fragment>
                         <div className="mx_Spinner_Msg">{message}</div>&nbsp;
                     </React.Fragment>
                 )}
                 <InlineSpinner size={size} aria-label={_t("common|loading")} role="progressbar" data-testid="spinner" />
-            </div>
+            </Component>
         );
     }
 }
diff --git a/apps/web/src/components/views/right_panel/VerificationPanel.tsx b/apps/web/src/components/views/right_panel/VerificationPanel.tsx
index fa3a4dc4db..d369f98d3a 100644
--- a/apps/web/src/components/views/right_panel/VerificationPanel.tsx
+++ b/apps/web/src/components/views/right_panel/VerificationPanel.tsx
@@ -255,7 +255,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
         } else {
             body = (
                 <p>
-                    <Spinner />
+                    <Spinner as="span" />
                 </p>
             );
         }
diff --git a/apps/web/src/components/views/room_settings/UrlPreviewSettings.tsx b/apps/web/src/components/views/room_settings/UrlPreviewSettings.tsx
index d200f487eb..89ce9533be 100644
--- a/apps/web/src/components/views/room_settings/UrlPreviewSettings.tsx
+++ b/apps/web/src/components/views/room_settings/UrlPreviewSettings.tsx
@@ -91,7 +91,7 @@ function Description({ isEncrypted }: DescriptionProps): JSX.Element {
     } else {
         const button = {
             a: (sub: string) => (
-                <AccessibleButton kind="link_inline" onClick={onClickUserSettings}>
+                <AccessibleButton element="a" kind="link_inline" onClick={onClickUserSettings}>
                     {sub}
                 </AccessibleButton>
             ),
diff --git a/apps/web/src/components/views/settings/EventIndexPanel.tsx b/apps/web/src/components/views/settings/EventIndexPanel.tsx
index 24acd0f8a6..4cd7a7d015 100644
--- a/apps/web/src/components/views/settings/EventIndexPanel.tsx
+++ b/apps/web/src/components/views/settings/EventIndexPanel.tsx
@@ -220,7 +220,12 @@ export default class EventIndexPanel extends React.Component<EmptyObject, IState
                                         : _t("error|unknown")}
                                 </code>
                                 <p>
-                                    <AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
+                                    <AccessibleButton
+                                        element="button"
+                                        key="delete"
+                                        kind="danger"
+                                        onClick={this.confirmEventStoreReset}
+                                    >
                                         {_t("action|reset")}
                                     </AccessibleButton>
                                 </p>
diff --git a/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 15ca6e9788..5bb8780b3c 100644
--- a/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -137,6 +137,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                                 {
                                     a: (sub) => (
                                         <AccessibleButton
+                                            element="a"
                                             kind="link_inline"
                                             onClick={() => {
                                                 dialog.close();
@@ -334,6 +335,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                             {_t("room_settings|security|encrypted_room_public_confirm_description_2", undefined, {
                                 a: (sub) => (
                                     <AccessibleButton
+                                        element="a"
                                         kind="link_inline"
                                         onClick={(): void => {
                                             dialog.close();