upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-02-19 02:38:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

Augment keyboard accessibility of contacts menu

Browse source 
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng 2022-06-06 19:13:40 +00:00
parent dcf25d6c77
commit c1054ea5eb
10 changed files with 85 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
core/css/server.css
View file

@ -957,6 +957,12 @@ span.ui-icon {
#contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
opacity: 1 !important;
}
#contactsmenu #contactsmenu-menu a {
padding: 2px;
}
#contactsmenu #contactsmenu-menu a:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-main-text) !important;
}
#header .header-right > div#contactsmenu > .menu {
/* show 2.5 to 4.5 entries depending on the screen height */
@ -997,9 +1003,6 @@ span.ui-icon {
border-bottom: 1px solid var(--color-border);
/* actions menu */
}
#header .header-right > div#contactsmenu > .menu .contact :last-of-type {
border-bottom: none;
}
#header .header-right > div#contactsmenu > .menu .contact .avatar {
height: 32px;
width: 32px;
@ -1026,13 +1029,25 @@ span.ui-icon {
#header .header-right > div#contactsmenu > .menu .contact .top-action, #header .header-right > div#contactsmenu > .menu .contact .second-action, #header .header-right > div#contactsmenu > .menu .contact .other-actions {
width: 16px;
height: 16px;
padding: 14px;
opacity: 0.5;
cursor: pointer;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action :hover, #header .header-right > div#contactsmenu > .menu .contact .second-action :hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions :hover {
#header .header-right > div#contactsmenu > .menu .contact .top-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .second-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .other-actions:not(button) {
padding: 14px;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action:hover, #header .header-right > div#contactsmenu > .menu .contact .top-action:active, #header .header-right > div#contactsmenu > .menu .contact .top-action:focus, #header .header-right > div#contactsmenu > .menu .contact .second-action:hover, #header .header-right > div#contactsmenu > .menu .contact .second-action:active, #header .header-right > div#contactsmenu > .menu .contact .second-action:focus, #header .header-right > div#contactsmenu > .menu .contact .other-actions:hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions:active, #header .header-right > div#contactsmenu > .menu .contact .other-actions:focus {
opacity: 1;
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions {
margin: 5px;
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--color-main-text);
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus-visible {
border-radius: var(--border-radius-pill);
}
#header .header-right > div#contactsmenu > .menu .contact .menu {
top: 47px;
margin-right: 13px;

2
core/css/server.css.map
View file

File diff suppressed because one or more lines are too long

25
core/css/styles.css
View file

@ -956,6 +956,12 @@ span.ui-icon {
#contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
opacity: 1 !important;
}
#contactsmenu #contactsmenu-menu a {
padding: 2px;
}
#contactsmenu #contactsmenu-menu a:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-main-text) !important;
}
#header .header-right > div#contactsmenu > .menu {
/* show 2.5 to 4.5 entries depending on the screen height */
@ -996,9 +1002,6 @@ span.ui-icon {
border-bottom: 1px solid var(--color-border);
/* actions menu */
}
#header .header-right > div#contactsmenu > .menu .contact :last-of-type {
border-bottom: none;
}
#header .header-right > div#contactsmenu > .menu .contact .avatar {
height: 32px;
width: 32px;
@ -1025,13 +1028,25 @@ span.ui-icon {
#header .header-right > div#contactsmenu > .menu .contact .top-action, #header .header-right > div#contactsmenu > .menu .contact .second-action, #header .header-right > div#contactsmenu > .menu .contact .other-actions {
width: 16px;
height: 16px;
padding: 14px;
opacity: 0.5;
cursor: pointer;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action :hover, #header .header-right > div#contactsmenu > .menu .contact .second-action :hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions :hover {
#header .header-right > div#contactsmenu > .menu .contact .top-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .second-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .other-actions:not(button) {
padding: 14px;
}
#header .header-right > div#contactsmenu > .menu .contact .top-action:hover, #header .header-right > div#contactsmenu > .menu .contact .top-action:active, #header .header-right > div#contactsmenu > .menu .contact .top-action:focus, #header .header-right > div#contactsmenu > .menu .contact .second-action:hover, #header .header-right > div#contactsmenu > .menu .contact .second-action:active, #header .header-right > div#contactsmenu > .menu .contact .second-action:focus, #header .header-right > div#contactsmenu > .menu .contact .other-actions:hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions:active, #header .header-right > div#contactsmenu > .menu .contact .other-actions:focus {
opacity: 1;
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions {
margin: 5px;
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--color-main-text);
}
#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus-visible {
border-radius: var(--border-radius-pill);
}
#header .header-right > div#contactsmenu > .menu .contact .menu {
top: 47px;
margin-right: 13px;

2
core/css/styles.css.map
View file

File diff suppressed because one or more lines are too long

36
core/css/styles.scss
View file

@ -1015,6 +1015,16 @@ span.ui-icon {
opacity: 1 !important;
}
}
#contactsmenu-menu {
a {
padding: 2px;
&:focus-visible {
box-shadow: inset 0 0 0 2px var(--color-main-text) !important; // override rule in core/css/headers.scss #header a:focus-visible
}
}
}
}
#header .header-right > div#contactsmenu > .menu {
@ -1059,10 +1069,6 @@ span.ui-icon {
padding: 3px 3px 3px 10px;
border-bottom: 1px solid var(--color-border);
:last-of-type {
border-bottom: none;
}
.avatar {
height: 32px;
width: 32px;
@ -1093,15 +1099,33 @@ span.ui-icon {
.top-action, .second-action, .other-actions {
width: 16px;
height: 16px;
padding: 14px;
opacity: .5;
cursor: pointer;
:hover {
&:not(button) {
padding: 14px;
}
&:hover,
&:active,
&:focus {
opacity: 1;
}
}
button.other-actions {
margin: 5px;
&:focus {
border-color: transparent;
box-shadow: 0 0 0 2px var(--color-main-text);
}
&:focus-visible {
border-radius: var(--border-radius-pill);
}
}
/* actions menu */
.menu {
top: 47px;

9
core/src/OC/contactsmenu/contact.handlebars
View file

@ -27,8 +27,13 @@
<div class="email-address">{{contact.emailAddresses}}</div>
</a>
{{/if}}
{{#if contact.topAction}}
<a class="top-action" href="{{contact.topAction.hyperlink}}" title="{{contact.topAction.title}}">
<img src="{{contact.topAction.icon}}" alt="{{contact.topAction.title}}">
</a>
{{/if}}
{{else if contact.topAction}}
<a class="body" href="{{contact.topAction.hyperlink}}">
<a class="body" href="{{contact.topAction.hyperlink}}">
<div class="full-name">{{contact.fullName}}</div>
<div class="last-message">{{contact.lastMessage}}</div>
<div class="email-address">{{contact.emailAddresses}}</div>
@ -49,7 +54,7 @@
</a>
{{/if}}
{{#if contact.hasManyActions}}
<span class="other-actions icon-more"></span>
<button class="other-actions icon-more"></button>
<div class="menu popovermenu">
<ul>
{{#each contact.actions}}

4
dist/core-login.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/core-login.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/core-main.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/core-main.js.map vendored
View file

File diff suppressed because one or more lines are too long