From e3c988b95f9d7c13b9346552fdf84c57dc3bfa08 Mon Sep 17 00:00:00 2001
From: Moritz Strohm <strohm@data-quest.de>
Date: Wed, 17 Nov 2021 15:23:27 +0000
Subject: [PATCH] TIC #394
---
lib/classes/ContentGroupMenu.php | 7 +++-
lib/classes/sidebar/SearchWidget.php | 19 -----------
lib/classes/sidebar/SidebarWidget.php | 33 +++++++++++++++++--
.../assets/stylesheets/less/skiplinks.less | 7 ++++
templates/footer.php | 1 +
templates/header.php | 10 ++++--
templates/helpbar/helpbar.php | 3 +-
templates/shared/contentgroup-row.php | 3 +-
templates/sidebar/sidebar.php | 9 +++++
templates/skiplinks.php | 7 ++--
templates/tabs.php | 2 +-
11 files changed, 69 insertions(+), 32 deletions(-)
diff --git a/lib/classes/ContentGroupMenu.php b/lib/classes/ContentGroupMenu.php
index d7533faa370..dfc0cef6894 100644
--- a/lib/classes/ContentGroupMenu.php
+++ b/lib/classes/ContentGroupMenu.php
@@ -32,6 +32,7 @@ class ContentGroupMenu
private $rows = 1;
private $columns = 1;
private $image = null;
+ private $image_link_attributes = [];
private $label;
private $aria_label;
@@ -223,6 +224,7 @@ class ContentGroupMenu
if ($this->image) {
$template->image = $this->image;
+ $template->image_link_attributes = $this->image_link_attributes;
} else {
$template->image = "<div></div><div></div><div></div>";
}
@@ -267,10 +269,13 @@ class ContentGroupMenu
* Sets the icon of the menu.
*
* @param String $menu_image image html for the menu
+ *
+ * @param array $image_link_attributes Additional HTML attributes for the link that surrounds the image.
*/
- public function setIcon($menu_image)
+ public function setIcon($menu_image, array $image_link_attributes = [])
{
$this->image = $menu_image;
+ $this->image_link_attributes = $image_link_attributes;
}
/**
diff --git a/lib/classes/sidebar/SearchWidget.php b/lib/classes/sidebar/SearchWidget.php
index 39bf1ee94fa..2b7979e43d8 100644
--- a/lib/classes/sidebar/SearchWidget.php
+++ b/lib/classes/sidebar/SearchWidget.php
@@ -34,24 +34,6 @@ class SearchWidget extends SidebarWidget
$this->template = 'sidebar/search-widget';
}
- /**
- * Sets the id for the form element.
- */
- public function setId($id)
- {
- $this->id = $id;
- }
-
- /**
- * Returns the id for the form element.
- *
- * @return mixed String containing the id or null if no id has been set.
- */
- public function getId()
- {
- return $this->id;
- }
-
/**
* Sets the request method used for the form.
*/
@@ -143,7 +125,6 @@ class SearchWidget extends SidebarWidget
$this->template_variables['url_params'] = $query_params;
$this->template_variables['method'] = $this->method;
- $this->template_variables['id'] = $this->id;
foreach ($this->needles as $index => $needle) {
if ($needle['quick_search']) {
diff --git a/lib/classes/sidebar/SidebarWidget.php b/lib/classes/sidebar/SidebarWidget.php
index 1957eda7598..026ca0cda70 100644
--- a/lib/classes/sidebar/SidebarWidget.php
+++ b/lib/classes/sidebar/SidebarWidget.php
@@ -9,11 +9,37 @@
*/
class SidebarWidget extends Widget
{
+ protected $id = '';
+
+
public function __construct()
{
$this->layout = 'sidebar/widget-layout.php';
}
+
+ /**
+ * Sets the ID of the HTML element that represents the widget.
+ *
+ * @param $id The element-ID to be used for the widget.
+ *
+ */
+ public function setId(string $id)
+ {
+ $this->id = $id;
+ }
+
+
+ /**
+ * Returns the ID of this widget, if it is set.
+ *
+ * @return string The ID of the widget or an empty string, if it is not set.
+ */
+ public function getId() : string
+ {
+ return $this->id;
+ }
+
/**
* Sets the title of the widget.
*
@@ -46,7 +72,7 @@ class SidebarWidget extends Widget
{
$this->extra = $extra;
}
-
+
public function getExtra()
{
return $this->extra;
@@ -65,6 +91,9 @@ class SidebarWidget extends Widget
*/
public function render($variables = [])
{
+ if ($this->id) {
+ $this->template_variables['id'] = $this->id;
+ }
return parent::render($variables);
}
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/less/skiplinks.less b/resources/assets/stylesheets/less/skiplinks.less
index edbf09a17cf..2da49110bfb 100644
--- a/resources/assets/stylesheets/less/skiplinks.less
+++ b/resources/assets/stylesheets/less/skiplinks.less
@@ -23,6 +23,13 @@
#skiplink_list {
display: none;
+ button.skiplink {
+ border: 0;
+ background-color: #fff;
+ color: @base-color;
+ line-height: 1em;
+ margin-bottom: 0.1em;
+ }
}
body.enable-skiplinks {
diff --git a/templates/footer.php b/templates/footer.php
index 1823e2b1459..0ea313bd34c 100644
--- a/templates/footer.php
+++ b/templates/footer.php
@@ -1,4 +1,5 @@
<!-- Beginn Footer -->
+<?= SkipLinks::addIndex(_('Fußzeile'), 'layout_footer',900) ?>
<div id="layout_footer">
<? if (is_object($GLOBALS['user']) && $GLOBALS['user']->id != 'nobody') : ?>
<div id="footer">
diff --git a/templates/header.php b/templates/header.php
index 87005524252..8f2992130ae 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -56,6 +56,7 @@ if (isset($_COOKIE['navigation-length'])) {
<? if (PageLayout::hasCustomQuicksearch()): ?>
<?= PageLayout::getCustomQuicksearch() ?>
<? else: ?>
+ <? SkipLinks::addIndex(_('Suche'), 'globalsearch-input', 910) ?>
<li id="quicksearch_item">
<script>
var selectSem = function (seminar_id, name) {
@@ -119,7 +120,10 @@ if (isset($_COOKIE['navigation-length'])) {
$action_menu->addAttribute('data-action-menu-reposition', 'false');
$action_menu->setLabel(User::findCurrent()->getFullName());
$action_menu->setAriaLabel(_("Profilmenü"));
- $action_menu->setIcon(Avatar::getAvatar(User::findCurrent()->id)->getImageTag(Avatar::MEDIUM));
+ $action_menu->setIcon(
+ Avatar::getAvatar(User::findCurrent()->id)->getImageTag(Avatar::MEDIUM),
+ ['id' => 'header_avatar_image_link']
+ );
foreach (Navigation::getItem('/avatar') as $subnav) {
$action_menu->addLink(
@@ -128,7 +132,7 @@ if (isset($_COOKIE['navigation-length'])) {
$subnav->getImage()
);
}
- SkipLinks::addIndex(_("Profilmenü"), "header_avatar_menu", 2);
+ SkipLinks::addIndex(_("Profilmenü"), "header_avatar_image_link", 1);
?>
<?= $action_menu->render(); ?>
</div>
@@ -148,7 +152,7 @@ if (isset($_COOKIE['navigation-length'])) {
</div>
-->
- <? SkipLinks::addIndex(_('Hauptnavigation'), 'barTopMenu', 1); ?>
+ <? SkipLinks::addIndex(_('Hauptnavigation'), 'barTopMenu', 2); ?>
<ul id="barTopMenu" role="navigation" <? if (count($header_nav['hidden']) > 0) echo 'class="overflown"'; ?>>
<? foreach ($header_nav['visible'] as $path => $nav): ?>
<?= $this->render_partial(
diff --git a/templates/helpbar/helpbar.php b/templates/helpbar/helpbar.php
index 5810049e5f3..2aedb8ca109 100644
--- a/templates/helpbar/helpbar.php
+++ b/templates/helpbar/helpbar.php
@@ -1,5 +1,6 @@
<div class="helpbar-container">
- <a href="#" class="helpbar-toggler" data-toggles=".helpbar" title="<?= _('Hilfelasche anzeigen/verstecken') ?>">
+ <?= SkipLinks::addIndex(_('Tipps & Hilfe'), 'helpbar_icon', 920) ?>
+ <a id="helpbar_icon" href="#" class="helpbar-toggler" data-toggles=".helpbar" title="<?= _('Hilfelasche anzeigen/verstecken') ?>">
<?= Icon::create('question-circle')->asImg(24) ?>
</a>
<div class="helpbar" <? if (!$open) echo 'style="display: none"'; ?>>
diff --git a/templates/shared/contentgroup-row.php b/templates/shared/contentgroup-row.php
index a50bd855819..f374a360788 100644
--- a/templates/shared/contentgroup-row.php
+++ b/templates/shared/contentgroup-row.php
@@ -1,7 +1,8 @@
<? // class "action-menu" will be set from API ?>
<nav <?= arrayToHtmlAttributes($attributes) ?>>
<a class="action-menu-icon" title="<?= htmlReady($label) ?>"
- aria-expanded="false" aria-label="<?= htmlReady($aria_label) ?>" href="#">
+ aria-expanded="false" aria-label="<?= htmlReady($aria_label) ?>" href="#"
+ <?= $image_link_attributes ? arrayToHtmlAttributes($image_link_attributes) : '' ?>>
<?= $image ?>
</a>
<div class="action-menu-content">
diff --git a/templates/sidebar/sidebar.php b/templates/sidebar/sidebar.php
index a624596e296..6c40e57ecda 100644
--- a/templates/sidebar/sidebar.php
+++ b/templates/sidebar/sidebar.php
@@ -20,6 +20,15 @@
</div>
<? foreach ($widgets as $index => $widget): ?>
+ <?
+ if ($widget instanceof NavigationWidget) {
+ $widget->setId('nav_layer_3');
+ SkipLinks::addIndex(_('Dritte Navigationsebene'), 'nav_layer_3', 20, false);
+ } elseif ($widget instanceof ActionsWidget) {
+ $widget->setId('sidebar_actions');
+ SkipLinks::addIndex(_('Aktionen'), 'sidebar_actions', 21, false);
+ }
+ ?>
<?= $widget->render(['base_class' => 'sidebar']) ?>
<? endforeach; ?>
</section>
diff --git a/templates/skiplinks.php b/templates/skiplinks.php
index 0cb1800fb6a..b057c589ee8 100644
--- a/templates/skiplinks.php
+++ b/templates/skiplinks.php
@@ -3,16 +3,15 @@
?>
<? if ($navigation instanceof Navigation && iterator_count($navigation) > 0) : ?>
<ul role="navigation" id="skiplink_list">
- <? $i = 1 ?>
<? foreach ($navigation as $nav) : ?>
<li>
<? if (mb_substr($url = $nav->getURL(), 0, 1) == '#') : ?>
- <a href="<?= $url ?>" onclick="STUDIP.SkipLinks.setActiveTarget('<?= $url ?>');" tabindex="<?= $i++ ?>"><?= htmlReady($nav->getTitle()) ?></a>
+ <button class="skiplink" onclick="STUDIP.SkipLinks.setActiveTarget('<?= $url ?>');"><?= htmlReady($nav->getTitle()) ?></button>
<? else : ?>
<? if (is_internal_url($url)) : ?>
- <a href="<?= URLHelper::getLink($url) ?>" tabindex="<?= $i++ ?>"><?= htmlReady($nav->getTitle()) ?></a>
+ <a href="<?= URLHelper::getLink($url) ?>"><?= htmlReady($nav->getTitle()) ?></a>
<? else : ?>
- <a href="<?= htmlReady($url) ?>" tabindex="<?= $i++ ?>"><?= htmlReady($nav->getTitle()) ?></a>
+ <a href="<?= htmlReady($url) ?>"><?= htmlReady($nav->getTitle()) ?></a>
<? endif ?>
<? endif ?>
</li>
diff --git a/templates/tabs.php b/templates/tabs.php
index 02ce34803c8..eaf3876131e 100644
--- a/templates/tabs.php
+++ b/templates/tabs.php
@@ -8,7 +8,7 @@ foreach (Navigation::getItem("/")->getSubNavigation() as $path => $nav) {
$ebene3 = [];
?>
<div class="tabs_wrapper">
- <? SkipLinks::addIndex(_('Erste Reiternavigation'), 'tabs', 10); ?>
+ <? SkipLinks::addIndex(_('Zweite Navigationsebene'), 'tabs', 10); ?>
<ul id="tabs" role="navigation">
<? if (!empty($navigation)): ?>
<? foreach ($navigation as $path => $nav) : ?>
--
GitLab