Skip to content

Commit

Permalink
Merge pull request #2059 from thostetler/hwp-a11y-updates
Browse files Browse the repository at this point in the history
Some a11y updates based on HWP
  • Loading branch information
ehenneken authored Jul 30, 2020
2 parents a2d2b38 + 19bec54 commit 5cf8409
Show file tree
Hide file tree
Showing 9 changed files with 472 additions and 420 deletions.
16 changes: 8 additions & 8 deletions src/js/widgets/navbar/template/navbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ <h1 style="font-weight: bold;">ads</h1>
<ul class="nav navbar-nav navbar-right">

<li class="dropdown">
<button type="button" class="btn btn-primary-faded feedback-button open-feedback-button" data-toggle="dropdown" aria-expanded="false">
Feedback <span class="caret"></span>
<button type="button" class="btn btn-link dropdown-toggle feedback-button" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-comment feedback-icon" aria-hidden="true"></i> Feedback <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Expand All @@ -49,7 +49,7 @@ <h1 style="font-weight: bold;">ads</h1>
{{#if orcidModeOn}}

<li class="dropdown orcid-dropdown s-orcid-dropdown">
<button class="btn btn-link" data-toggle="dropdown" aria-expanded="false">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="s-orcid-title">
<img src="../../styles/img/orcid-active.svg" alt="orcid symbol"/>
ORCID
Expand Down Expand Up @@ -91,7 +91,7 @@ <h1 style="font-weight: bold;">ads</h1>
{{else}}

<li class="dropdown orcid-dropdown s-orcid-dropdown">
<button class="btn-link" data-toggle="dropdown" aria-expanded="false">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="s-orcid-title"> <img src="../../styles/img/orcid_inactive.png"
alt="orcid symbol"/> ORCID <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
Expand Down Expand Up @@ -133,13 +133,13 @@ <h1 style="font-weight: bold;">ads</h1>
{{else}}

<li class="dropdown orcid-dropdown s-orcid-dropdown">
<button class="dropdown-toggle btn-link" data-toggle="dropdown" aria-expanded="false">
<button class="btn dropdown-toggle btn-link" data-toggle="dropdown" aria-expanded="false">
<span class="s-orcid-title"> <img src="../../styles/img/orcid_inactive.png"
alt="orcid symbol"/> ORCID <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li class="no-hover-style" >
<button class="btn-link orcid-sign-in"> Sign in to ORCID to claim papers in the ADS. </button>
</li>
<li class="no-hover-style">
<a href="javascript:void(0);" class="orcid-sign-in">Sign in to ORCID to claim papers in the ADS.</a>
</li>
</ul>
</li>

Expand Down
2 changes: 1 addition & 1 deletion src/js/widgets/navbar/widget.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ define([

events: {
'click .orcid-dropdown ul': 'stopPropagation',
'click button.orcid-sign-in': 'orcidSignIn',
'click a.orcid-sign-in': 'orcidSignIn',
'change .orcid-mode': 'changeOrcidMode',

// to avoid stopPropagation as in triggers hash
Expand Down
3 changes: 2 additions & 1 deletion src/js/widgets/paper_search_form/form.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
A bibstem is an abbreviation that the ADS uses to identify a journal.
<a
href="http://adsabs.harvard.edu/abs_doc/journal_abbr.html"
tabindex="-1"
target="_blank"
rel="noopener"
>A full list is available here.</a
>
The input field below will autocomplete on the 1,000 most popular
Expand Down
11 changes: 9 additions & 2 deletions src/js/widgets/search_bar/templates/search_bar_template.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,16 @@ <h2 class="sr-only">Search Bar to Enter New Query</h2>
{{/if}}
<label for="query-search-input" clas="sr-only">ADS search</label>
<input type="text" class="form-control q hasbigquery" name="q" id="query-search-input" autofocus aria-label="Start typing a query here to begin an ADS Search" autocomplete="off" value={{currentQueryVal}}>
<i class="icon-clear s-clear-control" aria-hidden="true"></i> {{else}}


<button class="icon-clear s-clear-control"></button>

{{else}}
<input type="text" class="form-control q" name="q" autofocus id="query-search-input" aria-label="Start typing a query here to begin an ADS Search" autocomplete="off" value={{currentQueryVal}}>
<i class="icon-clear s-clear-control" aria-hidden="true"></i> {{/if}}

<button class="icon-clear s-clear-control"></button>

{{/if}}
<span class="input-group-btn">
<button type="submit" class="btn btn-primary search-submit s-search-submit" aria-label="submit">
<i class="fa fa-search" aria-hidden="true"></i></button>
Expand Down
91 changes: 50 additions & 41 deletions src/styles/sass/ads-sass/bootstrap-overrides.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


/*
For all changes that can't be made by altering the ads-variables file
Expand All @@ -8,7 +6,9 @@ including reset-like things
*/

h1, h2, h3 {
h1,
h2,
h3 {
font-weight: 300;
}

Expand All @@ -24,38 +24,42 @@ h1, h2, h3 {
z-index: 3;
}

.modal-title, .panel-default .panel-heading {
.modal-title,
.panel-default .panel-heading {
background-color: #fff;
font-weight: 300;
font-size: 26px;
}

.panel-default {
box-shadow : 2px 2px 2px $default-box-shadow-color;
box-shadow: 2px 2px 2px $default-box-shadow-color;
}

textarea:focus, input:focus, select:focus, textarea:active, input:active, select:active {
textarea:focus,
input:focus,
select:focus,
textarea:active,
input:active,
select:active {
outline: 0;
border: 1px solid $brand-primary-faded;
box-shadow: none !important;
}

textarea[disabled]{
textarea[disabled] {
background-color: darken($gray-lighter, 5%);
}

.btn:active {
outline: none !important;
}


// overriding button link focus
.btn-link:focus {
outline:none;
outline: none;
cursor: pointer;
}


.navbar {
margin-bottom: 0px !important;
}
Expand All @@ -64,67 +68,75 @@ textarea[disabled]{
background-color: white;
}


.pagination {
display:inline-block;
padding-left:0;
display: inline-block;
padding-left: 0;
margin: 0;
}

.btn-primary-faded {
background-color : $brand-primary-faded;
border :1px solid darken($brand-primary-faded, 5%);
background-color: $brand-primary-faded;
border: 1px solid darken($brand-primary-faded, 5%);
color: #fff;
&:hover {
color: #fff;
background-color: darken($brand-primary-faded, 5%);
}

&:focus {
color : #fff;
color: #fff;
}
}

.btn {
border-radius: $border-radius-large;
transition : all, .5s;
transition: all, 0.5s;
}

.btn-success, .btn-danger, .btn-info, .btn-warning, .btn-primary, .btn-primary-faded {

.btn-success,
.btn-danger,
.btn-info,
.btn-warning,
.btn-primary,
.btn-primary-faded {
&:hover {
box-shadow : 1px 1px 6px $gray;
box-shadow: 1px 1px 6px $gray;
}
}

.btn-success.btn-sm, .btn-info.btn-sm, .btn-danger.btn-sm, .btn-warning.btn-sm, .btn-primary.btn-sm, .btn-primary-faded.btn-sm {

.btn-success.btn-sm,
.btn-info.btn-sm,
.btn-danger.btn-sm,
.btn-warning.btn-sm,
.btn-primary.btn-sm,
.btn-primary-faded.btn-sm {
&:hover {
box-shadow : 1px 1px 4px $gray;
box-shadow: 1px 1px 4px $gray;
}
}


.btn-success.btn-xs, .btn-info.btn-xs, .btn-danger.btn-xs, .btn-warning.btn-xs, .btn-primary.btn-xs, .btn-primary-faded.btn-xs {

.btn-success.btn-xs,
.btn-info.btn-xs,
.btn-danger.btn-xs,
.btn-warning.btn-xs,
.btn-primary.btn-xs,
.btn-primary-faded.btn-xs {
&:hover {
box-shadow : 1px 1px 2px $gray;
box-shadow: 1px 1px 2px $gray;
}
}


.btn-default {
&:hover {
background-color: #fff;
box-shadow : 1px 1px 4px $gray-light;
box-shadow: 1px 1px 4px $gray-light;
}

&:focus {
background-color: white;
}
}


.btn-warning:hover {
background-color: darken($brand-warning, 4%);
}
Expand All @@ -133,11 +145,11 @@ textarea[disabled]{
@extend .btn-default;
}

.btn-default-flat:hover{
.btn-default-flat:hover {
background-color: white;
}

.btn-default-flat:focus{
.btn-default-flat:focus {
background-color: white;
}

Expand All @@ -163,15 +175,14 @@ textarea[disabled]{
color: $brand-primary-faded;
}

.nav>.dropdown>.btn-link{
.nav > .dropdown > .btn-link {
font-size: 17px;
font-weight: 300;
}


/*fully disable dropdown links */

.disabled{
.disabled {
cursor: not-allowed;
}
.disabled {
Expand All @@ -182,7 +193,6 @@ p {
font-size: 16px;
}
.dropdown-menu {

li.no-hover-style {
&:hover {
background-color: $body-bg;
Expand All @@ -196,9 +206,10 @@ p {
cursor: pointer;
border-left: 3px solid $gray-light;
}
&>a,.btn-link {
& > a,
.btn-link {
padding: 12px;
display:block;
display: block;
}
a {
color: $text-color;
Expand All @@ -216,7 +227,6 @@ p {
label {
font-weight: 300;
}

}

//not sure why this is necessary, bootstrap overrides this somewhere else
Expand All @@ -225,11 +235,10 @@ p {
}

.well {

min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #F7F6F6;
background-color: #f7f6f6;
border: 1px solid #e3e3e3;
border-radius: 0px;
box-shadow: none;
Expand Down
4 changes: 4 additions & 0 deletions src/styles/sass/ads-sass/landing-page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -243,3 +243,7 @@ div[data-field='date'] {
color: lighten($brand-primary-faded, 5%) !important;
font-weight: bold;
}

.search-quick-links button {
border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
}
Loading

0 comments on commit 5cf8409

Please sign in to comment.