♿️ 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:
parent
5afea000c1
commit
7c668fea4e
12 changed files with 33 additions and 26 deletions
|
@ -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>';
|
||||
|
|
|
@ -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>';
|
||||
|
|
|
@ -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>';
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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">';
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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">';
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>';
|
||||
|
|
|
@ -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">';
|
||||
|
|
|
@ -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>';
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue