mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-11 09:14:58 +02:00
Code Issues Releases Wiki Activity

Merge branch 'marcus-herrmann-fix/a11y-core-site-profiles' into dev

Browse Source
This commit is contained in:
Ryan Cramer
2016-11-25 15:04:41 -05:00
parent 35df716082 cfb6823d49
commit 332dbb317e
12 changed files with 221 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site-beginner/templates/_foot.php
View File

@@ -1,9 +1,9 @@
</div><!--/#main--> </main>
<!-- footer --> <!-- footer -->
<footer id='footer'> <footer id='footer' role="contentinfo">
<p> <p>
Powered by <a href='http://processwire.com'>ProcessWire CMS</a> &nbsp; / &nbsp; Powered by <a href='http://processwire.com'>ProcessWire CMS</a> &nbsp; / &nbsp;
<?php <?php

9
site-beginner/templates/_func.php
View File

@@ -22,7 +22,7 @@ function renderNav(PageArray $items) {
if(!$items->count()) return; if(!$items->count()) return;
echo "<ul class='nav'>"; echo "<ul class='nav' role='navigation'>";
// cycle through all the items // cycle through all the items
foreach($items as $item) { 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 // $out is where we store the markup we are creating in this function
// start our <ul> markup // start our <ul> markup
echo "<ul class='nav nav-tree'>"; echo "<ul class='nav nav-tree' role='navigation'>";
// cycle through all the items // cycle through all the items
foreach($items as $item) { foreach($items as $item) {
// markup for the list 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) { if($item->id == wire('page')->id) {
echo "<li class='current'>"; echo "<li class='current'><span class='visually-hidden'>Current page: </span>";
} else { } else {
echo "<li>"; echo "<li>";
} }

13
site-beginner/templates/_head.php
View File

@@ -11,7 +11,7 @@
<body class='has-sidebar'> <body class='has-sidebar'>
<!-- top navigation --> <!-- top navigation -->
<ul class='topnav'><?php <ul class='topnav' role='navigation'><?php
// top navigation consists of homepage and its visible children // top navigation consists of homepage and its visible children
$homepage = $pages->get('/'); $homepage = $pages->get('/');
@@ -25,7 +25,7 @@
if($child->id == $page->rootParent->id) { if($child->id == $page->rootParent->id) {
// this $child page is currently being viewed (or one of it's children/descendents) // 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 // 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 { } else {
echo "<li><a href='$child->url'>$child->title</a></li>"; echo "<li><a href='$child->url'>$child->title</a></li>";
} }
@@ -40,12 +40,13 @@
<!-- search form --> <!-- search form -->
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'> <form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
<input type='text' name='q' placeholder='Search' value='' /> <label for='search' class='visually-hidden'>Search:</label>
<button type='submit' name='submit'>Search</button> <input type='text' name='q' id='search' placeholder='Search' value='' />
<button type='submit' name='submit' class='visually-hidden'>Search</button>
</form> </form>
<!-- breadcrumbs --> <!-- breadcrumbs -->
<div class='breadcrumbs'><?php <div class='breadcrumbs' role='navigation' aria-label='You are here:'><?php
// breadcrumbs are the current page's parents // breadcrumbs are the current page's parents
foreach($page->parents() as $item) { foreach($page->parents() as $item) {
@@ -56,5 +57,5 @@
?></div> ?></div>
<div id='main'> <main id='main'>

4
site-beginner/templates/basic-page.php
View File

@@ -23,7 +23,7 @@ include('./_head.php'); // include header markup ?>
?></div><!-- end content --> ?></div><!-- end content -->
<div id='sidebar'><?php <aside id='sidebar'><?php
// rootParent is the parent page closest to the homepage // rootParent is the parent page closest to the homepage
// you can think of this as the "section" that the user is in // 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 // output sidebar text if the page has it
echo $page->sidebar; echo $page->sidebar;
?></div><!-- end sidebar --> ?></aside><!-- end sidebar -->
<?php include('./_foot.php'); // include footer markup ?> <?php include('./_foot.php'); // include footer markup ?>

44
site-beginner/templates/styles/main.css
View File

@@ -6,6 +6,7 @@
* 3. Main content and sidebar * 3. Main content and sidebar
* 4. Footer * 4. Footer
* 5. Media queries for responsive layout * 5. Media queries for responsive layout
* 6. Accessibility helpers
* *
*/ */
@@ -124,9 +125,6 @@ form.search {
border: 1px solid #ccc; border: 1px solid #ccc;
width: 100%; width: 100%;
} }
form.search button {
display: none;
}
.breadcrumbs { .breadcrumbs {
clear: both; clear: both;
@@ -291,3 +289,43 @@ figure figcaption {
font-size: 115%; 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;
}

4
site-classic/templates/foot.inc
View File

@@ -6,7 +6,7 @@
if($page->numChildren) { if($page->numChildren) {
echo "<ul class='nav'>"; echo "<ul class='nav' role='navigation'>";
foreach($page->children as $child) { foreach($page->children as $child) {
echo "<li><p><a href='{$child->url}'>{$child->title}</a><br />"; echo "<li><p><a href='{$child->url}'>{$child->title}</a><br />";
@@ -24,7 +24,7 @@ if($page->numChildren) {
</div><!--/content--> </div><!--/content-->
<div id="footer" class="footer"> <div id="footer" class="footer" role="contentinfo">
<div class="container"> <div class="container">
<p>Powered by <a href='http://processwire.com'>ProcessWire Open Source CMS/CMF</a></p> <p>Powered by <a href='http://processwire.com'>ProcessWire Open Source CMS/CMF</a></p>
</div> </div>

24
site-classic/templates/head.inc
View File

@@ -32,6 +32,8 @@
</head> </head>
<body> <body>
<a href="#bodycopy" class="visually-hidden element-focusable bypass-to-main">Skip to content</a>
<p id='bgtitle'><?php <p id='bgtitle'><?php
// print the section title as big faded text that appears near the top left of the page // 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> <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. // 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) // 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, // 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: // so we prepend it to the pages we cycle through:
@@ -58,19 +61,23 @@
$children->prepend($homepage); $children->prepend($homepage);
foreach($children as $child) { 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'" : ''; $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>
<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 // Create breadcrumb navigation by cycling through the current $page's
// parents in order, linking to each: // parents in order, linking to each:
foreach($page->parents as $parent) { foreach($page->parents as $parent) {
echo "<li><a href='{$parent->url}'>{$parent->title}</a> &gt; </li>"; echo "<li><a href='{$parent->url}'>{$parent->title}</a> <span class='visually-hidden'>&gt;</span> </li>";
} }
?></ul> ?></ul>
@@ -87,6 +94,7 @@
?></h1> ?></h1>
<form id='search_form' action='<?php echo $config->urls->root?>search/' method='get'> <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'); ?>' /> <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> <button type='submit' id='search_submit'>Search</button>
</form> </form>
@@ -111,7 +119,7 @@
<div class="container"> <div class="container">
<div id="sidebar"> <div id="sidebar" role='complementary'>
<?php <?php
@@ -128,7 +136,7 @@
// We have determined that we're not on the homepage // We have determined that we're not on the homepage
// and that this section has child pages, so make navigation: // 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) { foreach($page->rootParent->children as $child) {
$class = $page === $child ? " class='on'" : ''; $class = $page === $child ? " class='on'" : '';
@@ -156,5 +164,5 @@
</div><!--/sidebar--> </div><!--/sidebar-->
<div id="bodycopy"> <div id="bodycopy" role="main">

42
site-classic/templates/styles/main.css
View File

@@ -502,3 +502,45 @@ body, input, textarea, table {
z-index: 9999; 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;
}

17
site-default/templates/_main.php
View File

@@ -41,12 +41,14 @@
</head> </head>
<body class="<?php if($sidebar) echo "has-sidebar "; ?>"> <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 --> <!-- top navigation -->
<ul class='topnav'><?php <ul class='topnav' role='navigation'><?php
// top navigation consists of homepage and its visible children // top navigation consists of homepage and its visible children
foreach($homepage->and($homepage->children) as $item) { foreach($homepage->and($homepage->children) as $item) {
if($item->id == $page->rootParent->id) { if($item->id == $page->rootParent->id) {
echo "<li class='current'>"; echo "<li class='current'><span class='visually-hidden'>Current page: </span>";
} else { } else {
echo "<li>"; echo "<li>";
} }
@@ -59,12 +61,13 @@
<!-- search form--> <!-- search form-->
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'> <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')); ?>' /> <label for='search' class='visually-hidden'>Search:</label>
<button type='submit' name='submit'>Search</button> <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> </form>
<!-- breadcrumbs --> <!-- breadcrumbs -->
<div class='breadcrumbs'><?php <div class='breadcrumbs' role='navigation' aria-label='You are here:'><?php
// breadcrumbs are the current page's parents // breadcrumbs are the current page's parents
foreach($page->parents() as $item) { foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> "; echo "<span><a href='$item->url'>$item->title</a></span> ";
@@ -83,9 +86,9 @@
<!-- sidebar content --> <!-- sidebar content -->
<?php if($sidebar): ?> <?php if($sidebar): ?>
<div id='sidebar'> <aside id='sidebar'>
<?php echo $sidebar; ?> <?php echo $sidebar; ?>
</div> </aside>
<?php endif; ?> <?php endif; ?>
</div> </div>

43
site-default/templates/styles/main.css
View File

@@ -6,6 +6,7 @@
* 3. Main content and sidebar * 3. Main content and sidebar
* 4. Footer * 4. Footer
* 5. Media queries for responsive layout * 5. Media queries for responsive layout
* 6. Accessibility helpers
* *
*/ */
@@ -124,9 +125,6 @@ form.search {
border: 1px solid #ccc; border: 1px solid #ccc;
width: 100%; width: 100%;
} }
form.search button {
display: none;
}
.breadcrumbs { .breadcrumbs {
clear: both; clear: both;
@@ -297,3 +295,42 @@ figure figcaption {
font-size: 115%; 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;
}

23
site-languages/templates/_main.php
View File

@@ -60,8 +60,10 @@
</head> </head>
<body class="<?php if($sidebar) echo "has-sidebar"; ?>"> <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 --> <!-- language switcher / navigation -->
<ul class='languages'><?php <ul class='languages' role='navigation'><?php
foreach($languages as $language) { foreach($languages as $language) {
if(!$page->viewable($language)) continue; // is page viewable in this language? if(!$page->viewable($language)) continue; // is page viewable in this language?
if($language->id == $user->language->id) { if($language->id == $user->language->id) {
@@ -76,11 +78,11 @@
?></ul> ?></ul>
<!-- top navigation --> <!-- top navigation -->
<ul class='topnav'><?php <ul class='topnav' role='navigation'><?php
// top navigation consists of homepage and its visible children // top navigation consists of homepage and its visible children
foreach($homepage->and($homepage->children) as $item) { foreach($homepage->and($homepage->children) as $item) {
if($item->id == $page->rootParent->id) { if($item->id == $page->rootParent->id) {
echo "<li class='current'>"; echo "<li class='current'><span class='visually-hidden'>" . _x('Current page:', 'navigation') . " </span>";
} else { } else {
echo "<li>"; echo "<li>";
} }
@@ -92,7 +94,7 @@
?></ul> ?></ul>
<!-- breadcrumbs --> <!-- 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 // breadcrumbs are the current page's parents
foreach($page->parents() as $item) { foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> "; echo "<span><a href='$item->url'>$item->title</a></span> ";
@@ -103,12 +105,13 @@
<!-- search engine --> <!-- search engine -->
<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'> <form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
<input type='text' name='q' placeholder='<?php echo _x('Search', 'placeholder'); ?>' /> <label for='search' class='visually-hidden'><?php echo _x('Search:', 'label'); ?></label>
<button type='submit' name='submit'><?php echo _x('Search', 'button'); ?></button> <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> </form>
<div id='main'> <main id='main'>
<!-- main content --> <!-- main content -->
<div id='content'> <div id='content'>
@@ -121,15 +124,15 @@
<!-- sidebar content --> <!-- sidebar content -->
<?php if($sidebar): ?> <?php if($sidebar): ?>
<div id='sidebar'> <aside id='sidebar'>
<?php echo $sidebar; ?> <?php echo $sidebar; ?>
</div> </aside>
<?php endif; ?> <?php endif; ?>
</div> </main>
<!-- footer --> <!-- footer -->
<footer id='footer'> <footer id='footer'>

44
site-languages/templates/styles/main.css
View File

@@ -6,6 +6,7 @@
* 3. Main content and sidebar * 3. Main content and sidebar
* 4. Footer * 4. Footer
* 5. Media queries for responsive layout * 5. Media queries for responsive layout
* 6. Accessibility helpers
* *
*/ */
@@ -156,9 +157,6 @@ form.search {
border: 1px solid #ccc; border: 1px solid #ccc;
width: 100%; width: 100%;
} }
form.search button {
display: none;
}
.breadcrumbs { .breadcrumbs {
font-size: 80%; font-size: 80%;
@@ -351,3 +349,43 @@ figure figcaption {
font-size: 115%; 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;
}