Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Header nav should be tabbable and have focus state

This commit is contained in:
Kris 2018-04-13 12:53:04 -04:00
parent 3e9230714f
commit a4b8813a02
5 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/widgets/hamburger-menu.js.es6
View File

@ -153,7 +153,7 @@ export default createWidget('hamburger-menu', {
const { site } = this; const { site } = this;
if (!site.mobileView && !this.capabilities.touch) { if (!site.mobileView && !this.capabilities.touch) {
links.push({ action: 'showKeyboard', className: 'keyboard-shortcuts-link', label: 'keyboard_shortcuts_help.title' }); links.push({ href: '', action: 'showKeyboard', className: 'keyboard-shortcuts-link', label: 'keyboard_shortcuts_help.title' });
} }
if (this.site.mobileView || (this.siteSettings.enable_mobile_theme && this.capabilities.touch)) { if (this.site.mobileView || (this.siteSettings.enable_mobile_theme && this.capabilities.touch)) {

1
app/assets/javascripts/discourse/widgets/header.js.es6
View File

@ -138,6 +138,7 @@ createWidget('header-icons', {
iconId: 'toggle-hamburger-menu', iconId: 'toggle-hamburger-menu',
active: attrs.hamburgerVisible, active: attrs.hamburgerVisible,
action: 'toggleHamburger', action: 'toggleHamburger',
href: '',
contents() { contents() {
if (!attrs.flagCount) { return; } if (!attrs.flagCount) { return; }
return h('div.badge-notification.flagged-posts', { attributes: { return h('div.badge-notification.flagged-posts', { attributes: {

2
app/assets/javascripts/discourse/widgets/user-menu.js.es6
View File

@ -99,6 +99,7 @@ createWidget('user-menu-dismiss-link', {
attrs=(hash attrs=(hash
action="dismissNotifications" action="dismissNotifications"
className="dismiss" className="dismiss"
tabindex="0"
icon="check" icon="check"
label="user.dismiss" label="user.dismiss"
title="user.dismiss_notifications_tooltip")}} title="user.dismiss_notifications_tooltip")}}
@ -144,6 +145,7 @@ export default createWidget('user-menu', {
action: 'logout', action: 'logout',
className: 'logout', className: 'logout',
icon: 'sign-out', icon: 'sign-out',
href: '',
label: 'user.log_out' label: 'user.log_out'
}) })
) )

3
app/assets/stylesheets/common/base/header.scss
View File

@ -86,11 +86,12 @@
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-right: 1px solid transparent; border-right: 1px solid transparent;
transition: all linear .15s; transition: all linear .15s;
outline: none;
img.avatar { img.avatar {
width: 2.2857em; width: 2.2857em;
height: 2.2857em; height: 2.2857em;
} }
&:hover { &:hover, &:focus {
color: $primary; color: $primary;
background-color: $primary-low; background-color: $primary-low;
border-top: 1px solid transparent; border-top: 1px solid transparent;

30
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -59,8 +59,9 @@
a { a {
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
display: block; display: block;
&:hover { &:hover, &:focus {
background-color: $highlight-medium; background-color: $highlight-medium;
outline: none;
} }
} }
@ -243,9 +244,19 @@
display: none; display: none;
} }
span { color: $primary; } span {
&:hover { background-color: $highlight-medium; } color: $primary;
a { padding: 0; } }
&:hover, &:focus {
background-color: $highlight-medium;
outline: none;
}
a {
padding: 0;
}
p { p {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@ -318,9 +329,18 @@ div.menu-links-header {
border-spacing: 0 0.5em; border-spacing: 0 0.5em;
.menu-links-row { .menu-links-row {
display: table-row; display: table-row;
li.glyphs {
text-align: right;
a {
display: inline-flex;
min-width: 15px;
justify-content: center;
}
}
} }
a:hover { a:hover, a:focus {
background-color: $highlight-medium; background-color: $highlight-medium;
outline: none;
} }
a { a {
padding: 0.5em; padding: 0.5em;