Skip to content

Commit 71279ce

Browse files
iansan5653iansan5653
authored
Merge pull request #90 from github/fix-mapper-tool-accessibility
Improve mapper tool accessibility
2 parents 9121c3d + 3058d39 commit 71279ce

File tree

4 files changed

+4940
-60
lines changed

4 files changed

+4940
-60
lines changed

‎examples/demo.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>hotkey | Demo</title>
7+
</head>
8+
9+
<body>
10+
11+
<button onclick="alert('clicked button 1!')" data-hotkey-scope="text-area-1" data-hotkey="Control+d,Meta+d">press meta+d or ctrl+d in text area 1 to click button 1</button><br>
12+
<textarea id="text-area-1" rows="4" cols="40">text area 1</textarea><br>
13+
<button onclick="alert('clicked button 2!')" data-hotkey-scope="text-area-2" data-hotkey="Control+d,Meta+d">press meta+d or ctrl+d in text area 2 to click button 2</button><br>
14+
<textarea id="text-area-2" rows="4" cols="40">text area 2</textarea><br>
15+
<label><input data-hotkey="t" type="text">Press t to focus this field</label><br>
16+
<label><input data-hotkey="r" type="checkbox">Press r to check/uncheck this checkbox</label><br>
17+
<a href="#ok" data-hotkey="o k">Press <kbd>o k</kbd> click this link</a>
18+
19+
<script type="module">
20+
// import {install} from '../dist/index.js'
21+
import {install} from 'https://unpkg.com/@github/hotkey@latest?module'
22+
23+
for (const el of document.querySelectorAll('[data-hotkey]')) {
24+
install(el)
25+
}
26+
</script>
27+
</body>
28+
29+
</html>

‎examples/hotkey_mapper.html

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,47 @@
44
<head>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width">
7-
<title>Hotkey Mapper Tool</title>
7+
<title>hotkey | Mapper Tool</title>
88
<link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
99
<script type="module" src="https://unpkg.com/@github/clipboard-copy-element@latest?module"></script>
10-
<style>
11-
.copy {
12-
/* marg */
13-
}
14-
</style>
1510
</head>
1611

1712
<body>
18-
<div class="blankslate mx-auto col-12 col-md-8 col-lg-6">
19-
<h1>Hotkey Code</h1>
20-
<p>Type your desired key combination on the keyboard to see the corresponding Hotkey string.</p>
13+
<div class="mx-auto my-3 col-12 col-md-8 col-lg-6">
14+
<h1 id="app-name">Hotkey Code</h1>
15+
<p id="hint">Press a key combination to see the corresponding hotkey string.</p>
2116
<div class="position-relative">
22-
<clipboard-copy for="hotkey-code" class="position-absolute top-2 right-2">
23-
<button aria-label="Copy to clipboard" class="btn">
24-
<svg aria-hidden="true" role="img" class="StyledOcticon-uhnt7w-0 iIOaoH" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>
25-
</button>
17+
<input
18+
role="application"
19+
aria-roledescription="Input Capture"
20+
autofocus
21+
aria-labelledby="app-name"
22+
aria-describedby="hint"
23+
aria-live="assertive"
24+
aria-atomic="true"
25+
id="hotkey-code"
26+
class="border rounded-2 mt-2 p-6 f1 text-mono"
27+
style="width: 100%"
28+
/>
29+
30+
<clipboard-copy for="hotkey-code" class="position-absolute bottom-2 right-2 btn">
31+
Copy to clipboard
2632
</clipboard-copy>
27-
<div id="hotkey-code" class="border rounded-2 p-6 f1 text-mono overflow-auto">&nbsp;</div>
2833
</div>
2934
</div>
3035

3136
<script type="module">
3237
// import {eventToHotkeyString} from '../dist/index.js'
33-
import {eventToHotkeyString} from 'https://unpkg.com/@github/hotkey@latest?module';
34-
const codeInput = document.getElementById('hotkey-code');
35-
document.addEventListener('keydown', event => {
36-
const code = eventToHotkeyString(event);
37-
console.log(`Hotkey Code is: "${code}"`);
38-
codeInput.innerText = code;
38+
import {eventToHotkeyString} from 'https://unpkg.com/@github/hotkey@latest?module'
39+
40+
document.getElementById('hotkey-code').addEventListener('keydown', event => {
41+
if (event.key === "Tab")
42+
return;
43+
3944
event.preventDefault();
4045
event.stopPropagation();
46+
47+
event.currentTarget.value = eventToHotkeyString(event);
4148
})
4249
</script>
4350
</body>

‎examples/index.html

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,22 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>hotkey demo</title>
6+
<meta name="viewport" content="width=device-width">
7+
<title>hotkey</title>
8+
<link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
79
</head>
810

911
<body>
10-
11-
<button onclick="alert('clicked button 1!')" data-hotkey-scope="text-area-1" data-hotkey="Control+d,Meta+d">press meta+d or ctrl+d in text area 1 to click button 1</button><br>
12-
<textarea id="text-area-1" rows="4" cols="40">text area 1</textarea><br>
13-
<button onclick="alert('clicked button 2!')" data-hotkey-scope="text-area-2" data-hotkey="Control+d,Meta+d">press meta+d or ctrl+d in text area 2 to click button 2</button><br>
14-
<textarea id="text-area-2" rows="4" cols="40">text area 2</textarea><br>
15-
<label><input data-hotkey="t" type="text">Press t to focus this field</label><br>
16-
<label><input data-hotkey="r" type="checkbox">Press r to check/uncheck this checkbox</label><br>
17-
<a href="#ok" data-hotkey="o k">Press <kbd>o k</kbd> click this link</a>
18-
19-
<script type="module">
20-
// import {install} from '../dist/index.js'
21-
import {install} from 'https://unpkg.com/@github/hotkey@latest?module'
22-
23-
for (const el of document.querySelectorAll('[data-hotkey]')) {
24-
install(el)
25-
}
26-
</script>
12+
<div class="mx-auto my-3 col-12 col-md-8 col-lg-6">
13+
<h1 class="text-mono">@github/hotkey</h1>
14+
<nav>
15+
<ul>
16+
<li><a href="https://github.com/github/hotkey">Repository & docs</a></li>
17+
<li><a href="hotkey_mapper.html">Mapper tool</a></li>
18+
<li><a href="demo.html">Demo</a></li>
19+
</ul>
20+
</nav>
21+
</div>
2722
</body>
2823

2924
</html>

0 commit comments

Comments
 (0)