🐛 fix(modal): a11y retire la liste dans la zone d'actions [DS-1257] (#…

…720)

- le groupe de bouton peut désormais être une `div` à la place d'un `ul``li` 
- retrait de la liste non ordonnée dans le footer de la modale

src/component/button/style/tool/_group.scss

@@ -18,7 +18,8 @@
 }
 
 @mixin vertical-btns-group() {
-  > li {
+  > li,
+  > div {
     width: 100%;
     max-width: 100%;
   }

src/component/button/template/ejs/buttons-group.ejs

@@ -3,6 +3,8 @@
 
 * buttonsGroup.buttons (array, required): paramètres spécifique de chaque bouton du groupe
 
+* buttonsGroup.groupMarkup (string) : si non défini, ul
+
 * buttonsGroup.inline (string|boolean, optional) : aligne les boutons horizontalement (dans la mesure du possible)
 valeurs :
   * true : toujours en ligne
@@ -43,6 +45,8 @@ valeurs :
 
 <%
  const buttonsGroup = locals.buttonsGroup || {};
+ const groupMarkup = buttonsGroup.groupMarkup || 'ul';
+ const isList = groupMarkup === 'ul';
  let groupClasses = buttonsGroup.classes || [];
  let groupAttrs = buttonsGroup.attributes || {};
  let buttons = buttonsGroup.buttons || [];
@@ -91,26 +95,30 @@ valeurs :
  }
  %>
 
-<ul <%- includeClasses(groupClasses) %> <%- includeAttrs(groupAttrs) %>>
+<<%= groupMarkup %> <%- includeClasses(groupClasses) %> <%- includeAttrs(groupAttrs) %>>
   <% for (let i = 0; i < buttons.length; i++) { %>
-  <li>
-      <%
-          const button = buttons[i];
-          let path;
-          switch(button.template) {
-              case 'display':
-                path = './button-display.ejs';
-                break;
-
-              case 'close':
-                path = './button-close.ejs';
-                break;
-
-              default:
-                path = './button.ejs';
-          }
-        %>
+    <% if (isList) { %>
+      <li>
+    <% } %>
+    <%
+      const button = buttons[i];
+      let path;
+      switch(button.template) {
+        case 'display':
+          path = './button-display.ejs';
+          break;
+
+        case 'close':
+          path = './button-close.ejs';
+          break;
+
+        default:
+          path = './button.ejs';
+      }
+    %>
     <%- include(path, {button:button}); %>
-  </li>
+    <% if (isList) { %>
+      </li>
+    <% } %>
   <% } %>
-</ul>
+</<%= groupMarkup %>>

src/component/modal/example/sample/footer/buttons.ejs

@@ -1 +1 @@
-<%- include('../../../../button/example/sample/buttons-group', {buttonsGroup: {sizes:{md : {size:'md'}}, hierarchy: true, label: 'Label bouton', iconPlace:'left', align:'right', reverse: true, inline:'lg', icon :'checkbox-circle-line', group: true, groupCount: 2}}) %>
+<%- include('../../../../button/example/sample/buttons-group', {buttonsGroup: {groupMarkup: 'div', sizes:{md : {size:'md'}}, hierarchy: true, label: 'Label bouton', iconPlace:'left', align:'right', reverse: true, inline:'lg', icon :'checkbox-circle-line', group: true, groupCount: 2}}) %>