Skip to content

Commit 2ffd2e4

Browse files
keithamuskeithamus
committed
improve example page, fix axe violations
1 parent 838e663 commit 2ffd2e4

File tree

1 file changed

+60
-27
lines changed

1 file changed

+60
-27
lines changed

‎examples/index.html‎

Lines changed: 60 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<!doctype html>
2-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
33
<head>
44
<title>Clipboard copy examples</title>
55
<script type="module" src="https://unpkg.com/@github/clipboard-copy-element@latest"></script>
@@ -8,46 +8,79 @@
88
clipboard-copy {
99
-webkit-appearance: button;
1010
-moz-appearance: button;
11-
padding: 0.2em 0.6em;
12-
font: 11px system-ui, sans-serif;
11+
padding: 0.4em 0.6em;
12+
font: 0.9rem system-ui, sans-serif;
1313
display: inline-block;
1414
cursor: default;
15+
color: rgb(36, 41, 47);
16+
background: rgb(246, 248, 250);
17+
border-radius: 6px;
18+
border: 1px solid rgba(31, 35, 40, 0.15);
19+
box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0 0, rgba(255, 255, 255, 0.25) 0 1 0 0 inset;
20+
}
21+
clipboard-copy:hover {
22+
background: rgb(243, 244, 246);
23+
}
24+
clipboard-copy:active {
25+
background: #ebecf0;
26+
}
27+
clipboard-copy:focus-visible {
28+
outline: 2px solid #0969da;
29+
}
30+
.textarea {
31+
margin-top: 30px;
32+
display: block;
1533
}
16-
.textarea { margin-top: 30px; display: block; }
1734
</style>
1835
<script>
19-
document.addEventListener('clipboard-copy', function(event) {
36+
document.addEventListener('clipboard-copy', function (event) {
2037
const notice = event.target.querySelector('.notice')
2138
notice.hidden = false
22-
setTimeout(function() {
39+
setTimeout(function () {
2340
notice.hidden = true
2441
}, 1000)
2542
})
2643
</script>
2744
</head>
2845
<body>
29-
<h1>Demo</h1>
30-
<p>Copy from <code>value</code> attribute:</p>
31-
<clipboard-copy value="@hubot copied from [value]">
32-
Copy
33-
<span class="notice" hidden>Copied!</span>
34-
</clipboard-copy>
46+
<main aria-labelledby="h">
47+
<h1 id="h">Demo</h1>
48+
<section>
49+
<p>Copy from <code>value</code> attribute:</p>
50+
<clipboard-copy value="@hubot copied from [value]">
51+
Copy
52+
<span class="notice" hidden>Copied!</span>
53+
</clipboard-copy>
54+
</section>
55+
<hr />
3556

36-
<p>Copy from an element specified by the <code>for</code> attribute:</p>
37-
<clipboard-copy for="name">
38-
Copy
39-
<span class="notice" hidden>Copied!</span>
40-
</clipboard-copy>
41-
<div id="name">@hubot copied from &lt;div&gt;</div>
57+
<section>
58+
<p>Copy from an element specified by the <code>for</code> attribute:</p>
59+
<div id="name">@hubot copied from &lt;div&gt;</div>
60+
<clipboard-copy for="name">
61+
Copy
62+
<span class="notice" hidden>Copied!</span>
63+
</clipboard-copy>
64+
</section>
65+
<hr />
4266

43-
<p>Copy from an input element specified by the <code>for</code> attribute:</p>
44-
<clipboard-copy for="login">
45-
Copy
46-
<span class="notice" hidden>Copied!</span>
47-
</clipboard-copy>
48-
<input id="login" value="@hubot copied from &lt;input&gt;" size="40">
67+
<section>
68+
<label>
69+
<p>Copy from an input element specified by the <code>for</code> attribute:</p>
70+
<input id="login" value="@hubot copied from &lt;input&gt;" size="40" />
71+
</label><br />
72+
<clipboard-copy for="login">
73+
Copy
74+
<span class="notice" hidden>Copied!</span>
75+
</clipboard-copy>
76+
</section>
77+
<hr />
4978

50-
<textarea class="textarea" rows="10" cols="50">Paste here.
51-
</textarea>
79+
<section>
80+
<label>
81+
Paste the text here to test
82+
<textarea class="textarea" rows="10" cols="50"></textarea>
83+
</label>
84+
</section>
5285
</body>
5386
</html>

0 commit comments

Comments
 (0)