From 560f8f7ee777141253277f21ad28755c948995b5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 2 Mar 2022 16:31:47 +0000
Subject: [PATCH] Improve accessibility of the BetaPill (#7949)

---
 res/css/views/beta/_BetaCard.scss      |  2 +-
 src/components/views/beta/BetaCard.tsx | 21 +++++++--------------
 src/i18n/strings/en_EN.json            |  1 +
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss
index dbbc008a06..80a70ad0d6 100644
--- a/res/css/views/beta/_BetaCard.scss
+++ b/res/css/views/beta/_BetaCard.scss
@@ -105,7 +105,7 @@ limitations under the License.
     display: inline-block;
     vertical-align: text-bottom;
 
-    &.mx_BetaCard_betaPill_clickable {
+    &.mx_AccessibleButton {
         cursor: pointer;
     }
 }
diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx
index c1d823d876..561de940d2 100644
--- a/src/components/views/beta/BetaCard.tsx
+++ b/src/components/views/beta/BetaCard.tsx
@@ -15,20 +15,19 @@ limitations under the License.
 */
 
 import React, { ReactNode, useState } from "react";
-import classNames from "classnames";
 import { sleep } from "matrix-js-sdk/src/utils";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
-import TextWithTooltip from "../elements/TextWithTooltip";
 import Modal from "../../../Modal";
 import BetaFeedbackDialog from "../dialogs/BetaFeedbackDialog";
 import SdkConfig from "../../../SdkConfig";
 import SettingsFlag from "../elements/SettingsFlag";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
 import InlineSpinner from "../elements/InlineSpinner";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 // XXX: Keep this around for re-use in future Betas
 
@@ -39,10 +38,9 @@ interface IProps {
 
 export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
     if (onClick) {
-        return <TextWithTooltip
-            class={classNames("mx_BetaCard_betaPill", {
-                mx_BetaCard_betaPill_clickable: !!onClick,
-            })}
+        return <AccessibleTooltipButton
+            className="mx_BetaCard_betaPill"
+            title={_t("This is a beta feature. Click for more info")}
             tooltip={<div>
                 <div className="mx_Tooltip_title">
                     { _t("This is a beta feature") }
@@ -52,18 +50,13 @@ export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
                 </div>
             </div>}
             onClick={onClick}
-            tooltipProps={{ yOffset: -10 }}
+            yOffset={-10}
         >
             { _t("Beta") }
-        </TextWithTooltip>;
+        </AccessibleTooltipButton>;
     }
 
-    return <span
-        className={classNames("mx_BetaCard_betaPill", {
-            mx_BetaCard_betaPill_clickable: !!onClick,
-        })}
-        onClick={onClick}
-    >
+    return <span className="mx_BetaCard_betaPill">
         { _t("Beta") }
     </span>;
 };
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 7534cea50b..50f5f897c4 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2939,6 +2939,7 @@
     "Revoke permissions": "Revoke permissions",
     "Move left": "Move left",
     "Move right": "Move right",
+    "This is a beta feature. Click for more info": "This is a beta feature. Click for more info",
     "This is a beta feature": "This is a beta feature",
     "Click for more info": "Click for more info",
     "Beta": "Beta",