Add semantic section elements to dokuwiki template

This changes the divs for the main content, header, footer,
sidebar and page tools to their semantic equivalent
(main, header, footer, nav and nav again)
and adds ARIA labels where appropriate.
The media manager popup changes to have a main and a nav.
This commit is contained in:
Anika Henke 2021-03-06 10:59:24 +00:00
parent 86491c6cdd
commit 834b0b20de
5 changed files with 23 additions and 25 deletions

View File

@ -34,7 +34,7 @@ header('X-UA-Compatible: IE=edge,chrome=1');
<div class="wrapper group" id="dokuwiki__detail">
<!-- ********** CONTENT ********** -->
<div id="dokuwiki__content"><div class="pad group">
<main id="dokuwiki__content"><div class="pad group">
<?php html_msgarea() ?>
<?php if(!$ERROR): ?>
@ -82,20 +82,20 @@ header('X-UA-Compatible: IE=edge,chrome=1');
<div class="docInfo"><?php tpl_pageinfo(); ?></div>
*/ ?>
</div></div><!-- /content -->
</div></main><!-- /content -->
<hr class="a11y" />
<!-- PAGE ACTIONS -->
<?php if (!$ERROR): ?>
<div id="dokuwiki__pagetools">
<h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
<nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading">
<h3 class="a11y" id="dokuwiki__pagetools__heading"><?php echo $lang['page_tools']; ?></h3>
<div class="tools">
<ul>
<?php echo (new \dokuwiki\Menu\DetailMenu())->getListItems(); ?>
</ul>
</div>
</div>
</nav>
<?php endif; ?>
</div><!-- /wrapper -->

View File

@ -34,7 +34,8 @@ $showSidebar = $hasSidebar && ($ACT=='show');
<?php if($showSidebar): ?>
<!-- ********** ASIDE ********** -->
<div id="dokuwiki__aside"><div class="pad aside include group">
<nav id="dokuwiki__aside" aria-label="<?php echo $lang['sidebar']
?>"><div class="pad aside include group">
<h3 class="toggle"><?php echo $lang['sidebar'] ?></h3>
<div class="content"><div class="group">
<?php tpl_flush() ?>
@ -42,11 +43,11 @@ $showSidebar = $hasSidebar && ($ACT=='show');
<?php tpl_include_page($conf['sidebar'], true, true) ?>
<?php tpl_includeFile('sidebarfooter.html') ?>
</div></div>
</div></div><!-- /aside -->
</div></nav><!-- /aside -->
<?php endif; ?>
<!-- ********** CONTENT ********** -->
<div id="dokuwiki__content"><div class="pad group">
<main id="dokuwiki__content"><div class="pad group">
<?php html_msgarea() ?>
<div class="pageId"><span><?php echo hsc($ID) ?></span></div>
@ -63,19 +64,19 @@ $showSidebar = $hasSidebar && ($ACT=='show');
<div class="docInfo"><?php tpl_pageinfo() ?></div>
<?php tpl_flush() ?>
</div></div><!-- /content -->
<hr class="a11y" />
<hr class="a11y" />
</div></main><!-- /content -->
<!-- PAGE ACTIONS -->
<div id="dokuwiki__pagetools">
<h3 class="a11y"><?php echo $lang['page_tools']; ?></h3>
<nav id="dokuwiki__pagetools" aria-labelledby="dokuwiki__pagetools__heading">
<h3 class="a11y" id="dokuwiki__pagetools__heading"><?php echo $lang['page_tools']; ?></h3>
<div class="tools">
<ul>
<?php echo (new \dokuwiki\Menu\PageMenu())->getListItems(); ?>
</ul>
</div>
</div>
</nav>
</div><!-- /wrapper -->
<?php include('tpl_footer.php') ?>

View File

@ -27,18 +27,18 @@ header('X-UA-Compatible: IE=edge,chrome=1');
<body>
<div id="media__manager" class="dokuwiki">
<?php html_msgarea() ?>
<div id="mediamgr__aside"><div class="pad">
<nav id="mediamgr__aside"><div class="pad">
<h1><?php echo hsc($lang['mediaselect'])?></h1>
<?php /* keep the id! additional elements are inserted via JS here */?>
<div id="media__opts"></div>
<?php tpl_mediaTree() ?>
</div></div>
</div></nav>
<div id="mediamgr__content"><div class="pad">
<main id="mediamgr__content"><div class="pad">
<?php tpl_mediaContent() ?>
</div></div>
</div></main>
</div>
</body>
</html>

View File

@ -8,7 +8,7 @@ if (!defined('DOKU_INC')) die();
?>
<!-- ********** FOOTER ********** -->
<div id="dokuwiki__footer"><div class="pad">
<footer id="dokuwiki__footer"><div class="pad">
<?php tpl_license(''); // license text ?>
<div class="buttons">
@ -28,7 +28,6 @@ if (!defined('DOKU_INC')) die();
src="<?php echo tpl_basedir(); ?>images/button-dw.png" width="80" height="15"
alt="Driven by DokuWiki" /></a>
</div>
</div></div><!-- /footer -->
<?php
tpl_includeFile('footer.html');
<?php tpl_includeFile('footer.html'); ?>
</div></footer><!-- /footer -->

View File

@ -8,7 +8,7 @@ if (!defined('DOKU_INC')) die();
?>
<!-- ********** HEADER ********** -->
<div id="dokuwiki__header"><div class="pad group">
<header id="dokuwiki__header"><div class="pad group">
<?php tpl_includeFile('header.html') ?>
@ -78,7 +78,5 @@ if (!defined('DOKU_INC')) die();
</div>
<?php endif ?>
<hr class="a11y" />
</div></div><!-- /header -->
</div></header><!-- /header -->