Skip to content

Commit edd465d

Browse files
author
michael-n-cooper
committed
Merge pull request #7 from LjWatson/master
Created practices/examples folder, and added link design pattern example...
2 parents 54efb0d + 5bd6f5a commit edd465d

File tree

4 files changed

+129
-0
lines changed

4 files changed

+129
-0
lines changed

‎practices/examples/link-design-pattern/css/basic.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
html, body
2+
{
3+
font: normal 95% Helvetica, Verdana, Arial, sans-serif;
4+
color: #000;
5+
padding: 0;
6+
margin: 0;
7+
}
8+
9+
body
10+
{
11+
padding: 0.5em 0.7em;
12+
margin: 0 4em 0 1em;
13+
max-width: 55em;
14+
background: #fff;
15+
}
16+
17+
h1, h2, h3
18+
{
19+
font: normal 170%/100% Garamond, "Times New Roman", serif;
20+
margin-bottom: 0;
21+
color: 630;
22+
background: transparent;
23+
}
24+
25+
h1
26+
{
27+
padding: 0.2em;
28+
}
29+
30+
h2
31+
{
32+
font: normal 150%/100% Garamond, "Times New Roman", serif;
33+
}
34+
35+
h3 {
36+
font: normal 140%/120% Garamond, "Times New Roman", serif;
37+
}
38+
39+
a
40+
{
41+
color: #009;
42+
background: transparent;
43+
}
44+
45+
a:visited
46+
{
47+
color:#360;
48+
background:transparent;
49+
}
50+
51+
a:hover, a:focus, a:active
52+
{
53+
color:#000;
54+
background-color: #fc0;
55+
}
56+
57+
img
58+
{
59+
border: none;
60+
}
61+

‎practices/examples/link-design-pattern/css/links.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
[role="link"]
2+
{
3+
color: #009;
4+
background: transparent;
5+
text-decoration: underline;
6+
}
7+
8+
[role="link"]:hover, [role="link"]:focus, [role="link"]:active
9+
{
10+
color:#000;
11+
background-color: #fc0;
12+
cursor: pointer;
13+
}
14+

‎practices/examples/link-design-pattern/js/links.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
function fetchResource(event)
2+
{
3+
window.location.href = 'http://w3.org/';
4+
}
5+
6+
// Check if the enter (key code 13) has been pressed
7+
function handleLinkKeyUp(event)
8+
{
9+
event = event || window.event;
10+
11+
if (event.keyCode === 13)
12+
{
13+
fetchResource(event);
14+
}
15+
}
16+
17+
window.onload = init;

‎practices/examples/link-design-pattern/links.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<title>Link design pattern</title>
7+
<meta charset="utf-8">
8+
<link rel="stylesheet" type="text/css" href="css/basic.css">
9+
<link rel="stylesheet" type="text/css" href="css/links.css">
10+
<script src="js/links.js"></script>
11+
</head>
12+
13+
<body>
14+
<h1>Link design pattern</h1>
15+
16+
<p>This link is based on the <a href="http://www.w3.org/TR/wai-aria-practices/#link">link design pattern</a> in the <a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices Guide</a>.</p>
17+
18+
<h2>Example link</h2>
19+
20+
<p>
21+
<span id="link" tabindex="0" role="link" onclick="fetchResource(event);" onkeyup="handleLinkKeyUp(event);">W3C website</span>
22+
</p>
23+
24+
<h2>Example link code</h2>
25+
26+
<div>
27+
<pre><code>
28+
&lt;span id="link" tabindex="0" role="link" onclick="fetchResource(event);" onkeyup="handleLinkKeyUp(event);"&gt;W3C website&lt;/span&gt;
29+
</code></pre>
30+
</div>
31+
32+
<h2>Example link notes</h2>
33+
34+
<p>Should we include notes?</p>
35+
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)