Make ULS trigger and settings more keyboard accessible
It's now possible to tab to "display settings" and "input settings" and access them with enter or space. Also escape can now be used to close the settings screen. The ULS trigger in interlanguage position is a button to get native accessibility features. Also removed `mw.hook( 'mw.uls.settings.open' ).fire( 'uls' );` as it didn't seem very useful and there wasn't immediately obvious place to put it. The existing click handler could be removed because the settings dialog themselves place event listeners. The patch is a bit longer than strictly necessary because the CSS was mess (rules in different modules, poorly organized) and I had to bring related rules together to understand them. Bug: T52793 Change-Id: Id37c2665b1c97b81ef57be27a1abfae0db6b34d5
This commit is contained in:
Niklas Laxström
committed by
petarpetkovic
petarpetkovic
parent
75e80446cb
commit
fca9b5c0e6
@@ -1,14 +1,5 @@
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
div.display-settings-block {
|
||||
background: transparent no-repeat left top;
|
||||
.background-image-svg( '../images/display.svg', '../images/display.png' );
|
||||
background-size: 20px auto;
|
||||
color: #222;
|
||||
padding-left: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uls-display-settings-tab-switcher {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
.input-settings-block {
|
||||
background: transparent no-repeat left top;
|
||||
.background-image-svg( '../images/input.svg', '../images/input.png' );
|
||||
background-size: 20px auto;
|
||||
color: #222;
|
||||
padding-left: 26px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.imelabel {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
|
||||
@@ -7,16 +7,31 @@
|
||||
padding-left: 10px;
|
||||
line-height: 1.2em;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
#uls-settings-block div.display-settings-block,
|
||||
#uls-settings-block div.input-settings-block {
|
||||
display: inline-block;
|
||||
margin: 8px 15px;
|
||||
color: #54595d;
|
||||
}
|
||||
> button {
|
||||
background: left top transparent no-repeat;
|
||||
// Support: Safari 3.1-6.1 & Android browser 3-4.3
|
||||
// Don't support `background-size` values in `background` shorthand
|
||||
background-size: 20px auto;
|
||||
color: #54595d;
|
||||
display: inline-block;
|
||||
// Normalize the button
|
||||
margin: 8px 15px;
|
||||
border: 0;
|
||||
padding: 0 0 0 26px;
|
||||
font-size: medium;
|
||||
cursor: pointer;
|
||||
|
||||
#uls-settings-block div.display-settings-block:hover,
|
||||
#uls-settings-block div.input-settings-block:hover {
|
||||
color: #222;
|
||||
&:hover {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
&.display-settings-block {
|
||||
.background-image-svg( '../images/display.svg', '../images/display.png' );
|
||||
}
|
||||
|
||||
&.input-settings-block {
|
||||
.background-image-svg( '../images/input.svg', '../images/input.png' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,12 +2,22 @@
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
#p-lang .uls-settings-trigger {
|
||||
background: transparent no-repeat right top;
|
||||
background: transparent no-repeat center top;
|
||||
.background-image-svg( '../images/cog-sprite.svg', '../images/cog-sprite.png' );
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
border: 0;
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
|
||||
// Remove the dotted border for Firefox
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 1px solid #36c;
|
||||
}
|
||||
}
|
||||
|
||||
.skin-vector #p-lang .uls-settings-trigger {
|
||||
@@ -16,5 +26,5 @@
|
||||
}
|
||||
|
||||
#p-lang .uls-settings-trigger:hover {
|
||||
background-position: right -16px;
|
||||
background-position: center -16px;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,6 @@
|
||||
@import 'mediawiki.mixins';
|
||||
|
||||
/* stylelint-disable selector-max-id */
|
||||
#uls-settings-block {
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #c8ccd1;
|
||||
padding-left: 10px;
|
||||
line-height: 1.2em;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
|
||||
.uls-menu h3 {
|
||||
border-bottom: medium none;
|
||||
font-size: 14pt;
|
||||
@@ -18,32 +10,84 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#languagesettings-panels .languagesettings-menu {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.languagesettings-menu {
|
||||
|
||||
.settings-title {
|
||||
font-size: 13pt;
|
||||
}
|
||||
/* Override grid padding */
|
||||
.grid & {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.settings-text {
|
||||
color: #54595d;
|
||||
font-size: 9pt;
|
||||
}
|
||||
h1 {
|
||||
color: #000;
|
||||
font-size: 16pt;
|
||||
line-height: 20pt;
|
||||
margin-top: 0;
|
||||
font-weight: normal;
|
||||
border: 0;
|
||||
padding: 8px 0 3px 15px;
|
||||
}
|
||||
|
||||
.display-settings-block:hover .settings-text {
|
||||
color: #222;
|
||||
}
|
||||
.menu-section {
|
||||
/* Unstyle the button. Other properties seem already overriden. */
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
/* Using border instead of outline for focus (outline doesn't have enough space) */
|
||||
outline: 0;
|
||||
|
||||
.languagesettings-menu h1 {
|
||||
color: #000;
|
||||
font-size: 16pt;
|
||||
line-height: 20pt;
|
||||
margin-top: 0;
|
||||
font-weight: normal;
|
||||
border: 0;
|
||||
padding: 8px 0 3px 15px;
|
||||
color: #222;
|
||||
padding: 5px 0 5px 42px;
|
||||
border: 1px solid transparent;
|
||||
background: left 15px top 6px transparent no-repeat;
|
||||
background-size: 20px auto;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
// Remove the dotted border for Firefox
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Active "tab" has thicker always visible left border. background-position
|
||||
* and padding must be tweaked to avoid the image from moving */
|
||||
&.active {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
padding-left: 40px;
|
||||
background-position: left 13px top 6px;
|
||||
border-left-width: 3px;
|
||||
border-left-color: #36c;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #36c;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.settings-text {
|
||||
color: #54595d;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
&:hover .settings-text {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
&.display-settings-block {
|
||||
.background-image-svg( '../images/display.svg', '../images/display.png' );
|
||||
}
|
||||
|
||||
&.input-settings-block {
|
||||
.background-image-svg( '../images/input.svg', '../images/input.png' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#languagesettings-settings-panel {
|
||||
@@ -65,15 +109,6 @@
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
/* Buttons in the selector panel */
|
||||
.menu-section {
|
||||
color: #72777d;
|
||||
padding: 5px 0 5px 50px;
|
||||
border-left: 3px solid transparent;
|
||||
display: block;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.language-settings-dialog {
|
||||
background: #f8f9fa;
|
||||
/* Ensure base font size is same in different skins */
|
||||
@@ -84,23 +119,6 @@
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#languagesettings-panels .menu-section.active,
|
||||
#languagesettings-panels .menu-section.active:hover {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border-left-color: #36c;
|
||||
}
|
||||
|
||||
.settings-menu-items .menu-section {
|
||||
background-position: 6% 6px;
|
||||
padding-left: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-menu-items .menu-section:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.language-settings-buttons {
|
||||
border-top: 1px solid #eaecf0;
|
||||
margin-top: 25px;
|
||||
|
||||
Reference in New Issue
Block a user