Merge pull request #141 from unicef/fix/accessibility-uconfirmation-b…

…utton Added button variant for UConfirmationButton and confirm variant(popup or menu) handled correctly
unicef · Dec 22, 2023 · 67c4c9e · 67c4c9e
2 parents a5167ef + 63a93a0
commit 67c4c9e
Show file tree

Hide file tree

Showing 4 changed files with 381 additions and 77 deletions.
diff --git a/example/src/components/UConfirmationButtonExample.js b/example/src/components/UConfirmationButtonExample.js
@@ -1,12 +1,36 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { UConfirmationButton } from 'unicef-material-ui'
-import { Typography, Grid } from '@material-ui/core'
+import {
+  Typography,
+  Grid,
+  IconButton,
+  Menu,
+  MenuItem,
+  Link,
+} from '@material-ui/core'
 import LinkOffIcon from '@material-ui/icons/LinkOff'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+
 export default function UConfirmationButtonExample() {
-  const itemId = 1
+  const [anchorEl, setAnchorEl] = useState({ menu: null, popup: null })
+  const openMenuVariant = Boolean(anchorEl.menu)
+  const openPopupVariant = Boolean(anchorEl.popup)
+
   function handleDelete(event, id) {
     console.log(id)
   }
+  function handleClick(event, type) {
+    setAnchorEl({
+      ...anchorEl,
+      [type]: event.currentTarget,
+    })
+  }
+  function handleClose(type) {
+    setAnchorEl({
+      ...anchorEl,
+      [type]: null,
+    })
+  }
 
   return (
     <Grid container>
@@ -15,46 +39,154 @@ export default function UConfirmationButtonExample() {
           Confirmation button
         </Typography>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Popup variant</Typography>
-        <UConfirmationButton
-          confirmText="Are you sure you want to delete the item?"
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Delete"
-          variant="popup"
-        />
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">Confirm popup variant</Typography>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Icon variant</Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Delete"
-        />
+      <Grid container item xs={12}>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Icon</Typography>
+          <UConfirmationButton
+            confirmText="Are you sure you want to delete the item?"
+            onConfirm={handleDelete}
+            id={1}
+            buttonText="Delete"
+            confirmVariant="popup"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Menu item</Typography>
+          <IconButton
+            aria-label="more"
+            aria-controls="menu-item-variant-confirm-popup"
+            aria-haspopup="true"
+            onClick={e => handleClick(e, 'popup')}
+          >
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            id="menu-item-variant-confirm-popup"
+            anchorEl={anchorEl.popup}
+            keepMounted
+            open={openPopupVariant}
+            onClose={() => handleClose('popup')}
+            disableEnforceFocus={true}
+          >
+            <MenuItem onClick={() => handleClose('popup')}>
+              <Link href="#" underline="none">
+                Edit
+              </Link>
+            </MenuItem>
+            <MenuItem onClick={() => handleClose('popup')}>
+              <Link href="#" underline="none">
+                View
+              </Link>
+            </MenuItem>
+            <UConfirmationButton
+              onConfirm={handleDelete}
+              id={2}
+              confirmText="Are you sure you want to delete the item?"
+              buttonText="Delete"
+              variant="menuItem"
+              icon={null}
+              confirmVariant="popup"
+            />
+          </Menu>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Button</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={3}
+            confirmText="Are you sure you want to delete the item?"
+            buttonText="Delete"
+            variant="button"
+            confirmVariant="popup"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Custom icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={4}
+            buttonText="Unlink"
+            variant="button"
+            confirmText="Are you sure you want to unlink the item?"
+            confirmActionText="Yes, unlink"
+            confirmVariant="popup"
+            icon={<LinkOffIcon />}
+          />
+        </Grid>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">Menu item variant</Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Delete"
-          variant="menuItem"
-        />
+      <Grid item xs={12}>
+        <Typography variant="subtitle1">Confirm menu variant</Typography>
       </Grid>
-      <Grid item xs={12} sm={4} md={3}>
-        <Typography variant="subtitle1">
-          Custom icon and confirm text
-        </Typography>
-        <UConfirmationButton
-          onConfirm={handleDelete}
-          id={itemId}
-          buttonText="Unlink"
-          variant="menuItem"
-          confirmText="Confirm unlink?"
-          confirmActionText="Yes, unlink"
-          icon={<LinkOffIcon />}
-        />
+      <Grid container item xs={12}>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={5}
+            buttonText="Delete"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Menu item</Typography>
+          <IconButton
+            aria-label="more"
+            aria-controls="menu-item-variant-confirm-menu"
+            aria-haspopup="true"
+            onClick={e => handleClick(e, 'menu')}
+          >
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            id="menu-item-variant-confirm-menu"
+            anchorEl={anchorEl.menu}
+            keepMounted
+            open={openMenuVariant}
+            onClose={() => handleClose('menu')}
+            disableEnforceFocus={true}
+          >
+            <MenuItem onClick={() => handleClose('menu')}>
+              <Link href="#" underline="none">
+                Edit
+              </Link>
+            </MenuItem>
+            <MenuItem onClick={() => handleClose('menu')}>
+              <Link href="#" underline="none">
+                View
+              </Link>
+            </MenuItem>
+            <UConfirmationButton
+              onConfirm={handleDelete}
+              id={6}
+              buttonText="Delete"
+              variant="menuItem"
+              icon={null}
+            />
+          </Menu>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Button</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={7}
+            buttonText="Delete"
+            variant="button"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="subtitle1">Custom icon</Typography>
+          <UConfirmationButton
+            onConfirm={handleDelete}
+            id={8}
+            buttonText="Unlink"
+            variant="button"
+            confirmText="Confirm unlink?"
+            confirmActionText="Yes, unlink"
+            icon={<LinkOffIcon />}
+          />
+        </Grid>
       </Grid>
     </Grid>
   )

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [

diff --git a/src/components/UConfirmationButton/UConfirmationButton.js b/src/components/UConfirmationButton/UConfirmationButton.js
@@ -10,6 +10,7 @@ import {
   DialogContent,
   Typography,
   DialogActions,
+  Box,
 } from '@material-ui/core'
 import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined'
 import UButton from '../UButton'
@@ -27,9 +28,14 @@ const useStyles = makeStyles(theme => ({
 }))
 
 const CONTROL_VARIANTS = {
-  popup: 'popup',
   menuItem: 'menuItem',
   icon: 'icon',
+  button: 'button',
+}
+
+const CONFIRMATION_VARIANTS = {
+  menu: 'menu',
+  popup: 'popup',
 }
 
 /**
@@ -49,22 +55,31 @@ export default function UConfirmationButton(props) {
     confirmText,
     confirmActionText,
     cancelText,
+    buttonVariant,
+    confirmVariant,
   } = props
   const [deleteAnchorEl, setDeleteAnchorEl] = useState(null)
   const [openDialog, setOpenDialog] = useState(false)
 
   const handleConfirm = e => {
     onConfirm && onConfirm(e, id)
-    if (variant !== CONTROL_VARIANTS.popup) handleDeleteOptionClicked(e)
+    if (confirmVariant === CONFIRMATION_VARIANTS.popup) {
+      setOpenDialog(false)
+    } else {
+      handleDeleteOptionClicked(e)
+    }
   }
 
   const handleDeleteOptionClicked = e => {
     setDeleteAnchorEl(null)
   }
 
   const handleClick = e => {
-    if (variant !== CONTROL_VARIANTS.popup) setDeleteAnchorEl(e.currentTarget)
-    else setOpenDialog(true)
+    if (confirmVariant === CONFIRMATION_VARIANTS.popup) {
+      setOpenDialog(true)
+    } else {
+      setDeleteAnchorEl(e.currentTarget)
+    }
   }
 
   const handleCancelPopup = e => {
@@ -76,8 +91,20 @@ export default function UConfirmationButton(props) {
       {variant === CONTROL_VARIANTS.menuItem ? (
         <MenuItem onClick={handleClick} className={classes.menuLabel}>
           {icon}
-          <span className={classes.span}>{buttonText}</span>
+          <Box component="span" className={icon ? classes.span : ''}>
+            {buttonText}
+          </Box>
         </MenuItem>
+      ) : variant === CONTROL_VARIANTS.button ? (
+        <UButton
+          startIcon={icon}
+          onClick={handleClick}
+          aria-controls={`delete-confirmation-menu-${id}`}
+          aria-haspopup="true"
+          variant={buttonVariant}
+        >
+          {buttonText}
+        </UButton>
       ) : (
         <Tooltip title={buttonText} placement="top">
           <IconButton
@@ -91,7 +118,7 @@ export default function UConfirmationButton(props) {
           </IconButton>
         </Tooltip>
       )}
-      {variant === CONTROL_VARIANTS.popup ? (
+      {confirmVariant === CONFIRMATION_VARIANTS.popup ? (
         <Dialog id={`delete-confirmation-menu-${id}`} open={openDialog}>
           <DialogContent>
             <Typography variant="body1">{confirmText || ''}</Typography>
@@ -131,11 +158,16 @@ UConfirmationButton.propTypes = {
   buttonText: PropTypes.string,
   /** trigger confirmation function */
   onConfirm: PropTypes.func.isRequired,
-  /** variant: menu or icon */
+  /** variant: menuItem or icon or button */
   variant: PropTypes.oneOf([
-    CONTROL_VARIANTS.popup,
     CONTROL_VARIANTS.menuItem,
     CONTROL_VARIANTS.icon,
+    CONTROL_VARIANTS.button,
+  ]),
+  /** Confirm variant: popup or menu */
+  confirmVariant: PropTypes.oneOf([
+    CONFIRMATION_VARIANTS.popup,
+    CONFIRMATION_VARIANTS.menu,
   ]),
   /** if the variant is menuitem, this prop make sure the item enable or not */
   enabled: PropTypes.bool,
@@ -147,6 +179,8 @@ UConfirmationButton.propTypes = {
   confirmActionText: PropTypes.string,
   /** custom icon */
   icon: PropTypes.element,
+  /** Button variant applied to menuItem button */
+  buttonVariant: PropTypes.string,
 }
 
 UConfirmationButton.defaultProps = {
@@ -157,4 +191,6 @@ UConfirmationButton.defaultProps = {
   confirmActionText: 'Yes, delete',
   cancelText: 'No',
   icon: <DeleteOutlinedIcon />,
+  buttonVariant: 'text',
+  confirmVariant: 'menu',
 }