Make the accessibility checkers happy (#129)

* Make the accessibility checkers happy
* Include a lang specification in the `<html>` tag.
* reorder `<h#>` header tags.
The `<Aside` to from `<h1>`, `<h2>` to be `<h2>`, `<h3>`. This is because trusswork's `<Footer>` uses and `<h4>` and the accessibility checkers complain it was skipping from `<h2>` -> `<h4>`
* Change `<aria-details>` to `<aria-label>` for milestone list
* Update J40Header.tsx 80 column line
This commit is contained in:
TomNUSDS 2021-06-14 19:35:35 -07:00 committed by GitHub
commit 9155326775
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 39 deletions

View file

@ -66,7 +66,7 @@ $j40-max-width: 80ex;
}
}
.j40-header, .j40-primary-nav, .j40-header > li > a{
.j40-header, .j40-primary-nav, .j40-header > li > a {
background-color: #112f4e; /* todo: move color to theme */
color: white !important;
z-index: 5;
@ -112,19 +112,14 @@ $j40-max-width: 80ex;
padding-right: 1em;
padding-left: 1em;
h1 {
h2 {
font-weight: 100;
font-size: 2em;
}
h2 {
font-weight: 100;
font-size: 1.4em;
}
h3 {
font-weight: 100;
font-size: 1.3em;
font-size: 1.4em;
}
.j40-aside-icon {
@ -148,11 +143,18 @@ $j40-max-width: 80ex;
}
// spacing top & bottom around main content
@include at-media("mobile-lg") {
.j40-main-content {
.j40-main-content {
@include at-media("mobile-lg") {
margin-bottom: 2rem;
margin-top: 2.5rem;
}
h1 {
font-size: 2.13rem;
}
h2 {
font-size: 1.46rem;
}
}
// This should really be part of uswds and use $theme-step-indicator-segment-color-complete
@ -174,6 +176,7 @@ $j40-max-width: 80ex;
h1, h2, h3, h4 {
font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
}
p, div {
max-width: $j40-max-width;
}
@ -183,8 +186,10 @@ $j40-max-width: 80ex;
p {
margin: 0;
}
padding-top: 0;
padding-bottom: 0;
.usa-alert:before {
margin-top: 12px !important;
}