Update button focus outline

Concordium · Dec 9, 2024 · ef0ff61 · ef0ff61
1 parent e53d393
commit ef0ff61
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/...s/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/NavButton.tsx b/...s/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/NavButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import ArrowsLeft from '@assets/svgX/arrow-left.svg';
 import clsx from 'clsx';
+import Button from '@popup/popupX/shared/Button';
 
 type NavButtonProps = {
     hideBackArrow: boolean;
@@ -13,7 +14,7 @@ export default function NavButton({ hideBackArrow, backTitle = 'to Main page' }:
     if (hideBackArrow) return null;
     return (
         <div className={clsx('header__nav', hideBackArrow && 'hidden')}>
-            <button
+            <Button.Base
                 type="button"
                 className="header__nav_button"
                 onClick={() => {
@@ -22,7 +23,7 @@ export default function NavButton({ hideBackArrow, backTitle = 'to Main page' }:
             >
                 <ArrowsLeft />
                 <span className="text__main_medium">{backTitle}</span>
-            </button>
+            </Button.Base>
         </div>
     );
 }
diff --git a/packages/browser-wallet/src/popup/popupX/pages/About/About.tsx b/packages/browser-wallet/src/popup/popupX/pages/About/About.tsx
@@ -34,31 +34,41 @@ export default function About() {
                     <Card.Row>
                         <Text.MainMedium>{t('documentation')}</Text.MainMedium>
                         <Text.ExternalLink path={urls.documentationWebsite}>
-                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                            <Button.Base as="span" className="button__icon transparent">
+                                <ArrowSquare />
+                            </Button.Base>
                         </Text.ExternalLink>
                     </Card.Row>
                     <Card.Row>
                         <Text.MainMedium>{t('forum')}</Text.MainMedium>
                         <Text.ExternalLink path={urls.supportWebsite}>
-                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                            <Button.Base as="span" className="button__icon transparent">
+                                <ArrowSquare />
+                            </Button.Base>
                         </Text.ExternalLink>
                     </Card.Row>
                     <Card.Row>
                         <Text.MainMedium>{t('website')}</Text.MainMedium>
                         <Text.ExternalLink path={urls.website}>
-                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                            <Button.Base as="span" className="button__icon transparent">
+                                <ArrowSquare />
+                            </Button.Base>
                         </Text.ExternalLink>
                     </Card.Row>
                     <Card.Row>
                         <Text.MainMedium>{t('termsAndConditions')}</Text.MainMedium>
                         <Text.ExternalLink path={termsUrl}>
-                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                            <Button.Base as="span" className="button__icon transparent">
+                                <ArrowSquare />
+                            </Button.Base>
                         </Text.ExternalLink>
                     </Card.Row>
                     <Card.Row>
                         <Text.MainMedium>{t('licence')}</Text.MainMedium>
                         <Text.ExternalLink path={urls.licenseAttributions}>
-                            <Button.Icon className="transparent" icon={<ArrowSquare />} />
+                            <Button.Base as="span" className="button__icon transparent">
+                                <ArrowSquare />
+                            </Button.Base>
                         </Text.ExternalLink>
                     </Card.Row>
                 </Card>

diff --git a/packages/browser-wallet/src/popup/popupX/shared/Text/Text.scss b/packages/browser-wallet/src/popup/popupX/shared/Text/Text.scss
@@ -8,6 +8,10 @@
 .external-link {
     text-decoration: underline;
 
+    &:focus-visible {
+        outline: 1px solid $color-white;
+    }
+
     &,
     &:hover,
     &:visited,