diff --git a/lib/classes/sidebar/LinkElement.php b/lib/classes/sidebar/LinkElement.php index 8e3e2706e11d66c4b480211d6c64e6be035c6e69..a6bbe961b5f4fad524946a7e97ae68655fffa77d 100644 --- a/lib/classes/sidebar/LinkElement.php +++ b/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) ); } diff --git a/lib/classes/sidebar/OptionsWidget.php b/lib/classes/sidebar/OptionsWidget.php index 1e56ed1cd76d54921c9e1e505a0855dfa92af494..f50625c312906ad1ceeae822ee2c637102f3a380 100644 --- a/lib/classes/sidebar/OptionsWidget.php +++ b/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', diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss index 659a26a0a5b4ef7bb2b4ad64f1205978f4dcdc16..539a2a3e0c4edb4c839928d1667124b8f085cf54 100644 --- a/resources/assets/stylesheets/scss/buttons.scss +++ b/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; } } diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss index f03d7a2e8fbf2b997922fc53503244775548f0c8..493049c4e39d9e90c3de73d767a444cac4508fe1 100644 --- a/resources/assets/stylesheets/scss/sidebar.scss +++ b/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 { diff --git a/templates/sidebar/list-widget.php b/templates/sidebar/list-widget.php index 0507cfab7ceaf5cdf9623ed7e3c594994b143245..e9af862500b59f5c819c78d79cb083e0b4f3b64a 100644 --- a/templates/sidebar/list-widget.php +++ b/templates/sidebar/list-widget.php @@ -1,15 +1,18 @@ -<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>