fix: selectable ui elements (#714)

* fix(dev): make theme toggle button selectable * fix(ui): selectable jars can acquire focus * ui(info): help cursor on info icons * fix(ui): selectable segmented tabs * fix(ui): selectable openable jars * fix(ui): close jar details modal on key escape
joinmarket-webui · Dec 26, 2023 · 378daf5 · 378daf5
1 parent d4466a0
commit 378daf5
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 33 deletions.
diff --git a/src/components/Jars.module.css b/src/components/Jars.module.css
@@ -11,6 +11,7 @@
   color: var(--bs-gray-500);
   border: 1px solid var(--bs-gray-500);
   border-radius: 50%;
+  cursor: help;
 }
 
 .jarsContainer {

diff --git a/src/components/MainWalletView.tsx b/src/components/MainWalletView.tsx
@@ -114,7 +114,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
       .catch((err) => {
         if (abortCtrl.signal.aborted) return
         const message = err.message || t('current_wallet.error_loading_failed')
-        !abortCtrl.signal.aborted && setAlert({ variant: 'danger', message })
+        setAlert({ variant: 'danger', message })
       })
       .finally(() => {
         if (abortCtrl.signal.aborted) return
@@ -134,7 +134,7 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
         </rb.Row>
       )}
 
-      {currentWalletInfo && jars && isAccountOverlayShown && (
+      {currentWalletInfo && jars && (
         <JarDetailsOverlay
           jars={jars}
           initialJarIndex={selectedJarIndex}

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -174,12 +174,8 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
   return (
     <rb.Nav className="justify-content-center align-items-stretch">
       {joiningRoute && (
-        <rb.Nav.Item className="d-flex align-items-center">
-          <NavLink
-            to={joiningRoute}
-            onClick={onClick}
-            className="nav-link d-flex align-items-center justify-content-center"
-          >
+        <rb.Nav.Item className="d-flex align-items-stretch">
+          <NavLink to={joiningRoute} onClick={onClick} className="nav-link d-flex align-items-center">
             <rb.Navbar.Text className="d-md-none">{t('navbar.joining_in_progress')}</rb.Navbar.Text>
             <JoiningIndicator
               isOn={true}
@@ -190,7 +186,7 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
         </rb.Nav.Item>
       )}
       {isDebugFeatureEnabled('fastThemeToggle') && (
-        <rb.Nav.Item className="d-none d-md-flex align-items-center justify-content-center">
+        <rb.Nav.Item className="d-none d-md-flex align-items-stretch">
           <FastThemeToggle />
         </rb.Nav.Item>
       )}
@@ -226,13 +222,13 @@ function FastThemeToggle() {
   )
 
   return (
-    <Sprite
-      className="cursor-pointer"
+    <rb.Button
+      variant="link"
+      className="unstyled"
       onClick={() => setTheme(isLightTheme ? window.JM.THEMES[1] : window.JM.THEMES[0])}
-      symbol={isLightTheme ? window.JM.THEMES[0] : window.JM.THEMES[1]}
-      width="30"
-      height="30"
-    />
+    >
+      <Sprite symbol={isLightTheme ? window.JM.THEMES[0] : window.JM.THEMES[1]} width="30" height="30" />
+    </rb.Button>
   )
 }
 

diff --git a/src/components/PaymentConfirmModal.module.css b/src/components/PaymentConfirmModal.module.css
@@ -3,4 +3,5 @@
   color: var(--bs-gray-500);
   border: 1px solid var(--bs-gray-500);
   border-radius: 50%;
+  cursor: help;
 }
diff --git a/src/components/SegmentedTabs.module.css b/src/components/SegmentedTabs.module.css
@@ -22,7 +22,12 @@
 }
 
 .segmented-tab input[type='radio'] {
-  display: none;
+  appearance: none;
+  margin: 0;
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
 }
 
 .segmented-tab label {
@@ -52,7 +57,6 @@
 .segmented-tab input[type='radio']:not(:disabled) ~ label {
   cursor: pointer;
 }
-
 .segmented-tab input[type='radio']:checked:not(:disabled) ~ label {
   background-color: var(--bs-gray-100);
   box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1);
@@ -61,3 +65,7 @@
 :root[data-theme='dark'] .segmented-tab input[type='radio']:checked:not(:disabled) ~ label {
   background-color: var(--bs-gray-600);
 }
+
+.segmented-tab input[type='radio']:focus ~ label {
+  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color) !important;
+}
diff --git a/src/components/SegmentedTabs.tsx b/src/components/SegmentedTabs.tsx
@@ -8,25 +8,26 @@ interface SegmentedTab {
   disabled?: boolean
 }
 
-function SegmentedTabFormCheck({ id, name, value, label, disabled, defaultChecked, onChange }: rb.FormCheckProps) {
+function SegmentedTabFormCheck({ id, name, value, label, disabled, checked, onChange }: rb.FormCheckProps) {
   const _onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation()
     onChange && onChange(e)
   }
 
   return (
     <>
-      <rb.Form.Check
-        bsPrefix={styles['segmented-tab']}
-        type="radio"
-        id={id}
-        value={value}
-        name={name}
-        label={label}
-        disabled={disabled}
-        defaultChecked={defaultChecked}
-        onChange={_onChange}
-      />
+      <div className={styles['segmented-tab']}>
+        <input
+          id={id}
+          name={name}
+          type="radio"
+          value={value}
+          checked={checked}
+          onChange={_onChange}
+          disabled={disabled}
+        />
+        <label htmlFor={id}>{label}</label>
+      </div>
     </>
   )
 }
@@ -57,7 +58,7 @@ export default function SegmentedTabs({ name, tabs, onChange, initialValue, disa
               label={tab.label}
               disabled={disabled || tab.disabled}
               inline={true}
-              defaultChecked={initialValue === tab.value}
+              checked={initialValue === tab.value}
               onChange={(e) => _onChange(e, tab)}
             />
           )

diff --git a/src/components/jar_details/JarDetailsOverlay.tsx b/src/components/jar_details/JarDetailsOverlay.tsx
@@ -310,7 +310,6 @@ const JarDetailsOverlay = (props: JarDetailsOverlayProps) => {
       className={`offcanvas-fullscreen ${styles.overlayContainer}`}
       show={props.isShown}
       onHide={props.onHide}
-      keyboard={false}
       placement="bottom"
     >
       <rb.Offcanvas.Header>

diff --git a/src/components/jars/Jar.module.css b/src/components/jars/Jar.module.css
@@ -72,12 +72,15 @@
 }
 
 .selectableJarContainer .selectionCircle {
+  appearance: none;
   height: 1.5rem;
   width: 1.5rem;
 
   border-radius: 50%;
   display: inline-block;
   border: 1px solid var(--bs-body-color);
+
+  cursor: pointer;
 }
 
 .selectableJarContainer:not(.selectable) .selectionCircle {

diff --git a/src/components/jars/Jar.tsx b/src/components/jars/Jar.tsx
@@ -171,7 +171,13 @@ const SelectableJar = ({
     >
       <Jar index={index} {...jarProps} />
       <div className="d-flex justify-content-center align-items-center gap-1 mt-2 position-relative">
-        <div className={styles.selectionCircle} />
+        <input
+          type="radio"
+          checked={isSelected}
+          onChange={() => isSelectable && onClick(index)}
+          className={styles.selectionCircle}
+          disabled={!isSelectable}
+        />
         {variant === 'warning' && (
           <div className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark p-0">
             <Sprite symbol="warn" width="20" height="20" />
@@ -206,7 +212,12 @@ const OpenableJar = ({ tooltipText, onClick, ...jarProps }: OpenableJarProps) =>
         }}
         overlay={(props) => <rb.Tooltip {...props}>{tooltipText}</rb.Tooltip>}
       >
-        <div className={styles.tooltipJarContainer} onClick={onClick}>
+        <div
+          tabIndex={0}
+          className={styles.tooltipJarContainer}
+          onClick={onClick}
+          onKeyDown={(e) => e.key === 'Enter' && onClick()}
+        >
           <Jar {...jarProps} isOpen={jarIsOpen} />
         </div>
       </rb.OverlayTrigger>