feat(ListItemContact): Use new ActionsMenu to get better accessibility

cozy · Jun 20, 2023 · e77d043 · e77d043
1 parent a2160c1
commit e77d043
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 26 deletions.
diff --git a/react/MuiCozyTheme/ListItem/ListItemBase/index.jsx b/react/MuiCozyTheme/ListItem/ListItemBase/index.jsx
@@ -9,13 +9,11 @@ import IconButton from '../../../IconButton'
 import Icon from '../../../Icon'
 import DotsIcon from '../../../Icons/Dots'
 import ExpandedAttributes from '../ExpandedAttributes'
-import ActionMenuWithClose from '../../../ActionMenu/ActionMenuWithClose'
-import { ActionMenuHeader } from '../../../ActionMenu'
-import ActionsItems from '../../../ActionMenu/Actions/ActionsItems'
-import useBreakpoints from '../../../hooks/useBreakpoints'
+import ActionsMenu from '../../../ActionsMenu'
 import RenameInput from './Renaming/RenameInput'
 import withListItemLocales from '../hoc/withListItemLocales'
 import Checkbox from '../../../Checkbox'
+import ActionsMenuMobileHeader from '../../../ActionsMenu/ActionsMenuMobileHeader'
 
 const ListItemBase = ({
   doc,
@@ -31,11 +29,10 @@ const ListItemBase = ({
   const [showActionMenu, setShowActionMenu] = useState(false)
   const [isRenaming, setIsRenaming] = useState(false)
   const anchorRef = useRef()
-  const { isMobile } = useBreakpoints()
 
   const toggleMenu = () => setShowActionMenu(v => !v)
 
-  const showActionMenuHeader = isMobile && actionMenuComp?.Header
+  const showActionMenuHeader = actionMenuComp?.Header
   const isButton = !isRenaming && !!onClick
   const handleClick =
     !isRenaming && !isSelected && onClick ? onClick : undefined
@@ -69,19 +66,24 @@ const ListItemBase = ({
         <ExpandedAttributes doc={doc} expandedAttributes={expandedAttributes} />
       )}
       {showActionMenu && (
-        <ActionMenuWithClose
+        <ActionsMenu
+          open
           ref={anchorRef}
+          doc={doc}
+          actions={actions}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+          }}
+          autoClose
           onClose={() => setShowActionMenu(false)}
         >
           {showActionMenuHeader && (
-            <ActionMenuHeader>{actionMenuComp.Header}</ActionMenuHeader>
+            <ActionsMenuMobileHeader>
+              {actionMenuComp.Header}
+            </ActionsMenuMobileHeader>
           )}
-          <ActionsItems
-            doc={doc}
-            actions={actions}
-            setIsRenaming={setIsRenaming}
-          />
-        </ActionMenuWithClose>
+        </ActionsMenu>
       )}
     </>
   )

diff --git a/react/MuiCozyTheme/ListItem/ListItemContact/helpers.js b/react/MuiCozyTheme/ListItem/ListItemContact/helpers.js
@@ -1,12 +1,12 @@
-import { hr, emailTo, smsTo, call } from '../../../ActionMenu/Actions'
+import { divider, emailTo, smsTo, call } from '../../../ActionsMenu/Actions'
 
 export const makeOptionalActions = contact => {
   const hasPhoneAction = contact.phone?.length > 0
   const hasEmailAction = contact.email?.length > 0
   const hasMessageActions = hasPhoneAction || hasEmailAction
 
   const actionsAndOptions = [
-    { action: hr, condition: hasMessageActions },
+    { action: divider, condition: hasMessageActions },
     { action: call, condition: hasPhoneAction },
     { action: smsTo, condition: hasPhoneAction },
     { action: emailTo, condition: hasEmailAction }

diff --git a/react/MuiCozyTheme/ListItem/ListItemContact/helpers.spec.js b/react/MuiCozyTheme/ListItem/ListItemContact/helpers.spec.js
@@ -1,31 +1,31 @@
-import { hr, emailTo, smsTo, call } from '../../../ActionMenu/Actions'
+import { divider, emailTo, smsTo, call } from '../../../ActionsMenu/Actions'
 
 import { makeOptionalActions } from './helpers'
 
 describe('makeOptionalActions', () => {
-  it('should return hr, call, smsTo, emailTo', () => {
+  it('should return divider, call, smsTo, emailTo', () => {
     const res = makeOptionalActions({
       email: [{ address: 'mail@cozy.com' }],
       phone: [{ number: '123456' }]
     })
 
-    expect(res).toStrictEqual([hr, call, smsTo, emailTo])
+    expect(res).toStrictEqual([divider, call, smsTo, emailTo])
   })
 
-  it('should return hr, emailTo', () => {
+  it('should return divider, emailTo', () => {
     const res = makeOptionalActions({
       email: [{ address: 'mail@cozy.com' }]
     })
 
-    expect(res).toStrictEqual([hr, emailTo])
+    expect(res).toStrictEqual([divider, emailTo])
   })
 
-  it('should return hr, call, smsTo', () => {
+  it('should return divider, call, smsTo', () => {
     const res = makeOptionalActions({
       phone: [{ number: '123456' }]
     })
 
-    expect(res).toStrictEqual([hr, call, smsTo])
+    expect(res).toStrictEqual([divider, call, smsTo])
   })
 
   it('should empty array', () => {

diff --git a/react/MuiCozyTheme/ListItem/ListItemContact/useActions.jsx b/react/MuiCozyTheme/ListItem/ListItemContact/useActions.jsx
@@ -1,8 +1,10 @@
 import { useMemo } from 'react'
 
-import { makeActions } from '../../../ActionMenu/Actions/helpers'
-import { modify } from '../../../ActionMenu/Actions/modify'
-import { viewInContacts } from '../../../ActionMenu/Actions/viewInContacts'
+import {
+  makeActions,
+  modify,
+  viewInContacts
+} from '../../../ActionsMenu/Actions'
 import { makeOptionalActions } from './helpers'
 
 const useActions = contact => {