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:
parent
86491c6cdd
commit
834b0b20de
|
@ -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 -->
|
||||
|
||||
|
|
|
@ -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') ?>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
|
Loading…
Reference in New Issue