tonyair
/
silverstripe-simple
mirror of https://github.com/silverstripe/silverstripe-simple
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add accessibility fixes 

- Make the font colour in the footer darker
- change the hamburger span in the header to a button
- update the javascript to select the button
- update the meta viewport to the latest recommended method
- Undo unrelated changes
This commit is contained in:
Michael Pritchard (HEIW) 2021-10-04 10:20:58 +01:00
parent dd28f3f3c2
commit dcb26096f5
5 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/layout.css
View File

@ -424,14 +424,14 @@ body h1 span.amp {
/* FOOTER */ /* FOOTER */
.footer { .footer {
color: #999; color: #6B6B6B;
background: #ededed; background: #ededed;
padding: 20px 0; padding: 20px 0;
font-size: 11px; font-size: 11px;
line-height: 22px; line-height: 22px;
} }
.footer a { .footer a {
color: #999; color: #6B6B6B;
} }
.footer a:hover { .footer a:hover {
color: #B90000; color: #B90000;
@ -521,7 +521,7 @@ body h1 span.amp {
display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */ display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
width:100%; width:100%;
} }
.searchResults #PageNumbers .pagination span{ .searchResults #PageNumbers .pagination button{
display:table-cell; /* each element in the pagination div displays as a table cell */ display:table-cell; /* each element in the pagination div displays as a table cell */
} }
.searchResults #PageNumbers p { .searchResults #PageNumbers p {
@ -593,7 +593,7 @@ body h1 span.amp {
padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */ padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */
} }
.tablet-nav .header { .tablet-nav .header {
padding: 0px; padding: 0;
} }
.tablet-nav .header .inner { .tablet-nav .header .inner {
padding: 20px 0 0 0; padding: 20px 0 0 0;
@ -611,6 +611,9 @@ body h1 span.amp {
font-family: 'WebSymbolsRegular'; font-family: 'WebSymbolsRegular';
font-size: 20px; font-size: 20px;
color: #ededed; color: #ededed;
background: #000;
margin-top: 0;
padding: 0;
} }
.tablet-nav .header .primary ul { .tablet-nav .header .primary ul {
z-index: 10; z-index: 10;
@ -637,7 +640,7 @@ body h1 span.amp {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 0px; top: 0px;
font-family: 'WebSymbolsRegular'; font-family: 'WebSymbolsRegular';
font-size: 14px; font-size: 14px;
color: #999; color: #999;
text-align: center; text-align: center;

4
javascript/script.js
View File

@ -19,9 +19,9 @@ jQuery.noConflict();
}); });
if (!$.browser.msie || ($.browser.msie && (parseInt($.browser.version, 10) > 8))) { if (!$.browser.msie || ($.browser.msie && (parseInt($.browser.version, 10) > 8))) {
var searchBarButton = $("span.search-dropdown-icon"); var searchBarButton = $("button.search-dropdown-icon");
var searchBar = $('div.search-bar'); var searchBar = $('div.search-bar');
var menuButton = $("span.nav-open-button"); var menuButton = $("button.nav-open-button");
var menu = $('.header .primary ul'); var menu = $('.header .primary ul');
var mobile = false; var mobile = false;
var changed = false; var changed = false;

2
templates/Includes/Header.ss
View File

@ -8,7 +8,7 @@
<% end_if %> <% end_if %>
</a> </a>
<% if $SearchForm %> <% if $SearchForm %>
<span class="search-dropdown-icon">L</span> <button class="search-dropdown-icon">L</button>
<div class="search-bar"> <div class="search-bar">
$SearchForm $SearchForm
</div> </div>

2
templates/Includes/Navigation.ss
View File

@ -1,5 +1,5 @@
<nav class="primary"> <nav class="primary">
<span class="nav-open-button">²</span> <button class="nav-open-button">²</button>
<ul> <ul>
<% loop $Menu(1) %> <% loop $Menu(1) %>
<li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li> <li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>

2
templates/Page.ss
View File

@ -16,7 +16,7 @@ Change it, enhance it and most importantly enjoy it!
<% base_tag %> <% base_tag %>
<title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title> <title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
$MetaTags(false) $MetaTags(false)
<!--[if lt IE 9]> <!--[if lt IE 9]>