refactor(about): Use button component

- tooltip accessibility improvements
2026-06-12 19:48:57 +02:00 · 2024-05-20 09:15:50 +01:00
parent 895f61bd70
commit 0a94a27f4e
6 changed files with 136 additions and 81 deletions
--- 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;
+    }
  },
 );

--- 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);
 }
--- 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;
  }
 }

--- 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>
--- 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);
+}
--- 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>