Commit d7826532 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon

Bug #1824044 'skip to main content' link skips the new page header on collections

Put the pageactions.tpl inside pageheader.tpl so the ordering of
elements is better for screenreaders.

Skip to main content now goes either to #main or #header-content if dealing
with a custom page header.  The collection navigation custom-dropdown is now
focusable, with clicking func and tab to and press enter for accessibility.
Style guide updated accordingly.

behatnotneeded

Change-Id: I54c17a69c3f55aa4f896ea02be01e04220d4dd4c
(cherry picked from commit 5d0989ad)
parent e39ac7ce
......@@ -165,19 +165,15 @@ jQuery(function($) {
* Custom dropdown creates a fake select box that can have items of an
* arbitrary length (unlike attachInputDropdown which uses a select).
* For screenreaders, it works like a UL of links.
* Keyboard nav doesn't work for sighted users though.
*/
// open the dropdown when it is clicked
$('.custom-dropdown > .picker').on("click", function() {
$(this).parent().children('ul').toggleClass('d-none');
});
// close the dropdown when there is a click anywhere outside it
$(document).on('click', function(event) {
if (!$(event.target).closest('.custom-dropdown').length) {
$('.custom-dropdown').children('ul').addClass('d-none');
}
/* Utilize bootstrap functions for showing/ hiding the list when
* user presses the 'Enter' key (keyCode 13)
*/
$('.custom-dropdown > .picker').keydown(function(e){
if (e.keyCode == 13) {
$(this).parent().children('ul').collapse('toggle');
}
});
}
......
......@@ -163,19 +163,15 @@ jQuery(function($) {
* Custom dropdown creates a fake select box that can have items of an
* arbitrary length (unlike attachInputDropdown which uses a select).
* For screenreaders, it works like a UL of links.
* Keyboard nav doesn't work for sighted users though.
*/
// open the dropdown when it is clicked
$('.custom-dropdown > .picker').on("click", function() {
$(this).parent().children('ul').toggleClass('d-none');
});
// close the dropdown when there is a click anywhere outside it
$(document).on('click', function(event) {
if (!$(event.target).closest('.custom-dropdown').length) {
$('.custom-dropdown').children('ul').addClass('d-none');
}
/* Utilize bootstrap functions for showing/ hiding the list when
* user presses the 'Enter' key (keyCode 13)
*/
$('.custom-dropdown > .picker').keydown(function(e){
if (e.keyCode == 13) {
$(this).parent().children('ul').collapse('toggle');
}
});
}
......
......@@ -123,6 +123,10 @@
z-index: 3;
margin-left: 5px;
}
// except add pages to collections need no margin-left
.pagesavailable .btn-group {
margin-left: 0;
}
// Chrome bug - flex container doesn't work on fieldset tag
fieldset.btn-group {
......
......@@ -180,7 +180,8 @@ body.presentation-iframe {
// Pages and collections page header
.pageactions {
position: relative;
position: absolute;
top: 0px;
.btn-group-vertical {
position: fixed;
......@@ -192,6 +193,7 @@ body.presentation-iframe {
.pageheader {
background: $pageheader-bg;
position: relative;
.main {
padding-top: 30px;
......@@ -229,8 +231,8 @@ body.presentation-iframe {
}
// push in the right page margin to allow room for floating menu
.pageactions ~ .pageheader .pageheader-content,
.pageactions ~ .main-content {
.pageheader-actions,
.pageheader-actions + .main-content {
padding-right: 50px;
}
......
......@@ -6,7 +6,13 @@
<span id="collectionbtns" class="collection-nav-btns">
<nav class="custom-dropdown dropdown">
<ul class="d-none">
{foreach from=$collection item=view name=page}
{if $view->view == $viewid}
{$currentindex = $dwoo.foreach.page.index}
{/if}
{/foreach}
<span class="picker form-control" tabindex="0" data-toggle="collapse" data-target="#pagelist" aria-expanded="false" role="button" aria-controls="#pagelist">{str tag="viewingpage" section="collection"}<span id="currentindex" data-currentindex="{$currentindex}">{$currentindex + 1}</span>/{count($collection)}</span>
<ul id="pagelist" class="collapse">
{foreach from=$collection item=view name=page}
<li>
{if $view->view == $viewid}
......@@ -18,7 +24,6 @@
</li>
{/foreach}
</ul>
<span class="picker form-control">{str tag="viewingpage" section="collection"}<span id="currentindex" data-currentindex="{$currentindex}">{$currentindex + 1}</span>/{count($collection)}</span>
</nav>
{if count($collection) > 1}
......
......@@ -5,7 +5,7 @@
{include file="header/head.tpl"}
<body data-usethemedjs="true" class="no-js {if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}admin{/if} {if $loggedout}loggedout{/if} {if $pagename}{$pagename}{/if} {$presentation|default:'window'}">
<div class="skiplink btn-group btn-group-top">
<a class="sr-only sr-only-focusable btn btn-secondary" href="#main">{str tag=skipmenu}</a>
<a class="sr-only sr-only-focusable btn btn-secondary" {if $headertype=='page'}href="#header-content"{else}href="#main"{/if}>{str tag=skipmenu}</a>
</div>
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
......@@ -120,10 +120,8 @@
</header>
{if $headertype == "page"}
{include file="header/pageactions.tpl"}
{include file="header/pageheader.tpl"}
{elseif $headertype == "profile"}
{include file="header/profileactions.tpl"}
{include file="header/profileheader.tpl"}
{elseif $headertype == "matrix"}
{include file="header/matrixheader.tpl"}
......
<div class="pageheader">
<div id="header-content" class="pageheader pageheader-actions">
<div class="container pageheader-content">
<div class="row">
<div class="col-md-12 main">
......@@ -42,6 +42,7 @@
{/if}
</h1>
{/if}
<div class="btn-group-top-below">
{if $toolbarhtml}
{$toolbarhtml|safe}
......@@ -64,6 +65,8 @@
</div>
{/if}
</div>
{include file="header/pageactions.tpl"}
</div>
</div>
</div>
......
<div class="pageheader profileheader">
<div class="pageheader profileheader pageheader-actions">
<div class="container pageheader-content">
<div class="row">
<div class="{if $relationship == 'pending'}col-lg-6 {else}col-md-12{/if} main">
......@@ -45,6 +45,7 @@
{/if}
{/if}
{include file="header/profileactions.tpl"}
</div>
{if $relationship == 'pending'}
......
......@@ -703,7 +703,7 @@ This is the general layout of blocks. An example of this being used is the 'Late
<h2>{str tag=Collection section=collection}: Collection 1</h2>
<p class="navlabel">{str tag=navtopage section=collection}</p>
<nav class="custom-dropdown dropdown">
<ul class="d-none">
<ul id="pagelist" class="collapse">
<li>
<a href="" data-index="0">Page 1</a>
</li>
......@@ -714,7 +714,7 @@ This is the general layout of blocks. An example of this being used is the 'Late
<a href="" data-index="2">Page 3</a>
</li>
</ul>
<span class="picker form-control">{str tag=viewingpage section=collection}
<span class="picker form-control" tabindex="0" data-toggle="collapse" data-target="#pagelist" aria-expanded="false" role="button" aria-controls="#pagelist">{str tag=viewingpage section=collection}
<span id="currentindex" data-currentindex="1">2</span>
/3
</span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment