Header: Add header semantic to roles configuration

refs #7976

application/controllers/RolesController.php

@@ -45,6 +45,7 @@ class RolesController extends ActionController
             'title' => $this->translate('Roles'),
             'url'   => 'roles'
         ));
+        $this->getTabs()->setTitle($this->translate('Role Configuration'));
     }
 
     /**

application/views/scripts/roles/index.phtml

@@ -1,8 +1,20 @@
 <div class="controls" data-base-target="_main">
     <?= $tabs ?>
-    <h1><?= $this->translate('Roles') ?></h1>
 </div>
 <div class="content">
+    <h1 tabindex="-1" id="roles-index">
+        <?= $this->translate('Roles') ?>
+    </h1>
+    <div class="skip-links skip-links-inline">
+        <h2 class="sr-only"><?= $this->translate('Skip Links'); ?></h2>
+        <ul>
+            <li>
+                <a tabindex="0" href="#roles-index-new">
+                    <?= t('Skip To Create New Role'); ?>
+                </a>
+            </li>
+        </ul>
+    </div>
     <div>
         <?php /** @var \Icinga\Application\Config $roles */ if ($roles->isEmpty()): ?>
             <?= $this->translate('No roles found.') ?>
@@ -64,6 +76,9 @@
                 </tbody>
             </table>
         <?php endif ?>
+        <h2 tabindex="-1" id="roles-index-new" class="sr-only">
+            <?= $this->translate('Create New Role'); ?>
+        </h2>
         <a data-base-target="_next" href="<?= $this->href('roles/new') ?>">
             <?= $this->translate('New Role') ?>
         </a>

application/views/scripts/roles/new.phtml

@@ -1,7 +1,9 @@
 <div class="controls">
     <?= $tabs->showOnlyCloseButton() ?>
-    <h1><?= $this->translate('New Role') ?></h1>
 </div>
 <div class="content">
+    <h1 tabindex="-1" id="roles-new">
+        <?= $this->translate('New Role') ?>
+    </h1>
     <?= $form ?>
 </div>

application/views/scripts/roles/remove.phtml

@@ -1,7 +1,9 @@
 <div class="controls">
     <?= $tabs->showOnlyCloseButton() ?>
-    <h1><?= sprintf($this->translate('Remove Role %s'), $name) ?></h1>
 </div>
 <div class="content">
+    <h1 tabindex="-1" id="roles-remove">
+        <?= sprintf($this->translate('Remove Role %s'), $name) ?>
+    </h1>
     <?= $form ?>
 </div>

application/views/scripts/roles/update.phtml

@@ -1,7 +1,9 @@
 <div class="controls">
     <?= $tabs->showOnlyCloseButton() ?>
-    <h1><?= sprintf($this->translate('Update Role %s'), $name) ?></h1>
 </div>
 <div class="content">
+    <h1 tabindex="-1" id="roles-update">
+        <?= sprintf($this->translate('Update Role %s'), $name) ?>
+    </h1>
     <?= $form ?>
 </div>