mirror of
https://github.com/processwire/processwire.git
synced 2025-08-11 09:14:58 +02:00
Merge branch 'marcus-herrmann-fix/a11y-core-site-profiles' into dev
This commit is contained in:
Ryan Cramer
@@ -1,9 +1,9 @@
|
||||
|
||||
|
||||
</div><!--/#main-->
|
||||
</main>
|
||||
|
||||
<!-- footer -->
|
||||
<footer id='footer'>
|
||||
<footer id='footer' role="contentinfo">
|
||||
<p>
|
||||
Powered by <a href='http://processwire.com'>ProcessWire CMS</a> /
|
||||
<?php
|
||||
|
||||
@@ -22,7 +22,7 @@ function renderNav(PageArray $items) {
|
||||
|
||||
if(!$items->count()) return;
|
||||
|
||||
echo "<ul class='nav'>";
|
||||
echo "<ul class='nav' role='navigation'>";
|
||||
|
||||
// cycle through all the items
|
||||
foreach($items as $item) {
|
||||
@@ -67,15 +67,16 @@ function renderNavTree($items, $maxDepth = 3) {
|
||||
|
||||
// $out is where we store the markup we are creating in this function
|
||||
// start our <ul> markup
|
||||
echo "<ul class='nav nav-tree'>";
|
||||
echo "<ul class='nav nav-tree' role='navigation'>";
|
||||
|
||||
// cycle through all the items
|
||||
foreach($items as $item) {
|
||||
|
||||
// markup for the list item...
|
||||
// if current item is the same as the page being viewed, add a "current" class to it
|
||||
// if current item is the same as the page being viewed, add a "current" class and
|
||||
// visually hidden text for screen readers to it
|
||||
if($item->id == wire('page')->id) {
|
||||
echo "<li class='current'>";
|
||||
echo "<li class='current'><span class='visually-hidden'>Current page: </span>";
|
||||
} else {
|
||||
echo "<li>";
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<body class='has-sidebar'>
|
||||
|
||||
<!-- top navigation -->
|
||||
<ul class='topnav'><?php
|
||||
<ul class='topnav' role='navigation'><?php
|
||||
|
||||
// top navigation consists of homepage and its visible children
|
||||
$homepage = $pages->get('/');
|
||||
@@ -25,7 +25,7 @@
|
||||
if($child->id == $page->rootParent->id) {
|
||||
// this $child page is currently being viewed (or one of it's children/descendents)
|
||||
// so we highlight it as the current page in the navigation
|
||||
echo "<li class='current'><a href='$child->url'>$child->title</a></li>";
|
||||
echo "<li class='current'><span class='visually-hidden'>Current page: </span><a href='$child->url'>$child->title</a></li>";
|
||||
} else {
|
||||
echo "<li><a href='$child->url'>$child->title</a></li>";
|
||||
}
|
||||
@@ -40,12 +40,13 @@
|
||||
|
||||
<!-- search form -->
|
||||
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
|
||||
<input type='text' name='q' placeholder='Search' value='' />
|
||||
<button type='submit' name='submit'>Search</button>
|
||||
<label for='search' class='visually-hidden'>Search:</label>
|
||||
<input type='text' name='q' id='search' placeholder='Search' value='' />
|
||||
<button type='submit' name='submit' class='visually-hidden'>Search</button>
|
||||
</form>
|
||||
|
||||
<!-- breadcrumbs -->
|
||||
<div class='breadcrumbs'><?php
|
||||
<div class='breadcrumbs' role='navigation' aria-label='You are here:'><?php
|
||||
|
||||
// breadcrumbs are the current page's parents
|
||||
foreach($page->parents() as $item) {
|
||||
@@ -56,5 +57,5 @@
|
||||
|
||||
?></div>
|
||||
|
||||
<div id='main'>
|
||||
<main id='main'>
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ include('./_head.php'); // include header markup ?>
|
||||
|
||||
?></div><!-- end content -->
|
||||
|
||||
<div id='sidebar'><?php
|
||||
<aside id='sidebar'><?php
|
||||
|
||||
// rootParent is the parent page closest to the homepage
|
||||
// you can think of this as the "section" that the user is in
|
||||
@@ -40,6 +40,6 @@ include('./_head.php'); // include header markup ?>
|
||||
// output sidebar text if the page has it
|
||||
echo $page->sidebar;
|
||||
|
||||
?></div><!-- end sidebar -->
|
||||
?></aside><!-- end sidebar -->
|
||||
|
||||
<?php include('./_foot.php'); // include footer markup ?>
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
* 3. Main content and sidebar
|
||||
* 4. Footer
|
||||
* 5. Media queries for responsive layout
|
||||
* 6. Accessibility helpers
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -124,9 +125,6 @@ form.search {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
form.search button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
clear: both;
|
||||
@@ -291,3 +289,43 @@ figure figcaption {
|
||||
font-size: 115%;
|
||||
}
|
||||
}
|
||||
|
||||
/*********************************************************************
|
||||
* 6. Accessibility helpers
|
||||
*
|
||||
*/
|
||||
|
||||
/* Hide visually, but remain approachable for screenreader */
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Show bypass link on hover */
|
||||
|
||||
.element-focusable:focus {
|
||||
clip: auto;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Sample styling for bypass link */
|
||||
|
||||
.bypass-to-main:focus {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
if($page->numChildren) {
|
||||
|
||||
echo "<ul class='nav'>";
|
||||
echo "<ul class='nav' role='navigation'>";
|
||||
|
||||
foreach($page->children as $child) {
|
||||
echo "<li><p><a href='{$child->url}'>{$child->title}</a><br />";
|
||||
@@ -24,7 +24,7 @@ if($page->numChildren) {
|
||||
|
||||
</div><!--/content-->
|
||||
|
||||
<div id="footer" class="footer">
|
||||
<div id="footer" class="footer" role="contentinfo">
|
||||
<div class="container">
|
||||
<p>Powered by <a href='http://processwire.com'>ProcessWire Open Source CMS/CMF</a></p>
|
||||
</div>
|
||||
|
||||
@@ -32,6 +32,8 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="#bodycopy" class="visually-hidden element-focusable bypass-to-main">Skip to content</a>
|
||||
|
||||
<p id='bgtitle'><?php
|
||||
|
||||
// print the section title as big faded text that appears near the top left of the page
|
||||
@@ -45,11 +47,12 @@
|
||||
|
||||
<a href='<?php echo $config->urls->root; ?>'><p id='logo'>ProcessWire</p></a>
|
||||
|
||||
<ul id='topnav'><?php
|
||||
<ul id='topnav' role='navigation'><?php
|
||||
|
||||
// Create the top navigation list by listing the children of the homepage.
|
||||
// If the section we are in is the current (identified by $page->rootParent)
|
||||
// then note it with <a class='on'> so we can style it differently in our CSS.
|
||||
// then note it with <a class='on'> so we can style it differently in our CSS
|
||||
// and add a text that is visually hidden, but available for screen readers.
|
||||
// In this case we also want the homepage to be part of our top navigation,
|
||||
// so we prepend it to the pages we cycle through:
|
||||
|
||||
@@ -58,19 +61,23 @@
|
||||
$children->prepend($homepage);
|
||||
|
||||
foreach($children as $child) {
|
||||
if ($child === $page->rootParent) {
|
||||
$class = " class='on'";
|
||||
$indicator = "<span class='visually-hidden'>Current page: </span>";
|
||||
}
|
||||
$class = $child === $page->rootParent ? " class='on'" : '';
|
||||
echo "<li><a$class href='{$child->url}'>{$child->title}</a></li>";
|
||||
echo "<li><a$class href='{$child->url}'>$indicator{$child->title}</a></li>";
|
||||
}
|
||||
|
||||
?></ul>
|
||||
|
||||
<ul id='breadcrumb'><?php
|
||||
<ul id='breadcrumb' role='navigation' aria-label='You are here:'><?php
|
||||
|
||||
// Create breadcrumb navigation by cycling through the current $page's
|
||||
// parents in order, linking to each:
|
||||
|
||||
foreach($page->parents as $parent) {
|
||||
echo "<li><a href='{$parent->url}'>{$parent->title}</a> > </li>";
|
||||
echo "<li><a href='{$parent->url}'>{$parent->title}</a> <span class='visually-hidden'>></span> </li>";
|
||||
}
|
||||
|
||||
?></ul>
|
||||
@@ -87,6 +94,7 @@
|
||||
?></h1>
|
||||
|
||||
<form id='search_form' action='<?php echo $config->urls->root?>search/' method='get'>
|
||||
<label for='search_query' class='visually-hidden'>Search:</label>
|
||||
<input type='text' name='q' id='search_query' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES, 'UTF-8'); ?>' />
|
||||
<button type='submit' id='search_submit'>Search</button>
|
||||
</form>
|
||||
@@ -111,7 +119,7 @@
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div id="sidebar">
|
||||
<div id="sidebar" role='complementary'>
|
||||
|
||||
<?php
|
||||
|
||||
@@ -128,7 +136,7 @@
|
||||
// We have determined that we're not on the homepage
|
||||
// and that this section has child pages, so make navigation:
|
||||
|
||||
echo "<ul id='subnav' class='nav'>";
|
||||
echo "<ul id='subnav' class='nav' role='navigation'>";
|
||||
|
||||
foreach($page->rootParent->children as $child) {
|
||||
$class = $page === $child ? " class='on'" : '';
|
||||
@@ -156,5 +164,5 @@
|
||||
|
||||
</div><!--/sidebar-->
|
||||
|
||||
<div id="bodycopy">
|
||||
<div id="bodycopy" role="main">
|
||||
|
||||
|
||||
@@ -502,3 +502,45 @@ body, input, textarea, table {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/*********************************************************************
|
||||
* 6. Accessibility helpers
|
||||
*
|
||||
*/
|
||||
|
||||
/* Hide visually, but remain approachable for screenreader */
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Show bypass link on hover */
|
||||
|
||||
.element-focusable:focus {
|
||||
clip: auto;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Sample styling for bypass link */
|
||||
|
||||
.bypass-to-main:focus {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -41,12 +41,14 @@
|
||||
</head>
|
||||
<body class="<?php if($sidebar) echo "has-sidebar "; ?>">
|
||||
|
||||
<a href="#main" class="visually-hidden element-focusable bypass-to-main">Skip to content</a>
|
||||
|
||||
<!-- top navigation -->
|
||||
<ul class='topnav'><?php
|
||||
<ul class='topnav' role='navigation'><?php
|
||||
// top navigation consists of homepage and its visible children
|
||||
foreach($homepage->and($homepage->children) as $item) {
|
||||
if($item->id == $page->rootParent->id) {
|
||||
echo "<li class='current'>";
|
||||
echo "<li class='current'><span class='visually-hidden'>Current page: </span>";
|
||||
} else {
|
||||
echo "<li>";
|
||||
}
|
||||
@@ -59,12 +61,13 @@
|
||||
|
||||
<!-- search form-->
|
||||
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
|
||||
<input type='text' name='q' placeholder='Search' value='<?php echo $sanitizer->entities($input->whitelist('q')); ?>' />
|
||||
<button type='submit' name='submit'>Search</button>
|
||||
<label for='search' class='visually-hidden'>Search:</label>
|
||||
<input type='text' name='q' placeholder='Search' id='search' value='<?php echo $sanitizer->entities($input->whitelist('q')); ?>' />
|
||||
<button type='submit' name='submit' class='visually-hidden'>Search</button>
|
||||
</form>
|
||||
|
||||
<!-- breadcrumbs -->
|
||||
<div class='breadcrumbs'><?php
|
||||
<div class='breadcrumbs' role='navigation' aria-label='You are here:'><?php
|
||||
// breadcrumbs are the current page's parents
|
||||
foreach($page->parents() as $item) {
|
||||
echo "<span><a href='$item->url'>$item->title</a></span> ";
|
||||
@@ -83,9 +86,9 @@
|
||||
|
||||
<!-- sidebar content -->
|
||||
<?php if($sidebar): ?>
|
||||
<div id='sidebar'>
|
||||
<aside id='sidebar'>
|
||||
<?php echo $sidebar; ?>
|
||||
</div>
|
||||
</aside>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
* 3. Main content and sidebar
|
||||
* 4. Footer
|
||||
* 5. Media queries for responsive layout
|
||||
* 6. Accessibility helpers
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -124,9 +125,6 @@ form.search {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
form.search button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
clear: both;
|
||||
@@ -297,3 +295,42 @@ figure figcaption {
|
||||
font-size: 115%;
|
||||
}
|
||||
}
|
||||
/*********************************************************************
|
||||
* 6. Accessibility helpers
|
||||
*
|
||||
*/
|
||||
|
||||
/* Hide visually, but remain approachable for screenreader */
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Show bypass link on hover */
|
||||
|
||||
.element-focusable:focus {
|
||||
clip: auto;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Sample styling for bypass link */
|
||||
|
||||
.bypass-to-main:focus {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -60,8 +60,10 @@
|
||||
</head>
|
||||
<body class="<?php if($sidebar) echo "has-sidebar"; ?>">
|
||||
|
||||
<a href="#main" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a>
|
||||
|
||||
<!-- language switcher / navigation -->
|
||||
<ul class='languages'><?php
|
||||
<ul class='languages' role='navigation'><?php
|
||||
foreach($languages as $language) {
|
||||
if(!$page->viewable($language)) continue; // is page viewable in this language?
|
||||
if($language->id == $user->language->id) {
|
||||
@@ -76,11 +78,11 @@
|
||||
?></ul>
|
||||
|
||||
<!-- top navigation -->
|
||||
<ul class='topnav'><?php
|
||||
<ul class='topnav' role='navigation'><?php
|
||||
// top navigation consists of homepage and its visible children
|
||||
foreach($homepage->and($homepage->children) as $item) {
|
||||
if($item->id == $page->rootParent->id) {
|
||||
echo "<li class='current'>";
|
||||
echo "<li class='current'><span class='visually-hidden'>" . _x('Current page:', 'navigation') . " </span>";
|
||||
} else {
|
||||
echo "<li>";
|
||||
}
|
||||
@@ -92,7 +94,7 @@
|
||||
?></ul>
|
||||
|
||||
<!-- breadcrumbs -->
|
||||
<div class='breadcrumbs'><?php
|
||||
<div class='breadcrumbs' role='navigation' aria-label='<?php echo _x('You are here:', 'breadcrumbs'); ?>'><?php
|
||||
// breadcrumbs are the current page's parents
|
||||
foreach($page->parents() as $item) {
|
||||
echo "<span><a href='$item->url'>$item->title</a></span> ";
|
||||
@@ -103,12 +105,13 @@
|
||||
|
||||
<!-- search engine -->
|
||||
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
|
||||
<input type='text' name='q' placeholder='<?php echo _x('Search', 'placeholder'); ?>' />
|
||||
<button type='submit' name='submit'><?php echo _x('Search', 'button'); ?></button>
|
||||
<label for='search' class='visually-hidden'><?php echo _x('Search:', 'label'); ?></label>
|
||||
<input type='text' name='q' id='search' placeh older='<?php echo _x('Search', 'placeholder'); ?>' />
|
||||
<button type='submit' name='submit' class='visually-hidden'><?php echo _x('Search', 'button'); ?></button>
|
||||
</form>
|
||||
|
||||
|
||||
<div id='main'>
|
||||
<main id='main'>
|
||||
|
||||
<!-- main content -->
|
||||
<div id='content'>
|
||||
@@ -121,15 +124,15 @@
|
||||
<!-- sidebar content -->
|
||||
<?php if($sidebar): ?>
|
||||
|
||||
<div id='sidebar'>
|
||||
<aside id='sidebar'>
|
||||
|
||||
<?php echo $sidebar; ?>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- footer -->
|
||||
<footer id='footer'>
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
* 3. Main content and sidebar
|
||||
* 4. Footer
|
||||
* 5. Media queries for responsive layout
|
||||
* 6. Accessibility helpers
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -156,9 +157,6 @@ form.search {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
form.search button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
font-size: 80%;
|
||||
@@ -351,3 +349,43 @@ figure figcaption {
|
||||
font-size: 115%;
|
||||
}
|
||||
}
|
||||
|
||||
/*********************************************************************
|
||||
* 6. Accessibility helpers
|
||||
*
|
||||
*/
|
||||
|
||||
/* Hide visually, but remain approachable for screenreader */
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Show bypass link on hover */
|
||||
|
||||
.element-focusable:focus {
|
||||
clip: auto;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Sample styling for bypass link */
|
||||
|
||||
.bypass-to-main:focus {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user