Use AccessibleButton for 'In reply to' link button on ReplyChain (mat…

…rix-org#8726) - Remove ButtonResetDefault mixin to respect the concept of cascading Signed-off-by: Suguru Hirahara <[email protected]>
JanBurp · Jun 14, 2022 · ed7a72d · ed7a72d
1 parent cacdb69
commit ed7a72d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git 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
@@ -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