Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various accessibility improvements #119

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Various accessibility improvements #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
64d4f54
added intellij config files to gitignore
klues May 18, 2020
6781854
don't show icons to screenreaders
klues May 18, 2020
ac70229
use colors for valid contrast (WCAG 2.1),
klues May 18, 2020
31b16d3
added role=presentation where ul/li isn't really a list
klues May 18, 2020
6eae331
added role=presentation where ul/li isn't a list, added mapping for l…
klues May 18, 2020
00f5663
added custom css for focus indicator
klues May 18, 2020
b07c8c7
various accessibility improvements
klues May 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,5 @@ qa-theme/SnowFlat
.idea
qa-cache/.htaccess
.vscode/*

*.iml
14 changes: 9 additions & 5 deletions qa-theme/Donut-theme/css/donut.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ html,
body {
font-family: 'Open Sans', sans-serif;
}
a {
color: #30649f;
}

.qa-q-view-avatar-meta,
.qa-nav-sub-admin-moderate {
clear: left;
Expand Down Expand Up @@ -261,7 +265,7 @@ header#nav-header {
}
.navbar a {
color: #000;
opacity: 0.5;
opacity: 0.8;
font-weight: bold;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
Expand Down Expand Up @@ -1507,15 +1511,15 @@ header#nav-header {
background-color: #333333;
}
.qa-footer {
color: #777777;
color: #c4c4c4;
font-size: 16px;
line-height: 1.42857143;
}
.qa-footer a {
color: #777777;
color: #c4c4c4;
}
.qa-footer a:visited {
color: #777777;
color: #c4c4c4;
}
.qa-footer a:hover,
.qa-footer a:active,
Expand Down Expand Up @@ -2353,7 +2357,7 @@ header#nav-header {
}
}
.qa-nav-sub .qa-nav-sub-list .qa-nav-sub-hot .qa-nav-sub-link {
color: #d9534f !important;
color: #ba4e4a !important;
font-weight: 700;
}
@media only screen and (max-width: 767px) {
Expand Down
39 changes: 20 additions & 19 deletions qa-theme/Donut-theme/qa-donut-layer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ function body_content()
$extratags = isset($this->content['wrapper_tags']) ? $this->content['wrapper_tags'] : '';
$this->output( '<div class="qa-body-wrapper"' . $extratags . '>', '' );

$this->output( '<main class="donut-masthead">' );
$this->output( '<div class="donut-masthead">' );

$this->output( '<div class="container">' );
$this->notices();
Expand All @@ -237,7 +237,7 @@ function body_content()
$this->donut_breadcrumb();
$this->output( '</div>' );

$this->output( '</main>' );
$this->output( '</div>' );

$this->output( '<div class="container">', '' );

Expand Down Expand Up @@ -276,9 +276,9 @@ function page_title_error()
$this->feed_link();

$this->output( '<h1>' );
$this->favorite();
$this->title();
$this->output( '</h1>' );
$this->favorite();

if ( $this->template == 'not-found' && qa_opt( 'donut_show_custom_404_page' ) ) {
$this->output( donut_include_template( 'page-not-found.php', false ) );
Expand Down Expand Up @@ -362,7 +362,7 @@ function main()
$width_class = ( $this->donut_do_hide_sidebar() && $this->template != 'admin' ) ? 'col-xs-12' : 'qa-main col-md-9 col-xs-12 pull-left';

$extratags = isset($this->content['main_tags']) ? $this->content['main_tags'] : '';
$this->output( '<div class="' . $width_class . ( @$this->content['hidden'] ? ' qa-main-hidden' : '' ) . '"'.$extratags.'>' );
$this->output( '<main class="' . $width_class . ( @$this->content['hidden'] ? ' qa-main-hidden' : '' ) . '"'.$extratags.'>' );

if ( !empty( $this->content['navigation']['sub'] ) || $this->template == 'admin' ) {
$this->donut_sidebar_toggle_nav_btn();
Expand All @@ -389,7 +389,7 @@ function main()

$this->widgets( 'main', 'bottom' );

$this->output( '</div> <!-- END qa-main -->', '' );
$this->output( '</main> <!-- END qa-main -->', '' );
}

/**
Expand All @@ -410,7 +410,8 @@ function donut_sidebar_toggle_nav_btn()

function sidepanel()
{
$this->output( '<div class="qa-sidepanel col-md-3 col-xs-12 pull-right">' );
$this->output( '<aside class="qa-sidepanel col-md-3 col-xs-12 pull-right">' );
$this->output('<h1 class="sr-only">' . qa_lang_html("main/label_sidebar") . '</h1>');
$this->output( '<div class="side-search-bar hidden-xs">' );
$this->search();
$this->output( '</div>' );
Expand All @@ -422,7 +423,7 @@ function sidepanel()
$this->output_raw( @$this->content['sidepanel'] );
$this->feed();
$this->widgets( 'side', 'bottom' );
$this->output( '</div>', '' );
$this->output( '</aside>', '' );
}

/**
Expand Down Expand Up @@ -587,7 +588,7 @@ function search_field( $search )
{
$this->output(
'<div class="input-group">',
'<input type="text" ' . $search['field_tags'] . ' value="' . @$search['value'] . '" class="qa-search-field form-control" placeholder="' . $search['button_label'] . '"/>' );
'<input type="search" aria-label="' . qa_lang_html('main/search_button') . '" ' . $search['field_tags'] . ' value="' . @$search['value'] . '" class="qa-search-field form-control" placeholder="' . $search['button_label'] . '"/>' );
$this->search_button( $search );
$this->output( '</div>' );
}
Expand Down Expand Up @@ -660,7 +661,7 @@ public function form_select_radio( $field, $style )
function search_button( $search )
{
$this->output( '<span class="input-group-btn">' );
$this->output( '<button type="submit" value="" class="btn qa-search-button" ><span class="fa fa-search"></span></button>' );
$this->output( '<button type="submit" value="" class="btn qa-search-button" title="' . qa_lang_html('main/search_button') . '"><span class="fa fa-search"></span></button>' );
$this->output( '</span>' );
}

Expand Down Expand Up @@ -778,14 +779,14 @@ function post_hover_button( $post, $element, $value, $class )

public function q_list_item( $q_item )
{
$this->output( '<div class="qa-q-list-item row' . rtrim( ' ' . @$q_item['classes'] ) . '" ' . @$q_item['tags'] . '>' );
$this->output( '<li class="qa-q-list-item row' . rtrim( ' ' . @$q_item['classes'] ) . '" ' . @$q_item['tags'] . '>' );

$this->q_item_stats( $q_item );
//$this->q_item_avatar( $q_item );
$this->q_item_main( $q_item );
$this->q_item_clear();

$this->output( '</div> <!-- END qa-q-list-item -->', '' );
$this->output( '</li> <!-- END qa-q-list-item -->', '' );
}

function q_item_avatar( $q_item )
Expand Down Expand Up @@ -1021,7 +1022,7 @@ function ranking( $ranking )
foreach ( $ranking['items'] as $user ) {
$this->output( '<div class="user-box col-sm-' . ceil( 12 / $columns ) . ' col-xs-12">' );
$user_raw = !empty( $user['raw'] ) ? $user['raw'] : $user;

$handle_html = @$usershtml[$user_raw['userid']];

if ( defined( 'QA_WORDPRESS_INTEGRATE_PATH' ) ) {
Expand Down Expand Up @@ -1339,17 +1340,17 @@ private function donut_site_stats_bottom()
private function donut_attribution()
{
$this->output(
'<div class="qa-attribution">',
'<a href="https://github.com/amiyasahu/Donut">Donut Theme</a> <span class="fa fa-code"></span> with <span class="fa fa-heart"></span> by <a href="http://amiyasahu.github.io">Amiya Sahu</a>',
'<div class="qa-attribution" lang="en">',
'<a href="https://github.com/amiyasahu/Donut">Donut Theme</a> <span aria-hidden="true" class="fa fa-code"></span><span class="sr-only">code</span> with <span aria-hidden="true" class="fa fa-heart"></span><span class="sr-only">heart</span> by <a href="http://amiyasahu.github.io">Amiya Sahu</a>',
'</div>'
);
}

private function donut_copyright()
{
$this->output(
'<div class="donut-copyright">',
'<span class="fa fa-copyright"></span>',
'<div class="donut-copyright" lang="en">',
'<span aria-hidden="true" class="fa fa-copyright"></span><span class="sr-only">Copyright by </span>',
qa_opt( 'donut_copyright_text' ),
'</div>'
);
Expand All @@ -1375,10 +1376,10 @@ public function widgets( $region, $place )
Output the widgets (as provided in $this->content['widgets']) for $region and $place
*/
{
if ( isset($this->content['widgets'][$region][$place]) &&
is_array($this->content['widgets'][$region][$place]) &&
if ( isset($this->content['widgets'][$region][$place]) &&
is_array($this->content['widgets'][$region][$place]) &&
!empty($this->content['widgets'][$region][$place]) ) {

$col = ( $region == 'full' ) ? ' col-xs-12' : '';

$this->output( '<div class="qa-widgets-' . $region . ' qa-widgets-' . $region . '-' . $place . $col . '">' );
Expand Down
9 changes: 9 additions & 0 deletions qa-theme/Donut-theme/qa-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,12 @@
Theme License: GPLv2
Theme Update Check URI: https://github.com/amiyasahu/Donut/blob/master/qa-theme/Donut-theme/qa-styles.css
*/
ol {
list-style-type: none;
padding-left: 0;
}

*:focus, .qa-logo a:focus img {
outline: none !important;
box-shadow: 0 0 3pt 2pt lightskyblue !important;
}
8 changes: 4 additions & 4 deletions qa-theme/Donut-theme/templates/user-loggedin-drop-down.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
}

?>
<ul class="nav navbar-nav navbar-right user-nav">
<ul class="nav navbar-nav navbar-right user-nav" role="presentation">
<?php if (qa_opt('q2apro_onsitenotifications_enabled') && !empty($this->content['loggedin']['suffix'])): ?>
<li class="notf-bubble visible-lg">
<li class="notf-bubble visible-lg" role="presentation">
<?php echo $this->content['loggedin']['suffix'] ?>
</li>
<?php endif ?>
<li class="dropdown user-dropdown">
<a href="#" class="navbar-user-img dropdown-toggle" data-toggle="dropdown">
<li class="dropdown user-dropdown" role="presentation">
<a href="javascript:;" title="<?php echo qa_lang_sub( 'main/nav_login_link_title' , qa_get_logged_in_handle()); ?>" class="navbar-user-img dropdown-toggle" data-toggle="dropdown">
<?php echo $logged_in_user_avatar; ?>
</a>
<ul class="dropdown-menu" role="menu" id="user-dropdown-menu">
Expand Down
16 changes: 8 additions & 8 deletions qa-theme/Donut-theme/templates/user-login-drop-down.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<ul class="nav navbar-nav navbar-right login-nav">
<li class="dropdown login-dropdown login active">
<a href="#" data-toggle="dropdown" class="navbar-login-button">
<ul class="nav navbar-nav navbar-right login-nav" role="presentation">
<li class="dropdown login-dropdown login active" role="presentation">
<a href="#" data-toggle="dropdown" class="navbar-login-button" title="<?php echo qa_lang_html( 'users/login_button' ); ?>">
<span class="fa fa-sign-in text-muted"></span>
</a>
<ul class="dropdown-menu" role="menu" id="login-dropdown-menu">
Expand Down Expand Up @@ -66,22 +66,22 @@
<form role="form" action="<?php echo $this->content['navigation']['user']['login']['url']; ?>"
method="post">
<li>
<label>
<label for="qa-userid">
<?php echo trim( qa_lang_html( 'users/email_handle_label' ), ':' ); ?>
</label>
<input type="text" class="form-control" id="qa-userid" name="emailhandle"
<input type="text" class="form-control" id="qa-userid" name="emailhandle" autocomplete="username"
placeholder="<?php echo trim( qa_lang_html( 'users/email_handle_label' ), ':' ); ?>"/>
</li>

<li>
<label>
<label for="qa-password">
<?php echo trim( qa_lang_html( 'users/password_label' ), ':' ); ?>
</label>
<input type="password" class="form-control" id="qa-password" name="password"
<input type="password" class="form-control" id="qa-password" name="password" autocomplete="current-password"
placeholder="<?php echo trim( qa_lang_html( 'users/password_label' ), ':' ); ?>"/>
</li>
<li>
<label class="checkbox inline">
<label for="qa-rememberme" class="checkbox inline">
<input type="checkbox" name="remember" id="qa-rememberme"
value="1"> <?php echo qa_lang_html( 'users/remember' ); ?>
</label>
Expand Down
2 changes: 1 addition & 1 deletion qa-theme/Donut-theme/utils/qa-donut-utils.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function donut_get_glyph_icon( $icon )
function donut_get_fa_icon( $icon )
{
if ( !empty( $icon ) ) {
return '<span class="fa fa-' . $icon . '"></span> ';
return '<span aria-hidden="true" class="fa fa-' . $icon . '"></span> ';
} else {
return '';
}
Expand Down