Skip to content

Commit 18ff405

Browse files
sunnavysunnavy
committed
Merge branch '6.0/restore-menu-keyboard-controls' into 6.0-trunk
2 parents 012b9be + 477827a commit 18ff405

File tree

12 files changed

+565
-117
lines changed

12 files changed

+565
-117
lines changed

‎share/html/Elements/Header‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,11 @@
9999
% }
100100
</head>
101101
<body hx-boost="true" class="<% join( ' ',@{$ARGS{'BodyClass'}} ) %>">
102+
<a href="#main-navigation" class="skip-link" accesskey="7"><&|/l&>Skip to main navigation</&></a>
103+
<a href="#body" class="skip-link" accesskey="8"><&|/l&>Skip to main content</&></a>
104+
<a href="#page-navigation" class="skip-link" accesskey="9"><&|/l&>Skip to page menu</&></a>
102105
% if ( $ShowMenu ) {
103-
<div id="main-navigation"><& /Elements/Menu, menu => Menu(), id => 'app-nav' &></div>
106+
<div id="main-navigation" tabindex="-1"><& /Elements/Menu, menu => Menu(), id => 'app-nav' &></div>
104107
% }
105108

106109
% if ( $ShowMenu
@@ -162,7 +165,7 @@
162165
<div id="header"><h1 <% $TitleTrigger ? qq{hx-trigger="$TitleTrigger"} : '' |n %> <% $TitleSource ? qq{hx-get="$TitleSource"} : '' |n %>><% $Title %></h1></div>
163166
% }
164167

165-
<div class="modal" id="dynamic-modal"></div>
168+
<div class="modal" id="dynamic-modal" tabindex="-1"></div>
166169

167170
<%INIT>
168171
my $lang = 'en';

‎share/html/Elements/PageLayout‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
% }
6060
% # Close div for rt-header-container started in Header
6161
</div>
62-
<div id="body">
62+
<div id="body" role="main">
6363
% $m->callback( %ARGS, CallbackName => 'BeforeBody' );
6464
<& /Elements/SystemWarnings &>
6565
% $m->flush_buffer(); # we've got the page laid out, let's flush the buffer;

‎share/html/Elements/PersonalQuickbar‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
$Prefs => '/Prefs/Other.html'
5050
</%ARGS>
5151
<div id="quick-personal">
52-
<span class="hide"><a href="#skipnav"><&|/l&>Skip Menu</&></a> | </span>
5352
% unless ($session{'CurrentUser'}->Id) {
5453
<span id="not-logged-in"><&|/l&>Not logged in.</&></span>
5554
% }

‎share/html/Elements/SelectNewTicketQueue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
%# those contributions and any derivatives thereof.
4646
%#
4747
%# END BPS TAGGED BLOCK }}}
48-
<& /Elements/SelectQueue, Name => 'Queue', Default => $queue, %ARGS, ShowNullOption => 0, ShowAllQueues => 0, AccessKey => 9 &>
48+
<& /Elements/SelectQueue, Name => 'Queue', Default => $queue, %ARGS, ShowNullOption => 0, ShowAllQueues => 0 &>
4949

5050
<%INIT>
5151
my $queue = delete $ARGS{Default};

‎share/html/Elements/ShortcutHelp‎

Lines changed: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -68,24 +68,35 @@ $show_ticket_comment => 0
6868
<span class="left"><&|/l&>Global</&></span>
6969
<span class="right-empty"></span>
7070
</div>
71-
<div class="titlebox-content">
72-
<hr class="clear">
71+
<div class="titlebox-content d-flex flex-column align-items-center">
7372
<table>
7473
<tr>
75-
<td class="key-column"><span class="keyboard-shortcuts-key">/</span></td>
76-
<td><&|/l&>Quick search</&></td>
74+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">/</span></td>
75+
<td class="px-2 py-1"><&|/l&>Quick search</&></td>
7776
</tr>
7877
<tr>
79-
<td><span class="keyboard-shortcuts-key">gh</span></td>
80-
<td><&|/l&>Return home</&></td>
78+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">gh</span></td>
79+
<td class="px-2 py-1"><&|/l&>Return home</&></td>
8180
</tr>
8281
<tr>
83-
<td><span class="keyboard-shortcuts-key">gb</span> <span class="keyboard-shortcuts-separator">/</span> <span class="keyboard-shortcuts-key">gf</span></td>
84-
<td><&|/l&>Go back / forward</&></td>
82+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">gb</span> <span class="keyboard-shortcuts-separator">/</span> <span class="keyboard-shortcuts-key">gf</span></td>
83+
<td class="px-2 py-1"><&|/l&>Go back / forward</&></td>
8584
</tr>
8685
<tr>
87-
<td><span class="keyboard-shortcuts-key">gr</span></td>
88-
<td><&|/l&>Reload</&></td>
86+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">gr</span></td>
87+
<td class="px-2 py-1"><&|/l&>Reload</&></td>
88+
</tr>
89+
<tr>
90+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">Alt+7</span> <span class="keyboard-shortcuts-separator">/</span> <span class="keyboard-shortcuts-key">Ctrl+Alt+7</span></td>
91+
<td class="px-2 py-1"><&|/l&>Skip to main navigation</&></td>
92+
</tr>
93+
<tr>
94+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">Alt+8</span> <span class="keyboard-shortcuts-separator">/</span> <span class="keyboard-shortcuts-key">Ctrl+Alt+8</span></td>
95+
<td class="px-2 py-1"><&|/l&>Skip to main content</&></td>
96+
</tr>
97+
<tr>
98+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">Alt+9</span> <span class="keyboard-shortcuts-separator">/</span> <span class="keyboard-shortcuts-key">Ctrl+Alt+9</span></td>
99+
<td class="px-2 py-1"><&|/l&>Skip to page menu</&></td>
89100
</tr>
90101
</table>
91102
</div>
@@ -98,29 +109,28 @@ $show_ticket_comment => 0
98109
<span class="left"><&|/l&>Search</&></span>
99110
<span class="right-empty"></span>
100111
</div>
101-
<div class="titlebox-content">
102-
<hr class="clear">
112+
<div class="titlebox-content d-flex flex-column align-items-center">
103113
<table>
104114
<tr>
105-
<td class="key-column"><span class="keyboard-shortcuts-key">k</span><span class="keyboard-shortcuts-separator"> / </span><span class="keyboard-shortcuts-key">j</span></td>
106-
<td><&|/l&>Move up / down the list of results</&></td>
115+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">k</span><span class="keyboard-shortcuts-separator"> / </span><span class="keyboard-shortcuts-key">j</span></td>
116+
<td class="px-2 py-1"><&|/l&>Move up / down the list of results</&></td>
107117
</tr>
108118
<tr>
109-
<td><span class="keyboard-shortcuts-key">o</span> <span class="keyboard-shortcuts-separator">or</span> <span class="keyboard-shortcuts-key">&lt;<&|/l&>Enter</&>&gt;</span></td>
110-
<td><&|/l&>View highlighted ticket</&></td>
119+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">o</span> <span class="keyboard-shortcuts-separator">or</span> <span class="keyboard-shortcuts-key">&lt;<&|/l&>Enter</&>&gt;</span></td>
120+
<td class="px-2 py-1"><&|/l&>View highlighted ticket</&></td>
111121
</tr>
112122
<tr>
113-
<td class="key-column"><span class="keyboard-shortcuts-key">r</span></td>
114-
<td><&|/l&>Reply to ticket</&></td>
123+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">r</span></td>
124+
<td class="px-2 py-1"><&|/l&>Reply to ticket</&></td>
115125
</tr>
116126
<tr>
117-
<td><span class="keyboard-shortcuts-key">c</span></td>
118-
<td><&|/l&>Comment on ticket</&></td>
127+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">c</span></td>
128+
<td class="px-2 py-1"><&|/l&>Comment on ticket</&></td>
119129
</tr>
120130
% if($show_bulk_update) {
121131
<tr>
122-
<td><span class="keyboard-shortcuts-key">x</span></td>
123-
<td><&|/l&>Toggle highlighted ticket's checkbox</&></td>
132+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">x</span></td>
133+
<td class="px-2 py-1"><&|/l&>Toggle highlighted ticket's checkbox</&></td>
124134
</tr>
125135
% }
126136
</table>
@@ -135,19 +145,18 @@ $show_ticket_comment => 0
135145
<span class="left"><&|/l&>Ticket</&></span>
136146
<span class="right-empty"></span>
137147
</div>
138-
<div class="titlebox-content">
139-
<hr class="clear">
148+
<div class="titlebox-content d-flex flex-column align-items-center">
140149
<table>
141150
% if ( $show_ticket_reply ) {
142151
<tr>
143-
<td class="key-column"><span class="keyboard-shortcuts-key">r</span></td>
144-
<td><&|/l&>Reply to current ticket</&></td>
152+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">r</span></td>
153+
<td class="px-2 py-1"><&|/l&>Reply to current ticket</&></td>
145154
</tr>
146155
% }
147156
% if ( $show_ticket_comment ) {
148157
<tr>
149-
<td class="key-column"><span class="keyboard-shortcuts-key">c</span></td>
150-
<td><&|/l&>Comment on current ticket</&></td>
158+
<td class="text-center px-2 py-1"><span class="keyboard-shortcuts-key">c</span></td>
159+
<td class="px-2 py-1"><&|/l&>Comment on current ticket</&></td>
151160
</tr>
152161
% }
153162
</table>

‎share/html/Elements/Tabs‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646
%#
4747
%# END BPS TAGGED BLOCK }}}
4848
<& /Elements/PageLayout, show_menu => $show_menu &>
49-
<a name="skipnav" id="skipnav" accesskey="8"></a>
5049
<%INIT>
5150

5251
my $request_path = $HTML::Mason::Commands::r->path_info;

‎share/html/Install/Elements/Wrapper‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
title => $Title,
5151
show_menu => 1
5252
&>
53-
<a name="skipnav" id="skipnav" accesskey="8"></a>
5453
<% $m->content() |n%>
5554
<& /Elements/Footer &>
5655
% $m->abort;

‎share/static/css/elevator/keyboard-shortcuts.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
text-align: left;
33
}
44

5-
.keyboard-shortcuts td.key-column {
6-
width: 8em;
7-
}
8-
95
.keyboard-shortcuts h2 {
106
text-align: center;
117
}

‎share/static/css/elevator/misc.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,38 @@
33
display: none !important;
44
}
55

6+
/* Skip links - visible only when focused for keyboard accessibility */
7+
.skip-link {
8+
position: absolute;
9+
left: -10000px;
10+
top: auto;
11+
width: 1px;
12+
height: 1px;
13+
overflow: hidden;
14+
z-index: 10000;
15+
}
16+
17+
.skip-link:focus {
18+
position: fixed;
19+
top: 0;
20+
left: 0;
21+
width: auto;
22+
height: auto;
23+
padding: 0.5rem 1rem;
24+
background-color: var(--bs-primary);
25+
color: white;
26+
text-decoration: none;
27+
font-weight: bold;
28+
z-index: 10000;
29+
}
30+
31+
/* Hide focus outline on elements that receive programmatic focus.
32+
Users don't tab to these elements directly, so the outline isn't needed. */
33+
#body:focus,
34+
#main-navigation:focus {
35+
outline: none;
36+
}
37+
638
.clear {
739
clear: both;
840
}

‎share/static/css/elevator/nav.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,12 @@
298298
background: #cfdeff;
299299
}
300300

301+
/* Keyboard navigation focus styling - only active when keyboard nav is detected */
302+
body.keyboard-nav-active #app-nav > li > a.menu-item:focus,
303+
body.keyboard-nav-active .page-menu > li > a.menu-item:focus {
304+
background: #cfdeff;
305+
}
306+
301307
#topactions form input.btn {
302308
border-color: #4868b3;
303309
}
@@ -347,6 +353,12 @@
347353
background: #3a474d;
348354
}
349355

356+
/* Keyboard navigation focus styling for dark mode */
357+
body.keyboard-nav-active #app-nav > li > a.menu-item:focus,
358+
body.keyboard-nav-active .page-menu > li > a.menu-item:focus {
359+
background: #3a474d;
360+
}
361+
350362
.nav-tabs {
351363
border-bottom: 1px solid #515151;
352364
}

0 commit comments

Comments
 (0)