From c6bc5a0cad3f6f7443ddf86aabd25d6a18ac1f63 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 19 Oct 2023 17:44:47 +0200
Subject: [PATCH] :children_crossing: [#454] Ensure role=group is only set if
 multiple buttons are displayed

---
 src/components/EditGrid/EditGrid.js            | 2 +-
 src/components/EditGrid/EditGridButtonGroup.js | 5 +++--
 src/formio/templates/editGrid.ejs              | 5 ++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/EditGrid/EditGrid.js b/src/components/EditGrid/EditGrid.js
index f9ee1b3e8..751be6a76 100644
--- a/src/components/EditGrid/EditGrid.js
+++ b/src/components/EditGrid/EditGrid.js
@@ -21,7 +21,7 @@ const EditGrid = ({children, onAddItem, addButtonLabel}) => (
     <div>{children}</div>
 
     {onAddItem && (
-      <ButtonGroup role="group">
+      <ButtonGroup>
         <Button type="button" variant="primary" onClick={onAddItem}>
           {addButtonLabel || <DefaultAddButtonLabel />}
         </Button>
diff --git a/src/components/EditGrid/EditGridButtonGroup.js b/src/components/EditGrid/EditGridButtonGroup.js
index fc820c4db..b7337a44b 100644
--- a/src/components/EditGrid/EditGridButtonGroup.js
+++ b/src/components/EditGrid/EditGridButtonGroup.js
@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const EditGridButtonGroup = ({children}) => {
+  const role = children && React.Children.count(children) > 1 ? 'group' : undefined;
   return (
-    <ButtonGroup role="group" className="utrecht-button-group--openforms-editgrid">
+    <ButtonGroup role={role} className="utrecht-button-group--openforms-editgrid">
       {children}
     </ButtonGroup>
   );
 };
 
 EditGridButtonGroup.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.arrayOf(PropTypes.node.isRequired),
 };
 
 export default EditGridButtonGroup;
diff --git a/src/formio/templates/editGrid.ejs b/src/formio/templates/editGrid.ejs
index cbe274638..6fede3b3d 100644
--- a/src/formio/templates/editGrid.ejs
+++ b/src/formio/templates/editGrid.ejs
@@ -12,7 +12,10 @@
           <div>{{row}}</div>
 
           {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
-            <p class="utrecht-button-group utrecht-button-group--openforms-editgrid" role="group">
+            <p
+              class="utrecht-button-group utrecht-button-group--openforms-editgrid"
+              {% if (ctx.component.removeRow) { %}role="group"{% } %}
+            >
 
               <button
                 class="openforms-button openforms-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action"