Rebecca Lynn CremonaandIlya Kreymer
05adead57c
* Placeholder color contrast @ WCAG 2.0 level AA * Trailing whitespace removed. * Remove redundant labels. * Logo is a link in mobile, if not-embedded; otherwise, span. Fix link labels. * HREF mandatory on A; menu behaves like a popup button. * Hide icons from screen readers. * About icon id keyboard-operarable and is labeled. * Note about inaccessible modal. * Missing closing tag. * Fix nesting/indentation. * Fix nesting/indentation; add missing closing tag. * Trailing whitespace removed. * Don't use NAV landmark for non-nav; add heading for page structure. * Hide icon. * Load archive form's buttons visibly receive keyboard focus. * Trailing whitespace removed. * "Hide" header button is keyboard-operable, and more-verbosely labeled for screenreader users. * Don't use NAV landmark for non-nav; add heading for page structure. * Sort order announced to screen reader users. * Trailing whitespace removed. * Delete button only a button when it can be pressed; announce in progress deletion. * Trailing whitespace removed. * Use a NAV landmark for replay controls. * Remove "menu" role, to avoid having to implement arrow key support https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus * Hide icons. * Label buttons. * Links in disguise as buttons need HREF, and to respond to spacebar. * Re-dub "main menu" to distinguish from replay menu * Replay nav buttons visually get keyboard focus. * Trailing whitespace removed. * Hiding icons; button labels; links-as-buttons are operable. * Use type=search for additional clarity. * Add appropriate landmarks and a heading for structure and clarity. * Tab selection is a nav, and is keyboard operable. * Indentation; missing closing tag. * Trailing whitespace removed. * Title iframe. * Not a navigation. * Per discussion, rename tab to "URLs" (label only; route etc. the same while experimenting). * Announce when expanded/collapsed. * Remove "menu" to avoid having to implement expected keyboard support. * Use correct heading level when in sidebar and when main. * Trailing whitespace removed. * Semantic markup of table; headings and captions; link-buttons are keyboard operable. * Skip links for keyboard users. * Title iframe; hide icon. * Just a list, not an aside. * Not an article. * Remove trailing whitespace. * Make each page in the list a heading. * link-buttons are keyboard operable. * Use semantic list for page list. * Announce changes to search results. * More wayfinding tweaks. * Landmark and heading for replay. * Dynamic page titles. * Remove redundant labels from main landmarks. * additional tweaks after rebase - add 'role' to each of the tabs, dependent if sidebar or not - add 'role=main' for replay - add sr-only headers to each tab * fix typos * remaining tweaks: - url-resources: fix sorter getting moved into notification - url-resources: fix border for mobile view - add screenreader labels to expand/hide buttons * Show hover effect on focus. * Wrap the whole sidebar is role=complementary, including the tab navigation. * Make buttons keyboard operable; fix typos. * Programmatically associate sidebar toggle button with sidebar. * Per discusson, try calling this "URLs" * Different heading levels for sidebar and main. * Announce changes to search results. * Correct dynamic page title, whe not in sidebar. * Remove hyperlink focus decoration; reveal obscured focus indicator. * Focus on replay, when replay changes. * Make buttons keyboard operable. * Move spacebar helper to misc instead of duplicating. * Bump compiled assets. * Use disabled attribute to match css; update label to describe new sidebar. * Adjust replay focus styles. * Adjust replay nav button focus, so visuals onclick in Chrome are less prominent. * Put wordmark with logo on non-embed desktop, so that logo and wordmark make a single link. Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
131 lines
2.9 KiB
SCSS
131 lines
2.9 KiB
SCSS
@charset "utf-8";
|
|
|
|
/*$wr-green: #64e986;*/
|
|
$wr-green: #55be6f;
|
|
$wr-yellow: #ffd975;
|
|
$wr-dark-yellow: #ffc42e;
|
|
$wr-light-blue: #43daff;
|
|
$wr-med-blue: #27a0ff;
|
|
$wr-dark-blue: #4876ff;
|
|
$wr-accent: #1b0921;
|
|
$wr-light-bg: #f0f8ff;
|
|
|
|
$wr-light-green: #d2f9d6;
|
|
$wr-dark-green: #459558;
|
|
|
|
$primary: $wr-green;
|
|
$info: $wr-light-bg;
|
|
$warning: $wr-yellow;
|
|
$link: $wr-dark-blue;
|
|
|
|
$light: $wr-light-green;
|
|
$dark: $wr-dark-green;
|
|
|
|
$navbar-breakpoint: 840px;
|
|
|
|
// Set placeholder contrast to ~4.5:1 for WCAG AA compliance
|
|
$input-placeholder-color: #757575;
|
|
$input-disabled-placeholder-color: #707070;
|
|
.input::placeholder, .textarea::placeholder, .select select::placeholder {
|
|
opacity: 1;
|
|
}
|
|
|
|
// focus styles for links to match
|
|
a:focus {
|
|
color: #363636;
|
|
}
|
|
|
|
// focus/hover styles for buttons
|
|
.file-label:focus-within .file-cta {
|
|
background-color: #e8e8e8;
|
|
color: #363636;
|
|
}
|
|
.button.is-primary:focus, .button.is-primary:hover, .button.is-primary:active {
|
|
background-color: $dark !important;
|
|
color: white !important;
|
|
}
|
|
.button.is-warning:focus, .button.is-warning:hover, .button.is-warning:active {
|
|
background-color: $wr-dark-yellow !important;
|
|
color: black !important;
|
|
}
|
|
|
|
.replay-bar .button {
|
|
margin: 0 1px;
|
|
}
|
|
|
|
.replay-bar .button:focus {
|
|
box-shadow: none !important;
|
|
outline: 1px dotted $wr-dark-blue;
|
|
outline: -webkit-focus-ring-color auto 1px;
|
|
}
|
|
|
|
.skip-link {
|
|
border: 0;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute !important;
|
|
width: 1px;
|
|
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
|
|
|
|
&:focus {
|
|
background-color: black;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
|
clip: auto !important;
|
|
clip-path: none;
|
|
color: white;
|
|
display: block;
|
|
font-family: inherit;
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
height: auto;
|
|
left: 5px;
|
|
line-height: normal;
|
|
padding: 15px 23px 14px;
|
|
text-decoration: none;
|
|
top: 5px;
|
|
width: auto;
|
|
z-index: 100000;
|
|
}
|
|
}
|
|
|
|
.main-scroll {
|
|
flex: 1;
|
|
scroll-behavior: smooth;
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
|
|
@import "../node_modules/bulma/bulma";
|
|
|
|
// Add html and body styles to :host for webcomponents
|
|
:host {
|
|
background-color: $body-background-color;
|
|
font-size: $body-size;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
min-width: $body-min-width;
|
|
overflow-x: $body-overflow-x;
|
|
overflow-y: $body-overflow-y;
|
|
text-rendering: $body-rendering;
|
|
text-size-adjust: 100%;
|
|
|
|
font-family: $body-family;
|
|
color: $body-color;
|
|
font-size: $body-font-size;
|
|
font-weight: $body-weight;
|
|
line-height: $body-line-height;
|
|
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|