From 0a94a27f4e06cffc0469edb38ace3b9f2e5c673e Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Mon, 20 May 2024 09:15:50 +0100
Subject: [PATCH] refactor(about): Use button component - tooltip accessibility
 improvements

---
 src/components/Elements/Button/Button.jsx     |  51 ++++++-
 .../scss/marketplace/modules/_buttons.scss    |   4 +
 .../scss/settings/modules/tabs/_about.scss    |   2 +-
 src/components/Elements/Tooltip/Tooltip.jsx   |   4 +-
 src/components/Elements/Tooltip/tooltip.scss  |  28 ++++
 src/features/misc/sections/About.jsx          | 128 ++++++++----------
 6 files changed, 136 insertions(+), 81 deletions(-)

diff --git a/src/components/Elements/Button/Button.jsx b/src/components/Elements/Button/Button.jsx
index 396c44e9..057a05d8 100644
--- a/src/components/Elements/Button/Button.jsx
+++ b/src/components/Elements/Button/Button.jsx
@@ -3,7 +3,7 @@ import Tooltip from 'components/Elements/Tooltip/Tooltip';
 
 const Button = forwardRef(
   (
-    { icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey },
+    { icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey, href },
     ref,
   ) => {
     let className;
@@ -24,6 +24,12 @@ const Button = forwardRef(
       case 'collection':
         className = 'btn-collection';
         break;
+      case 'linkIconButton':
+        className = 'btn-icon';
+        break;
+      case 'linkButton':
+        className = 'btn-settings';
+        break;
       default:
         className = 'btn-default';
     }
@@ -43,13 +49,44 @@ const Button = forwardRef(
       </button>
     );
 
-    return type === 'icon' ? (
-      <Tooltip title={tooltipTitle} key={tooltipKey}>
-        {button}
-      </Tooltip>
-    ) : (
-      button
+    const linkButton = (
+      <a className={className} onClick={onClick} ref={ref} disabled={disabled} href={href}>
+        {icon}
+        {label}
+      </a>
     );
+
+    const linkIconButton = (
+      <Tooltip title={tooltipTitle} key={tooltipKey}>
+        <a
+          className={className}
+          onClick={onClick}
+          ref={ref}
+          disabled={disabled}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {icon}
+          {label}
+        </a>
+      </Tooltip>
+    );
+
+    switch (type) {
+      case 'linkIconButton':
+        return linkIconButton;
+      case 'linkButton':
+        return linkButton;
+      case 'icon':
+        return (
+          <Tooltip title={tooltipTitle} key={tooltipKey}>
+            {button}
+          </Tooltip>
+        );
+      default:
+        return button;
+    }
   },
 );
 
diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
index 9a692159..7ec1c716 100644
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
@@ -127,5 +127,9 @@ a.btn-collection {
 }
 
 .btn-icon {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-content: center;
   @include modal-button(standard);
 }
diff --git a/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss b/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss
index adea5470..5cde6088 100644
--- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss
+++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss
@@ -17,7 +17,7 @@
   gap: 15px;
 
   a {
-    @include basicIconButton(11px, 1.2rem, modal);
+    text-decoration: none;
   }
 }
 
diff --git a/src/components/Elements/Tooltip/Tooltip.jsx b/src/components/Elements/Tooltip/Tooltip.jsx
index d1140e84..75696635 100644
--- a/src/components/Elements/Tooltip/Tooltip.jsx
+++ b/src/components/Elements/Tooltip/Tooltip.jsx
@@ -1,10 +1,11 @@
-import { useState, memo } from 'react';
+import { useState, memo, useRef } from 'react';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
 import './tooltip.scss';
 
 function Tooltip({ children, title, style, placement, subtitle }) {
   const [showTooltip, setShowTooltip] = useState(false);
   const [reference, setReference] = useState(null);
+  const tooltipId = useRef(`tooltip-${Math.random()}`);
 
   const { x, y, refs, strategy } = useFloating({
     placement: placement || 'bottom',
@@ -24,6 +25,7 @@ function Tooltip({ children, title, style, placement, subtitle }) {
         onFocus={() => setShowTooltip(true)}
         onBlur={() => setShowTooltip(false)}
         ref={setReference}
+        aria-describedby={tooltipId.current}
       >
         {children}
       </div>
diff --git a/src/components/Elements/Tooltip/tooltip.scss b/src/components/Elements/Tooltip/tooltip.scss
index e13591ac..f423f5ba 100644
--- a/src/components/Elements/Tooltip/tooltip.scss
+++ b/src/components/Elements/Tooltip/tooltip.scss
@@ -96,3 +96,31 @@
     }
   }
 }
+
+#floating {
+  transition-property: opacity, transform;
+}
+#floating[data-status='open'],
+#floating[data-status='close'] {
+  transition-duration: 250ms;
+}
+#floating[data-status='initial'],
+#floating[data-status='close'] {
+  opacity: 0;
+}
+#floating[data-status='initial'][data-placement^='top'],
+#floating[data-status='close'][data-placement^='top'] {
+  transform: translateY(5px);
+}
+#floating[data-status='initial'][data-placement^='bottom'],
+#floating[data-status='close'][data-placement^='bottom'] {
+  transform: translateY(-5px);
+}
+#floating[data-status='initial'][data-placement^='left'],
+#floating[data-status='close'][data-placement^='left'] {
+  transform: translateX(5px);
+}
+#floating[data-status='initial'][data-placement^='right'],
+#floating[data-status='close'][data-placement^='right'] {
+  transform: translateX(-5px);
+}
\ No newline at end of file
diff --git a/src/features/misc/sections/About.jsx b/src/features/misc/sections/About.jsx
index 2c6254d9..66d6c0c4 100644
--- a/src/features/misc/sections/About.jsx
+++ b/src/features/misc/sections/About.jsx
@@ -5,7 +5,7 @@ import { FaDiscord, FaTwitter } from 'react-icons/fa';
 import { SiGithubsponsors, SiOpencollective } from 'react-icons/si';
 import { BiDonateHeart } from 'react-icons/bi';
 
-import { Tooltip } from 'components/Elements';
+import { Tooltip, Button } from 'components/Elements';
 import other_contributors from 'utils/data/other_contributors.json';
 
 class About extends PureComponent {
@@ -18,7 +18,7 @@ class About extends PureComponent {
       photographers: [],
       curators: [],
       update: variables.getMessage('modals.main.settings.sections.about.version.checking_update'),
-      loading: variables.getMessage('modals.main.loading')
+      loading: variables.getMessage('modals.main.loading'),
     };
     this.controller = new AbortController();
   }
@@ -61,11 +61,13 @@ class About extends PureComponent {
           signal: this.controller.signal,
         })
       ).json();
-      curators = (await (
-        await fetch(variables.constants.API_URL + '/marketplace/curators', {
-          signal: this.controller.signal,
-        })
-      ).json()).data;
+      curators = (
+        await (
+          await fetch(variables.constants.API_URL + '/marketplace/curators', {
+            signal: this.controller.signal,
+          })
+        ).json()
+      ).data;
     } catch (e) {
       if (this.controller.signal.aborted === true) {
         return;
@@ -133,7 +135,12 @@ class About extends PureComponent {
       <>
         <div className="settingsRow" style={{ justifyContent: 'center' }}>
           <div style={{ display: 'flex', flexFlow: 'column', gap: '5px' }}>
-            <img draggable={false} className="aboutLogo" src={'src/assets/icons/mue_about.png'} alt="Logo" />
+            <img
+              draggable={false}
+              className="aboutLogo"
+              src={'src/assets/icons/mue_about.png'}
+              alt="Logo"
+            />
             <div className="aboutText">
               <span className="title">Mue, by Kaiso</span>
               <span className="subtitle">
@@ -194,42 +201,30 @@ class About extends PureComponent {
             {variables.getMessage('modals.main.settings.sections.about.contact_us')}
           </span>
           <div className="aboutContact">
-            <a
-              className="donateButton"
+            <Button
+              type="linkButton"
               href="https://muetab.com/contact"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <MdContactPage />
-              {variables.getMessage('modals.main.settings.sections.about.form_button')}
-            </a>
-            <Tooltip title={'Email'}>
-              <a
-                href={'mailto:' + variables.constants.EMAIL}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <MdEmail />
-              </a>
-            </Tooltip>
-            <Tooltip title={'Twitter'}>
-              <a
-                href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <FaTwitter />
-              </a>
-            </Tooltip>
-            <Tooltip title={'Discord'}>
-              <a
-                href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <FaDiscord />
-              </a>
-            </Tooltip>
+              icon={<MdContactPage />}
+              label={variables.getMessage('modals.main.settings.sections.about.form_button')}
+            />
+            <Button
+              type="linkIconButton"
+              href={'mailto:' + variables.constants.EMAIL}
+              icon={<MdEmail />}
+              tooltipTitle="Email"
+            />
+            <Button
+              type="linkIconButton"
+              href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE}
+              icon={<FaTwitter />}
+              tooltipTitle="Twitter"
+            />
+            <Button
+              type="linkIconButton"
+              href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
+              icon={<FaDiscord />}
+              tooltipTitle="Discord"
+            />
           </div>
         </div>
 
@@ -239,33 +234,24 @@ class About extends PureComponent {
           </span>
           <p>{variables.getMessage('modals.main.settings.sections.about.support_subtitle')}</p>
           <div className="aboutContact">
-            <a
-              className="donateButton"
+            <Button
+              type="linkButton"
               href={'https://opencollective.com/' + variables.constants.OPENCOLLECTIVE_USERNAME}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <BiDonateHeart />
-              {variables.getMessage('modals.main.settings.sections.about.support_donate')}
-            </a>
-            <Tooltip title={'GitHub Sponsors'}>
-              <a
-                href={'https://github.com/sponsors/' + variables.constants.ORG_NAME}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <SiGithubsponsors />
-              </a>
-            </Tooltip>
-            <Tooltip title={'Open Collective'}>
-              <a
-                href={'https://opencollective.com/' + variables.constants.OPENCOLLECTIVE_USERNAME}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <SiOpencollective />
-              </a>
-            </Tooltip>
+              icon={<BiDonateHeart />}
+              label={variables.getMessage('modals.main.settings.sections.about.support_donate')}
+            />
+            <Button
+              type="linkIconButton"
+              href={'https://github.com/sponsors/' + variables.constants.ORG_NAME}
+              icon={<SiGithubsponsors />}
+              tooltipTitle="Github Sponsors"
+            />
+            <Button
+              type="linkIconButton"
+              href={'https://opencollective.com/' + variables.constants.OPENCOLLECTIVE_USERNAME}
+              icon={<SiOpencollective />}
+              tooltipTitle="Open Collective"
+            />
           </div>
         </div>
 
@@ -391,9 +377,7 @@ class About extends PureComponent {
           {!!this.state.loading ? <p>{this.state.loading}</p> : <></>}
           <ul>
             {this.state.curators.map((name) => (
-              <li key={name}>
-                {name}
-              </li>
+              <li key={name}>{name}</li>
             ))}
           </ul>
         </div>