use nav+ul element for "you are here"

As described in the common idioms of the HTML5 spec, mark up navigation as a list inside a `nav` element for better semantics and accessibility.

see:

  * http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#rel-up
  * http://lists.w3.org/Archives/Public/public-html/2013Nov/thread.html#msg6
  * https://dl.dropboxusercontent.com/u/377471/breadcrumb.html

for discussion and background.

3 files changed, 56 insertions, 15 deletions

diff --git a/inc/template.php b/inc/template.php
index 3bccb0bd8..1fad18271 100644
--- a/inc/template.php
+++ b/inc/template.php
@@ -893,12 +893,12 @@ function tpl_breadcrumbs($sep = '•') {
  * @author Nigel McNie <oracle.shinoda@gmail.com>
  * @author Sean Coates <sean@caedmon.net>
  * @author <fredrik@averpil.com>
- * @todo   May behave strangely in RTL languages
+ * @author Mark C. Prins <mprins@users.sf.net>
  *
  * @param string $sep Separator between entries
  * @return bool
  */
-function tpl_youarehere($sep = ' » ') {
+function tpl_youarehere($sep = ' → ') {
     global $conf;
     global $ID;
     global $lang;
@@ -909,12 +909,15 @@ function tpl_youarehere($sep = ' » ') {
     $parts = explode(':', $ID);
     $count = count($parts);
 
-    echo '<span class="bchead">'.$lang['youarehere'].' </span>';
-
+    echo '<nav><h2 class="bchead">'.$lang['youarehere'].': </h2>';
+    echo '<ul class="navlist">';
     // always print the startpage
-    echo '<span class="home">';
-    tpl_pagelink(':'.$conf['start']);
-    echo '</span>';
+    if ($count > 1) {
+        echo '<li class="home">'.html_wikilink(':'.$conf['start']).$sep.'</li>';
+    } else {
+        echo '<li class="home">'.$conf['start'].'</li>';
+    }
+
 
     // print intermediate namespace links
     $part = '';
@@ -923,18 +926,28 @@ function tpl_youarehere($sep = ' » ') {
         $page = $part;
         if($page == $conf['start']) continue; // Skip startpage
 
-        // output
-        echo $sep;
-        tpl_pagelink($page);
+        echo '<li>'.html_wikilink($page);
+        if ($i < $count - 2) {
+            echo $sep.'</li>';
+        } else {
+            echo '</li>';
+        }
     }
 
     // print current page, skipping start page, skipping for namespace index
     resolve_pageid('', $page, $exists);
-    if(isset($page) && $page == $part.$parts[$i]) return true;
+    if(isset($page) && $page == $part.$parts[$i]) {
+        echo '</li></ul></nav>';
+        return true;
+    }
+
     $page = $part.$parts[$i];
-    if($page == $conf['start']) return true;
-    echo $sep;
-    tpl_pagelink($page);
+    if($page == $conf['start']) {
+        echo '</li></ul></nav>';
+        return true;
+    }
+
+    echo $sep.'</li><li class="curid">'.noNSorNS($page).'</li></ul></nav>';
     return true;
 }
 
diff --git a/lib/tpl/dokuwiki/css/mixins.less b/lib/tpl/dokuwiki/css/mixins.less
index a88767e97..4b15bb600 100644
--- a/lib/tpl/dokuwiki/css/mixins.less
+++ b/lib/tpl/dokuwiki/css/mixins.less
@@ -7,4 +7,17 @@
     background: -o-linear-gradient(     @declaration);
     background: -ms-linear-gradient(    @declaration);
     background: linear-gradient(        @declaration);
-}
\ No newline at end of file
+}
+
+/**
+ * provides inline list styling.
+ */
+.inline-list(){
+    list-style-type: none;
+    
+    & li {
+        margin: 0;
+        padding: 0;
+        display: inline;
+    }
+}
diff --git a/lib/tpl/dokuwiki/css/structure.less b/lib/tpl/dokuwiki/css/structure.less
index 3ea2f83eb..f7dea3948 100644
--- a/lib/tpl/dokuwiki/css/structure.less
+++ b/lib/tpl/dokuwiki/css/structure.less
@@ -87,3 +87,18 @@ body {
 #dokuwiki__footer {
     clear: both;
 }
+
+.dokuwiki .navlist {
+    display: inline;
+    padding: 0;
+    .inline-list;
+}
+
+.bchead {
+    display: inline;
+    font-size: inherit;
+}
+
+.curid {
+    font-weight: bold;
+}