From b12a2723853fb615e8e50b2a9bf2b6a191570fc4 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Tue, 31 May 2022 21:52:12 +0000
Subject: [PATCH] Use AccessibleButton for 'In reply to' link button on
 ReplyChain (#8726)

- Remove ButtonResetDefault mixin to respect the concept of cascading

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/elements/_ReplyChain.scss      | 17 ++++++++---------
 src/components/views/elements/ReplyChain.tsx | 10 +++++++---
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/res/css/views/elements/_ReplyChain.scss b/res/css/views/elements/_ReplyChain.scss
index cb3c078771..a949feaf73 100644
--- a/res/css/views/elements/_ReplyChain.scss
+++ b/res/css/views/elements/_ReplyChain.scss
@@ -15,20 +15,19 @@ limitations under the License.
 */
 
 .mx_ReplyChain {
-    margin-top: 0;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 8px;
-    padding: 0 10px;
+    margin: 0 0 $spacing-8 0;
+    padding: 0 10px; // TODO: Use a spacing variable
     border-left: 2px solid $accent;
     border-radius: 2px;
 
     .mx_ReplyChain_show {
-        @mixin ButtonResetDefault;
-        color: inherit;
+        &.mx_AccessibleButton_kind_link_inline {
+            padding: 0;
+            color: unset;
 
-        &:hover {
-            color: $links;
+            &:hover {
+                color: $links;
+            }
         }
     }
 
diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx
index dd7cf76855..8fd0217d7c 100644
--- a/src/components/views/elements/ReplyChain.tsx
+++ b/src/components/views/elements/ReplyChain.tsx
@@ -32,7 +32,7 @@ import { Action } from "../../../dispatcher/actions";
 import Spinner from './Spinner';
 import ReplyTile from "../rooms/ReplyTile";
 import Pill, { PillType } from './Pill';
-import { ButtonEvent } from './AccessibleButton';
+import AccessibleButton, { ButtonEvent } from './AccessibleButton';
 import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply';
 import RoomContext from "../../../contexts/RoomContext";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
@@ -217,9 +217,13 @@ export default class ReplyChain extends React.Component<IProps, IState> {
                 {
                     _t('<a>In reply to</a> <pill>', {}, {
                         'a': (sub) => (
-                            <button onClick={this.onQuoteClick} className="mx_ReplyChain_show">
+                            <AccessibleButton
+                                kind="link_inline"
+                                className="mx_ReplyChain_show"
+                                onClick={this.onQuoteClick}
+                            >
                                 { sub }
-                            </button>
+                            </AccessibleButton>
                         ),
                         'pill': (
                             <Pill