-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathsample-5.01.html
145 lines (130 loc) · 4.6 KB
/
sample-5.01.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<title>Web accessibility demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="image/ico" rel="shortcut icon" href="//resources.esri.com/favicon.ico">
<link type="image/ico" rel="icon" href="//resources.esri.com/favicon.ico">
<style>
figure {
display: inline-block;
width: 130px;
height: 130px;
margin: 0;
padding: 5px;
overflow: hidden;
cursor: pointer;
}
figure:focus {
background-color: #CCC;
/*outline: none;*/
}
.carousel img {
width: 130px;
}
figcaption {
font-weight: bold;
}
#largepicture {
width: 500px;
}
</style>
</head>
<body class="claro">
<header>
<h1 tabindex="0">Web accessibility demo</h1>
<h2 tabindex="0">Capturing navigation using JavaScript focus event</h2>
</header>
<main role="main">
<div class="carousel">
<figure>
<img src="http://downloads.esri.com/blogs/places/palmsprings/tour/indian_canyons_thumbnail.jpg" alt="" />
<figcaption>Indian Canyons</figcaption>
</figure>
<figure>
<img src="http://downloads.esri.com/blogs/places/palmsprings/tour/golf_course_thumbnail.jpg" alt="" />
<figcaption>Indian Canyons Golf Resort</figcaption>
</figure>
<figure>
<img src="http://downloads.esri.com/blogs/places/palmsprings/tour/amazing_houses_thumbnail.jpg" alt="" />
<figcaption>Elrod House</figcaption>
</figure>
<figure>
<img src="http://downloads.esri.com/blogs/places/palmsprings/tour/downtown_palm_springs_thumbnail.jpg" alt="" />
<figcaption>Palm Canyon Drive</figcaption>
</figure>
<figure>
<img src="http://downloads.esri.com/blogs/places/palmsprings/tour/nightlife_thumbnail.jpg" alt="" />
<figcaption>Lulu California Bistro</figcaption>
</figure>
<figure>
<img src="http://downloads.esri.com/blogs/places/palmsprings/tour/starbucks_oasis_office_building_thumbnail.jpg" alt="" />
<figcaption>Starbucks</figcaption>
</figure>
<figure>
<img src="http://downloads.esri.com/blogs/places/palmsprings/tour/art_museum_thumbnail.jpg" alt="" />
<figcaption>Palm Springs Art Museum</figcaption>
</figure>
<figure>
<img src="http://downloads.esri.com/blogs/places/palmsprings/tour/hiking_thumbnail.jpg" alt="" />
<figcaption>The Museum Trail</figcaption>
</figure>
</div>
<div>
<img id="largepicture" src="" alt="" />
</div>
<p style="font-style: italic" tabindex="0">Content from <a href="http://storymaps.esri.com/stories/maptour-palmsprings/">Palm Springs Map Tour</a><p>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("figure")
.attr('tabindex', 0)
.on('focus', function(e){
$("#largepicture").attr(
"src",
$(this).find("img").attr("src").replace("_thumbnail", "")
);
});
$("figure").last()
.on('keydown', function(e){
if( e.keyCode === 9 ) {
var isForward = ! e.shiftKey;
if ( isForward ) {
$("h1").focus();
return false;
}
else {
return true;
}
}
});
// Prevent blue outline when using the mouse
$("body").on("mousedown", "*", function(e) {
if (($(this).is(":focus") || $(this).is(e.target)) && $(this).css("outline-style") == "none") {
// Target any element that can be focused and don't have children
$(this).css("outline", "none").on("blur", function() {
$(this).off("blur").css("outline", "");
});
// Target the image carousel
// The carousel has a focus style that use a background color that don't goes really well
// with the default focus outline, so when using mouse navigation let's disable the outline
// The outline will continue to be displayed when using keyboard navigation
// This require specific code as the container is focusable but user will likely click on one of it's child
// Disabling the ouline in CSS is possible but it would disable it for keyboard and mouse navigation
var figure = $(this).parents("figure");
if ( figure.length ) {
figure.css("outline", "none").on("blur", function() {
figure.off("blur").css("outline", "");
});
}
}
});
});
</script>
</body>
</html>