keyboard fixes

web/src/components/ButtonClose/ButtonClose.scss

@@ -2,6 +2,9 @@
   border-radius: 50%;
   width: fit-content;
   transition: 0.2s all ease;
+  border: none;
+  background: none;
+  padding: 0;
 
   &:hover {
     background-color: var(--bg-color-hover);

web/src/components/ButtonClose/ButtonClose.tsx

@@ -6,22 +6,23 @@ import './ButtonClose.scss'
 export type ButtonCloseProps = {
   size: 'small' | 'medium' | 'large'
   onClick: () => void
+  disabled?: boolean
 }
 
 const ButtonClose: React.FC<ButtonCloseProps> = ({
   size = 'medium',
   onClick,
+  disabled,
 }) => {
   return (
-    <div className="button-close-wrapper">
+    <button className="button-close-wrapper" onClick={onClick} disabled={disabled}>
       {/* @ts-ignore */}
       <Icon
-        onClick={onClick}
         name="x.svg"
         size="small-close"
         className={`light-grey ${size == 'small' ? 'small' : ''}`}
       />
-    </div>
+    </button>
   )
 }
 

web/src/components/Footer/Footer.tsx

@@ -17,6 +17,7 @@ export type FooterProps = {
   hiddenAchievedOutcomes: CellIdString[]
   hiddenSmallOutcomes: CellIdString[]
   selectedLayeringAlgo: string
+  unselectAll: () => void
   showSmallOutcomes: (projectCellId: CellIdString) => void
   hideSmallOutcomes: (projectCellId: CellIdString) => void
   showAchievedOutcomes: (projectCellId: CellIdString) => void
@@ -29,6 +30,7 @@ const Footer: React.FC<FooterProps> = ({
   hiddenAchievedOutcomes,
   hiddenSmallOutcomes,
   selectedLayeringAlgo,
+  unselectAll,
   showSmallOutcomes,
   hideSmallOutcomes,
   showAchievedOutcomes,
@@ -115,7 +117,7 @@ const Footer: React.FC<FooterProps> = ({
         <div className={bottomRightPanelClassName}>
           {isSyncing && <SyncingIndicator />}
           {mapPage && (
-            <div className="map-viewing-options-button-wrapper">
+            <div className="map-viewing-options-button-wrapper" onClick={() => unselectAll()}>
               {/* If map viewing options is open */}
               <MapViewingOptions
                 isOpen={openMapViewingOptions}

web/src/components/Header/Header.tsx

@@ -34,23 +34,24 @@ export type HeaderProps = {
   presentMembers: AgentPubKeyB64[]
   setModalState: React.Dispatch<React.SetStateAction<ModalState>>
   goToOutcome: (outcomeActionHash: ActionHashB64) => void
+  unselectAll: () => void
   // holochain
   updateStatus: (statusString: Profile['status']) => Promise<void>
 }
 
 const Header: React.FC<HeaderProps> = ({
-  // for update bar
   showUpdateBar,
-  setShowUpdateBar,
   hasMigratedSharedProject,
   whoami,
-  setModalState,
-  updateStatus,
   activeEntryPoints,
   project,
-  goToOutcome,
   members,
   presentMembers,
+  unselectAll,
+  setShowUpdateBar,
+  setModalState,
+  updateStatus,
+  goToOutcome,
 }) => {
   const [status, setStatus] = useState<Status>(
     // @ts-ignore
@@ -80,7 +81,7 @@ const Header: React.FC<HeaderProps> = ({
   }
 
   return (
-    <div className={`header-wrapper`}>
+    <div className={`header-wrapper`} onClick={() => unselectAll()}>
       {/* Update Bar */}
       <div className="header-update-bar-wrapper">
         <UpdateBar

web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx

@@ -210,7 +210,7 @@ const MapViewCreateOutcome: React.FC<MapViewCreateOutcomeProps> = ({
           isChecked={isSmallScopeChecked}
           onChange={(newState) => setIsSmallScopeChecked(newState)}
           icon={<Icon name="leaf.svg" className="not-hoverable" />}
-          text={'This Outcome is Small Scope'}
+          text={'Small Scope'}
         />
       </div>
     </div>

web/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
 import Icon from '../Icon/Icon'
@@ -102,9 +102,53 @@ const Modal: React.FC<ModalProps> = ({
   onClose,
   children,
 }) => {
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  const trapFocus = (event: KeyboardEvent) => {
+    if (!modalRef.current || event.key !== 'Tab') {
+      return
+    }
+
+    const focusableModalElements = modalRef.current.querySelectorAll(
+      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+    ) as NodeListOf<HTMLElement>
+
+    const firstElement = focusableModalElements[0]
+    const lastElement =
+      focusableModalElements[focusableModalElements.length - 1]
+
+    if (event.shiftKey && document.activeElement === firstElement) {
+      lastElement.focus()
+      event.preventDefault()
+    } else if (!event.shiftKey && document.activeElement === lastElement) {
+      firstElement.focus()
+      event.preventDefault()
+    }
+  }
+
+  useEffect(() => {
+    if (active) {
+      document.addEventListener('keydown', trapFocus)
+
+      // Focus the first focusable element
+      // const focusableModalElements = modalRef.current?.querySelectorAll(
+      //   'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      // )
+      // ;(focusableModalElements?.[0] as HTMLElement)?.focus()
+    }
+
+    return () => {
+      document.removeEventListener('keydown', trapFocus)
+    }
+  }, [active])
+
+  if (!active) {
+    return null
+  }
+
   return (
     <CSSTransition in={active} timeout={100} unmountOnExit classNames="modal">
-      <div className={`modal ${white ? 'modal-white' : ''}`}>
+      <div ref={modalRef} className={`modal ${white ? 'modal-white' : ''}`}>
         {/* TODO: figure out how to implement onclickoutside */}
         {/* without imapcting the styling for the modal */}
         {/* problem seen on Profile Setting after implementation */}
@@ -115,9 +159,7 @@ const Modal: React.FC<ModalProps> = ({
               <ButtonClose onClick={onClose} size="medium" />
             </div>
           )}
-          <div className='modal-scrollable-content'>
-          {children}
-          </div>
+          <div className="modal-scrollable-content">{children}</div>
         </div>
         {/* </OnClickOutside> */}
       </div>

web/src/components/Toast/Toast.tsx

@@ -24,6 +24,7 @@ const Toast: React.FC<ToastProps> = ({ toastState, setToastState }) => {
       <div className="toast-text">{recentText}</div>
       <div className="toast-close">
       <ButtonClose
+        disabled={!isVisible}
         size={'small'}
         onClick={() => setToastState({ id: ShowToast.No })}
       />

web/src/routes/App.component.tsx

@@ -92,6 +92,7 @@ export type AppDispatchProps = {
   hideSmallOutcomes: (projectCellId: CellIdString) => void
   showAchievedOutcomes: (projectCellId: CellIdString) => void
   hideAchievedOutcomes: (projectCellId: CellIdString) => void
+  unselectAll: () => void
 }
 
 export type AppMergeProps = {
@@ -139,6 +140,7 @@ const App: React.FC<AppProps> = ({
   hideAchievedOutcomes,
   setSelectedLayeringAlgo,
   uninstallProject,
+  unselectAll,
 }) => {
   const [networkInfoOpen, setNetworkInfoOpen] = useState(false)
 
@@ -182,6 +184,14 @@ const App: React.FC<AppProps> = ({
     }
   }, [updateVersionInfo.newReleaseVersion])
 
+  // when opening a modal, unselect any Outcomes that are selected
+  useEffect(() => {
+    if (modalState.id !== OpenModal.None) {
+      // unselect any selected outcomes
+      unselectAll()
+    }
+  }, [modalState])
+
   useEffect(() => {
     // add event listener for pressing the 'i' key with the ctrl key
     // to open the network info modal
@@ -276,6 +286,7 @@ const App: React.FC<AppProps> = ({
                       showUpdateBar,
                       setShowUpdateBar,
                       hasMigratedSharedProject,
+                      unselectAll,
                     }}
                   />
                 )}
@@ -353,6 +364,7 @@ const App: React.FC<AppProps> = ({
                     hideAchievedOutcomes={hideAchievedOutcomes}
                     selectedLayeringAlgo={selectedLayeringAlgo}
                     setSelectedLayeringAlgo={setSelectedLayeringAlgo}
+                    unselectAll={unselectAll}
                   />
                 )}
               </Router>

web/src/routes/App.connector.ts

@@ -27,6 +27,7 @@ import {
 import ProjectsZomeApi from '../api/projectsApi'
 import { updateProjectMeta } from '../redux/persistent/projects/project-meta/actions'
 import { uninstallProject } from '../projects/uninstallProject'
+import { unselectAll } from '../redux/ephemeral/selection/actions'
 
 function mapStateToProps(state: RootState): AppStateProps {
   const {
@@ -120,6 +121,9 @@ function mapDispatchToProps(dispatch): AppDispatchProps {
     hideAchievedOutcomes: (projectCellId) => {
       return dispatch(hideAchievedOutcomes(projectCellId))
     },
+    unselectAll: () => {
+      return dispatch(unselectAll())
+    }
   }
 }
 

web/src/routes/ProjectView/MapView/MapView.component.tsx

@@ -161,7 +161,7 @@ const MapView: React.FC<MapViewProps> = ({
   )
   // don't bother with outcome statement tooltips if the zoom level is >= 0.7
   // because it displays the full Outcome statement
-  const outcomeStatementTooltipVisible = hoveredOutcome && zoomLevel < 0.7
+  const outcomeStatementTooltipVisible = hoveredOutcome && zoomLevel < 0.5
 
   // don't display the 'collapse/expand' contextmenu item if
   // the Outcome doesn't have children