add form to OptionsWidget and refactor code a bit, fixes #1474

Closes #1474

Merge request studip/studip!2044

lib/classes/sidebar/LinkElement.php

@@ -226,10 +226,9 @@ class LinkElement extends WidgetElement implements ArrayAccess
     protected function renderButton()
     {
         return sprintf(
-            '<form action="%1$s" method="post" %2$s>%3$s<button type="submit">%4$s</button></form>',
+            '<button formaction="%s" class="as-link" %s>%s</button>',
             htmlReady($this->url),
             arrayToHtmlAttributes((array) $this->attributes),
-            CSRFProtection::tokenTag(),
             htmlReady($this->label)
         );
     }

lib/classes/sidebar/OptionsWidget.php

@@ -34,7 +34,7 @@ class OptionsWidget extends ListWidget
         $toggle_url_off = isset($toggle_url_off) ? html_entity_decode($toggle_url_off) : null;
 
         $content = sprintf(
-            '<a href="%s" role="checkbox" aria-checked="%s" class="options-checkbox options-%s" %s>%s</a>',
+            '<button formaction="%s" role="checkbox" aria-checked="%s" class="as-link options-checkbox options-%s" %s>%s</button>',
             htmlReady($state && $toggle_url_off !== null ? $toggle_url_off : $toggle_url),
             $state ? 'true' : 'false',
             $state ? 'checked' : 'unchecked',
@@ -55,7 +55,7 @@ class OptionsWidget extends ListWidget
         $url = html_entity_decode($url);
 
         $content = sprintf(
-            '<a href="%s" role="radio" aria-checked="%s" class="options-radio options-%s" %s>%s</a>',
+            '<button formaction="%s" role="radio" aria-checked="%s" class="as-link options-radio options-%s" %s>%s</button>',
             htmlReady($url),
             $checked ? 'true' : 'false',
             $checked ? 'checked' : 'unchecked',

resources/assets/stylesheets/scss/buttons.scss

@@ -142,12 +142,13 @@ button.styleless {
     border: 0;
 }
 button.as-link {
+    background-color: transparent;
     border: none;
-    padding: 0px;
-    margin: 0px;
+    color: $base-color;
     cursor: pointer;
-    background-color: transparent;
+    margin: 0px;
+    padding: 0px;
     &:hover {
-        background-color: transparent;
+        color: $active-color;
     }
 }

resources/assets/stylesheets/scss/sidebar.scss

@@ -123,6 +123,11 @@ ul.widget-list {
         padding-left: 20px;
         word-wrap: break-word;
     }
+
+    button {
+        text-align: left;
+        width: 100%;
+    }
 }
 div#sidebar-navigation {
     div.sidebar-widget-header {
@@ -191,21 +196,6 @@ div#sidebar-navigation {
             }
         }
     }
-
-    button {
-        background: transparent;
-        border: 0;
-        color: $base-color;
-        margin: 0;
-        padding: 0;
-        text-align: left;
-        width: 100%;
-
-        &:hover {
-            color: $active-color;
-            cursor: pointer;
-        }
-    }
 }
 
 .sidebar-widget-cloud {

templates/sidebar/list-widget.php

-<ul class="<?= implode(' ', $css_classes) ?>" aria-label="<?= htmlReady($title) ?>">
-<? foreach ($elements as $index => $element): ?>
-    <? if ($element instanceof LinkElement): ?>
-        <? $icon = $element->icon ?? null ?>
-        <? if ($icon && $element->isDisabled()): ?>
-            <? $icon = $icon->copyWithRole('inactive') ?>
+<form method="post">
+    <?= CSRFProtection::tokenTag() ?>
+    <ul class="<?= implode(' ', $css_classes) ?>" aria-label="<?= htmlReady($title) ?>">
+    <? foreach ($elements as $index => $element): ?>
+        <? if ($element instanceof LinkElement): ?>
+            <? $icon = $element->icon ?? null ?>
+            <? if ($icon && $element->isDisabled()): ?>
+                <? $icon = $icon->copyWithRole('inactive') ?>
+            <? endif ?>
         <? endif ?>
-    <? endif ?>
-    <li id="<?= htmlReady($index) ?>"
-        <?= isset($icon) ? 'style="' . $icon->asCSS() .'"' : '' ?>
-        <?= !empty($element->active) ? 'class="active"' : '' ?>>
-        <?= $element->render() ?>
-    </li>
-<? endforeach; ?>
-</ul>
+        <li id="<?= htmlReady($index) ?>"
+            <?= isset($icon) ? 'style="' . $icon->asCSS() .'"' : '' ?>
+            <?= !empty($element->active) ? 'class="active"' : '' ?>>
+            <?= $element->render() ?>
+        </li>
+    <? endforeach; ?>
+    </ul>
+</form>