RoleForm: Use the `<details>` tag

application/forms/Security/RoleForm.php

@@ -272,7 +272,7 @@ class RoleForm extends RepositoryForm
                 $moduleName . '_header',
                 [
                     'decorators'    => ['ViewHelper'],
-                    'value'         => '<h3>'
+                    'value'         => '<summary class="collapsible-control">'
                         . '<span>' . ($moduleName !== 'application'
                             ? sprintf('%s <em>%s</em>', $moduleName, $this->translate('Module'))
                             :  'Icinga Web 2'
@@ -285,18 +285,20 @@ class RoleForm extends RepositoryForm
                             : ''
                         )
                         . '</span>'
-                        . '</h3>'
+                        . new Icon('angles-down', ['class' => 'collapse-icon'])
+                        . new Icon('angles-left', ['class' => 'expand-icon'])
+                        . '</summary>'
                 ]
             );
 
             $this->addDisplayGroup($elements, $moduleName . '_elements', [
                 'decorators'    => [
                     'FormElements',
-                    ['Fieldset', [
+                    ['HtmlTag', [
-                        'class'                 => 'collapsible',
+                        'tag'   => 'details',
-                        'data-toggle-element'   => 'h3',
+                        'class' => 'collapsible'
-                        'data-visible-height'   => 0
+                    ]],
-                    ]]
+                    ['Fieldset']
                 ]
             ]);
         }

public/css/icinga/widgets.less

@@ -255,10 +255,30 @@ form.role-form {
     display: inline-block;
   }
 
-  h3 {
+  summary {
+    border-bottom: 1px solid @gray-light;
+    .user-select(none);
+    cursor: pointer;
+
+    font-weight: @font-weight-bold;
+    margin: 0.556em 0 0.333em;
+    font-size: 1.167em;
+
+    display: flex;
+    align-items: baseline;
+    .privilege-preview {
+      flex: 1 1 auto;
+    }
+
     > :first-child {
       display: inline-block;
-      width: 20em / 1.167em; // element label width / h3 font-size
+      width: 20em / 1.167em; // element label width / summary font-size
+    }
+
+    > :nth-last-child(1),
+    > :nth-last-child(2) {
+      font-size: .75em;
+      opacity: .6;
     }
 
     .privilege-preview .icon {
@@ -276,12 +296,8 @@ form.role-form {
     }
   }
 
-  fieldset.collapsible {
+  .collapsible {
-    border: none;
+    summary em {
-    padding: 0;
-    margin: 0;
-
-    h3 em {
       font-size: .857em;
       font-weight: normal;
       color: @text-color-light;
@@ -309,33 +325,6 @@ form.role-form {
         }
       }
     }
-
-    .collapsible-control {
-      border-bottom: 1px solid @gray-light;
-      cursor: pointer;
-      -webkit-touch-callout: none;
-      -webkit-user-select: none;
-      -khtml-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-    }
-
-    .collapsible-control:after {
-      content: "\f103";
-      display: inline-block;
-      font-family: 'ifont';
-      font-weight: normal;
-      padding: 0 .25em;
-      margin-right: .25em;
-      width: 1em;
-      opacity: .6;
-      float: right;
-    }
-
-    &.collapsed .collapsible-control:after {
-      content: "\e87a";
-    }
   }
 }