From 519e65c56e56fcf26482c32e4ac1cf64b5c62150 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 a3cdf6c1c..70c29fc91 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>
         <OFButton type="button" appearance="primary-action-button" onClick={onAddItem}>
           {addButtonLabel || <DefaultAddButtonLabel />}
         </OFButton>
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 3c951f792..6594862d6 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="utrecht-button utrecht-button--primary-action" ref="{{ctx.ref.saveRow}}">
                 {{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}