🚸 [#454] Ensure role=group is only set if multiple buttons are displayed

open-formulieren · Oct 31, 2023 · 519e65c · 519e65c
1 parent 6c681e9
commit 519e65c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 })}}