️ Don't use titles in sidebar

Use labelled landmarks. It'll allow for the titles to be handled for the documents section only.
This commit is contained in:
Kazhnuz 2025-09-06 15:51:12 +02:00
parent 5afea000c1
commit 7c668fea4e
12 changed files with 33 additions and 26 deletions

View file

@ -25,8 +25,8 @@ class pluginAbout extends Plugin
public function siteSidebar()
{
$html = '<div class="plugin plugin-about">';
$html .= '<h2 class="plugin-label">' . $this->getValue('label') . '</h2>';
$html = '<div class="plugin plugin-about" aria-labelledby="plugin-about-label">';
$html .= '<p id="plugin-about-label" class="plugin-label">' . $this->getValue('label') . '</p>';
$html .= '<div class="plugin-content">';
$html .= Theme::getHomepagePresentation();
$html .= '</div>';

View file

@ -41,8 +41,8 @@ class pluginArchives extends Plugin
$filter = $url->filters('archive');
$html = '<nav class="plugin plugin-archives" aria-labelledby="plugin-archives-title">';
$html .= '<h2 class="plugin-label" id="plugin-archives-title">' . $this->getValue('label') . '</h2>';
$html = '<nav class="plugin plugin-archives" aria-labelledby="plugin-archives-label">';
$html .= '<p class="plugin-label" id="plugin-archives-label">' . $this->getValue('label') . '</p>';
$html .= '<div class="plugin-content">';
$html .= MenuHelper::getArchive($this->getValue('monthly'), "flat-list");
$html .= '</div>';

View file

@ -41,8 +41,8 @@ class pluginCategories extends Plugin
global $categories;
// HTML for sidebar
$html = '<nav class="plugin plugin-categories">';
$html .= '<h2 class="plugin-label">' . $this->getValue('label') . '</h2>';
$html = '<nav class="plugin plugin-categories" aria-labelledby="plugin-categories-label">';
$html .= '<p class="plugin-label" id="plugin-categories-label">' . $this->getValue('label') . '</p>';
$html .= '<div class="plugin-content">';
$html .= MenuHelper::getCategories($this->getValue('hideCero'), true);
$html .= '</div>';

View file

@ -69,12 +69,12 @@ class pluginHitCounter extends Plugin
}
// Show in the sidebar the number of visitors
$html = '<div class="plugin plugin-hit-counter">';
$html .= '<h2 class="plugin-label">' . $this->getValue('label') . '</h2>';
$html = '<section class="plugin plugin-hit-counter" aria-labelledby="plugin-hit-counter-label">';
$html .= '<p class="plugin-label" id="plugin-hit-counter-label">' . $this->getValue('label') . '</p>';
$html .= '<div class="plugin-content">';
$html .= '<div class="counter">' . $counter . '</div>';
$html .= '</div>';
$html .= '</div>';
$html .= '</section>';
return $html;
}

View file

@ -41,12 +41,12 @@ class pluginLastArticles extends Plugin
global $pages;
// HTML for sidebar
$html = '<nav class="plugin plugin-lastarticles">';
$html = '<nav class="plugin plugin-lastarticles" aria-labelledby="plugin-lastarticles-label">';
// Print the label if not empty
$label = $this->getValue('label');
if (!empty($label)) {
$html .= '<h2 class="plugin-label">' . $label . '</h2>';
$html .= '<p class="plugin-label" id="plugin-lastarticles-label">' . $label . '</p>';
}
$html .= '<div class="plugin-content">';

View file

@ -124,9 +124,9 @@ class pluginLinks extends Plugin
global $L;
// HTML for sidebar
$html = '<div class="plugin plugin-pages">';
$html = '<nav class="plugin plugin-links" aria-labelledby="plugin-links-label">';
if ($this->getValue('label')) {
$html .= '<h2 class="plugin-label">' . $this->getValue('label') . '</h2>';
$html .= '<p class="plugin-label" id="plugin-links-label">' . $this->getValue('label') . '</p>';
}
$html .= '<div class="plugin-content">';
$html .= '<ul>';
@ -146,7 +146,7 @@ class pluginLinks extends Plugin
$html .= '</ul>';
$html .= '</div>';
$html .= '</div>';
$html .= '</nav>';
return $html;
}

View file

@ -44,12 +44,12 @@ class pluginNavigation extends Plugin
global $pages;
// HTML for sidebar
$html = '<nav class="plugin plugin-navigation">';
$html = '<nav class="plugin plugin-navigation" aria-labelledby="plugin-navigation-label">';
// Print the label if not empty
$label = $this->getValue('label');
if (!empty($label)) {
$html .= '<h2 class="plugin-label">' . $label . '</h2>';
$html .= '<p class="plugin-label" id="plugin-navigation-label">' . $label . '</p>';
}
$html .= '<div class="plugin-content">';

View file

@ -49,15 +49,15 @@ class pluginSearch extends Plugin
{
global $L;
$html = '<div class="plugin plugin-search">';
$html .= '<h2 class="plugin-label">' . $this->getValue('label') . '</h2>';
$html = '<section class="plugin plugin-search" aria-labelledby="plugin-search-label">';
$html .= '<p class="plugin-label" id="plugin-search-label">' . $this->getValue('label') . '</p>';
$html .= '<div class="plugin-content">';
$html .= '<input type="text" dir="auto" id="jspluginSearchText" /> ';
if ($this->getValue('showButtonSearch')) {
$html .= '<input type="button" value="' . $L->get('Search') . '" onClick="pluginSearch()" />';
}
$html .= '</div>';
$html .= '</div>';
$html .= '</section>';
$DOMAIN_BASE = DOMAIN_BASE;
$html .= <<<EOF

View file

@ -28,8 +28,8 @@ class pluginSocials extends Plugin {
global $L;
global $url;
$html = '<div class="plugin plugin-archives">';
$html .= '<h2 class="plugin-label">' . $this->getValue('label') . '</h2>';
$html = '<div class="plugin plugin-archives" aria-labelledby="plugin-archives-label">';
$html .= '<p class="plugin-label" id="plugin-archives-label">' . $this->getValue('label') . '</p>';
$html .= '<div class="plugin-content">';
$html .= Theme::listSiteSocials(true, true);
$html .= '</div>';

View file

@ -44,12 +44,12 @@ class pluginStaticPages extends Plugin
global $pages;
// HTML for sidebar
$html = '<nav class="plugin plugin-static-pages">';
$html = '<nav class="plugin plugin-static-pages" aria-labelledby="plugin-static-pages-label">';
// Print the label if not empty
$label = $this->getValue('label');
if (!empty($label)) {
$html .= '<h2 class="plugin-label">' . $label . '</h2>';
$html .= '<p class="plugin-label" id="plugin-static-pages-label">' . $label . '</p>';
}
$html .= '<div class="plugin-content">';

View file

@ -31,8 +31,8 @@ class pluginTags extends Plugin
$filter = $url->filters('tag');
$html = '<nav class="plugin plugin-tags">';
$html .= '<h2 class="plugin-label">' . $this->getValue('label') . '</h2>';
$html = '<nav class="plugin plugin-tags" aria-labelledby="plugin-tags-label">';
$html .= '<p class="plugin-label" id="plugin-tags-label">' . $this->getValue('label') . '</p>';
$html .= '<div class="plugin-content">';
$html .= MenuHelper::getTags(1, "flat-list");
$html .= '</div>';

View file

@ -123,9 +123,10 @@ aside {
background-color: var(--well-color);
padding: 16px;
h2 {
.plugin-label {
font-size: 1rem;
margin-bottom: 0.5rem;
font-weight: bold;
}
.plugin {
@ -185,6 +186,12 @@ article {
margin: 0 0 1rem 0
}
article iframe {
height: auto;
width: 100%;
display: block;
}
.no-margin {
margin: 0;
}