зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1242851 - adding keyboard focus styles for better accessibility. r=bgrins
MozReview-Commit-ID: Cb6JO5OxAay --- devtools/client/framework/toolbox-options.xhtml | 2 +- devtools/client/themes/common.css | 26 +++++++++++++++++++++++++ devtools/client/themes/toolbars.css | 19 +++++++++++------- devtools/client/themes/variables.css | 20 +++++++++++++++++++ devtools/client/themes/webconsole.css | 9 ++++++++- devtools/client/themes/widgets.css | 9 +++++++++ 6 files changed, 76 insertions(+), 9 deletions(-) --HG-- extra : rebase_source : 7c3f6f8a7193a8f124a049e051d6a02788ea7eba
This commit is contained in:
Yura Zenevich
Родитель
3ef0477eee
Коммит
8b3552b2c2
|
|
@ -16,7 +16,7 @@
|
|||
<body role="application" class="theme-body">
|
||||
<form id="options-panel">
|
||||
<div id="tools-box" class="options-vertical-pane">
|
||||
<fieldset id="default-tools-box" class="options-groupbox" tabindex="0">
|
||||
<fieldset id="default-tools-box" class="options-groupbox">
|
||||
<legend>&options.selectDefaultTools.label;</legend>
|
||||
</fieldset>
|
||||
|
||||
|
|
|
|||
|
|
@ -264,3 +264,29 @@
|
|||
margin: 2px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Keyboard focus highlight styles */
|
||||
|
||||
:-moz-focusring {
|
||||
outline: var(--theme-focus-outline);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
textbox[focused="true"] {
|
||||
border-color: var(--theme-focus-border-color-textbox);
|
||||
box-shadow: var(--theme-focus-box-shadow-textbox);
|
||||
transition: all 0.2s ease-in-out
|
||||
}
|
||||
|
||||
textbox :-moz-focusring {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Form fields should already have box-shadow hightlight */
|
||||
select:-moz-focusring,
|
||||
input[type="radio"]:-moz-focusring,
|
||||
input[type="checkbox"]:-moz-focusring,
|
||||
checkbox:-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -150,13 +150,6 @@
|
|||
margin: 2px 1px;
|
||||
}
|
||||
|
||||
.devtools-menulist:-moz-focusring,
|
||||
.devtools-toolbarbutton:-moz-focusring,
|
||||
.devtools-button:-moz-focusring {
|
||||
outline: 1px dotted hsla(210,30%,85%,0.7);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
|
||||
.devtools-button::before {
|
||||
width: 16px;
|
||||
|
|
@ -185,6 +178,10 @@
|
|||
transition: opacity 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
.devtools-button:-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Standalone buttons */
|
||||
.devtools-button[standalone],
|
||||
.devtools-button[data-standalone],
|
||||
|
|
@ -436,6 +433,14 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.devtools-searchbox > .devtools-textinput:-moz-focusring,
|
||||
.devtools-searchbox > .devtools-searchinput:-moz-focusring {
|
||||
border-color: var(--theme-focus-border-color-textbox);
|
||||
box-shadow: var(--theme-focus-box-shadow-textbox);
|
||||
transition: all 0.2s ease-in-out;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Don't add 'double spacing' for inputs that are at beginning / end
|
||||
of a toolbar (since the toolbar has it's own spacing). */
|
||||
.devtools-toolbar > .devtools-textinput:first-child,
|
||||
|
|
|
|||
|
|
@ -43,6 +43,10 @@
|
|||
--theme-highlight-red: #ed2655;
|
||||
--theme-highlight-pink: #b82ee5;
|
||||
|
||||
/* For accessibility purposes we want to enhance the focus styling. This
|
||||
* should improve keyboard navigation usability. */
|
||||
--theme-focus-outline-color: #000000;
|
||||
|
||||
/* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
|
||||
--theme-graphs-green: #85d175;
|
||||
--theme-graphs-blue: #83b7f6;
|
||||
|
|
@ -89,6 +93,10 @@
|
|||
--theme-highlight-red: #eb5368;
|
||||
--theme-highlight-pink: #df80ff;
|
||||
|
||||
/* For accessibility purposes we want to enhance the focus styling. This
|
||||
* should improve keyboard navigation usability. */
|
||||
--theme-focus-outline-color: #ced3d9;
|
||||
|
||||
/* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
|
||||
--theme-graphs-green: #70bf53;
|
||||
--theme-graphs-blue: #46afe3;
|
||||
|
|
@ -158,3 +166,15 @@
|
|||
rgba(0, 0, 0, 0.1),
|
||||
transparent) repeat-x;
|
||||
}
|
||||
|
||||
:root {
|
||||
--theme-focus-border-color-textbox: #0675d3;
|
||||
--theme-textbox-box-shadow: rgba(97,181,255,.75);
|
||||
|
||||
/* For accessibility purposes we want to enhance the focus styling. This
|
||||
* should improve keyboard navigation usability. */
|
||||
--theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
|
||||
--theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
|
||||
--theme-focus-box-shadow-inset-bottom: 0 -2px 1px var(--theme-textbox-box-shadow) inset,
|
||||
0px -2px var(--theme-highlight-blue) inset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -406,11 +406,17 @@ a {
|
|||
.jsterm-input-node,
|
||||
.jsterm-complete-node {
|
||||
border: none;
|
||||
padding: 0 0 0 16px;
|
||||
padding: 4px;
|
||||
padding-inline-start: 20px;
|
||||
margin: 0;
|
||||
-moz-appearance: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.jsterm-input-node[focused="true"] {
|
||||
box-shadow: var(--theme-focus-box-shadow-inset-bottom);
|
||||
}
|
||||
|
||||
.jsterm-complete-node {
|
||||
color: var(--theme-comment);
|
||||
}
|
||||
|
|
@ -422,6 +428,7 @@ a {
|
|||
background-image: var(--command-line-image);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 16px;
|
||||
background-position: 4px 50%;
|
||||
color: var(--theme-content-color1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -249,6 +249,15 @@
|
|||
color: hsl(210,30%,85%);
|
||||
}
|
||||
|
||||
.breadcrumbs-widget-item:-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.breadcrumbs-widget-item[checked]:-moz-focusring > .button-box {
|
||||
outline: var(--theme-focus-outline);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.breadcrumbs-widget-item > .button-box {
|
||||
border: none;
|
||||
padding-top: 0;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче