Use AccessibleButton for 'Reset All' link button on SetupEncryptionBody (#8730)

- Remove ButtonResetDefault to respect the concept of cascading

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/structures/auth/_SetupEncryptionBody.scss

@@ -17,9 +17,11 @@ limitations under the License.
 .mx_SetupEncryptionBody_reset {
     color: $light-fg-color;
     margin-top: $font-14px;
-}
 
-.mx_SetupEncryptionBody_reset_link {
-    @mixin ButtonResetDefault;
-    color: $alert;
+    .mx_SetupEncryptionBody_reset_link {
+        &.mx_AccessibleButton_kind_link_inline {
+            padding: 0;
+            color: $alert;
+        }
+    }
 }

src/components/structures/auth/SetupEncryptionBody.tsx

@@ -212,11 +212,13 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                         </div>
                         <div className="mx_SetupEncryptionBody_reset">
                             { _t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
-                                a: (sub) => <button
+                                a: (sub) => <AccessibleButton
+                                    kind="link_inline"
+                                    className="mx_SetupEncryptionBody_reset_link"
                                     onClick={this.onResetClick}
-                                    className="mx_SetupEncryptionBody_reset_link mx_Dialog_nonDialogButton">
+                                >
                                     { sub }
-                                </button>,
+                                </AccessibleButton>,
                             }) }
                         </div>
                     </div>