From 89743c9321af4f341fe24da6438b86444296ecc9 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sun, 12 Jun 2022 11:13:41 +0000
Subject: [PATCH] Fix clickable area of advanced toggle on appearance user
 settings tab (#8820)

---
 .../settings/tabs/user/_AppearanceUserSettingsTab.scss     | 5 -----
 .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 7 ++++---
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index e4247b4851..4b6da57192 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -32,11 +32,6 @@ limitations under the License.
         margin-bottom: 16px;
     }
 
-    .mx_AppearanceUserSettingsTab_AdvancedToggle {
-        color: $accent;
-        cursor: pointer;
-    }
-
     .mx_AppearanceUserSettingsTab_systemFont {
         margin-left: calc($font-16px + 10px);
     }
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 30e7882f10..7c0821a139 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -23,6 +23,7 @@ import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
 import SettingsFlag from '../../../elements/SettingsFlag';
 import Field from '../../../elements/Field';
+import AccessibleButton from "../../../elements/AccessibleButton";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import { UIFeature } from "../../../../../settings/UIFeature";
 import { Layout } from "../../../../../settings/enums/Layout";
@@ -90,12 +91,12 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
         const brand = SdkConfig.get().brand;
-        const toggle = <div
-            className="mx_AppearanceUserSettingsTab_AdvancedToggle"
+        const toggle = <AccessibleButton
+            kind="link"
             onClick={() => this.setState({ showAdvanced: !this.state.showAdvanced })}
         >
             { this.state.showAdvanced ? _t("Hide advanced") : _t("Show advanced") }
-        </div>;
+        </AccessibleButton>;
 
         let advanced: React.ReactNode;