Skip to content

Commit 7e55ea3

Browse files
roy-tianroy-tian
committed
initial commit
1 parent 6e6d213 commit 7e55ea3

File tree

1,095 files changed

+57288
-1699
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,095 files changed

+57288
-1699
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
*.DS_Store
12
.idea

‎CODE_OF_CONDUCT.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# 社区参与准则
2+
3+
本代码仓库遵守「Mozilla 行为守则和道德规范」。更多信息请阅读 [Mozilla 社区参与准则](https://www.mozilla.org/about/governance/policies/participation/) 。
4+
5+
## 如何举报
6+
7+
请举报违反社区参与准则的行为，更多信息请参考 [如何举报](https://www.mozilla.org/about/governance/policies/participation/reporting/) 页面。
8+
9+
<!--
10+
## 特定项目规范
11+
12+
某些项目需要额外规范约束。如 (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)。
13+
-->

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,4 +113,4 @@ Affirmer's express Statement of Purpose.
113113
CC0 or use of the Work.
114114

115115
For more information, please see
116-
<http://creativecommons.org/publicdomain/zero/1.0/>
116+
<http://creativecommons.org/publicdomain/zero/1.0/>

‎accessibility/aria/aria-div-buttons.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>ARIA div buttons</title>
6+
<style>
7+
div {
8+
background-color: rgb(240, 240, 240);
9+
font-size: 11px;
10+
font-family: sans-serif;
11+
border: 1px outset rgb(218, 218, 218);
12+
line-height: 20px;
13+
padding: 0 6px;
14+
width: 120px;
15+
text-align: center;
16+
border-radius: 5px;
17+
margin-right: 10px;
18+
cursor: pointer;
19+
display: inline-block;
20+
}
21+
22+
div:hover, div:focus {
23+
font-weight: bold;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
29+
<h2>ARIA div buttons</h2>
30+
31+
<div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>
32+
<div data-message="This is from the second button" tabindex="0" role="button">Click me too!</div>
33+
<div data-message="This is from the third button" tabindex="0" role="button">And me!</div>
34+
35+
<script>
36+
const buttons = document.querySelectorAll('div');
37+
38+
for(let i = 0; i < buttons.length; i++) {
39+
addHandler(buttons[i]);
40+
}
41+
42+
function addHandler(button) {
43+
button.onclick = function(e) {
44+
let message = e.target.getAttribute('data-message');
45+
alert(message);
46+
}
47+
}
48+
49+
document.onkeydown = function(e) {
50+
if(e.keyCode === 13) { // The Enter/Return key
51+
document.activeElement.onclick(e);
52+
}
53+
};
54+
</script>
55+
</body>
56+
</html>

‎accessibility/aria/aria-live.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>Random quotes</title>
7+
8+
<style>
9+
html {
10+
font-family: sans-serif;
11+
}
12+
13+
h1 {
14+
letter-spacing: 2px;
15+
}
16+
17+
p {
18+
line-height: 1.6;
19+
}
20+
21+
section {
22+
padding: 10px;
23+
width: 400px;
24+
background: #666;
25+
text-shadow: 1px 1px 1px black;
26+
color: white;
27+
min-height: 150px;
28+
}
29+
30+
31+
</style>
32+
</head>
33+
34+
<body>
35+
36+
<section aria-live="assertive" aria-atomic="true">
37+
<h1>Random quote</h1>
38+
<blockquote>
39+
<p></p>
40+
</blockquote>
41+
</section>
42+
<script>
43+
const quotePara = document.querySelector('section p');
44+
45+
let quoteJson;
46+
47+
getQuotes('quotes.json', populateJson);
48+
49+
let intervalID = window.setInterval(showQuote, 10000);
50+
51+
function getQuotes(url, callback) {
52+
let request = new XMLHttpRequest();
53+
request.open('GET', url);
54+
request.responseType = 'json';
55+
request.send();
56+
57+
request.onreadystatechange = function() {
58+
if (request.readyState === 4 && request.status === 200) {
59+
callback(request.response);
60+
}
61+
};
62+
}
63+
64+
function populateJson(response) {
65+
quoteJson = response;
66+
}
67+
68+
function showQuote() {
69+
let random = Math.floor((Math.random()*25));
70+
quotePara.textContent = quoteJson[random].quote + ' -- ' + quoteJson[random].author;
71+
}
72+
</script>
73+
</body>
74+
</html>

‎accessibility/aria/aria-no-live.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>Random quotes</title>
7+
8+
<style>
9+
html {
10+
font-family: sans-serif;
11+
}
12+
13+
h1 {
14+
letter-spacing: 2px;
15+
}
16+
17+
p {
18+
line-height: 1.6;
19+
}
20+
21+
section {
22+
padding: 10px;
23+
width: 400px;
24+
background: #666;
25+
text-shadow: 1px 1px 1px black;
26+
color: white;
27+
min-height: 150px;
28+
}
29+
30+
31+
</style>
32+
</head>
33+
34+
<body>
35+
36+
<section>
37+
<h1>Random quote</h1>
38+
<blockquote>
39+
<p></p>
40+
</blockquote>
41+
</section>
42+
<script>
43+
const quotePara = document.querySelector('section p');
44+
45+
let quoteJson;
46+
47+
getQuotes('quotes.json', populateJson);
48+
49+
let intervalID = window.setInterval(showQuote, 10000);
50+
51+
function getQuotes(url, callback) {
52+
let request = new XMLHttpRequest();
53+
request.open('GET', url);
54+
request.responseType = 'json';
55+
request.send();
56+
57+
request.onreadystatechange = function() {
58+
if (request.readyState === 4 && request.status === 200) {
59+
callback(request.response);
60+
}
61+
};
62+
}
63+
64+
function populateJson(response) {
65+
quoteJson = response;
66+
}
67+
68+
function showQuote() {
69+
var random = Math.floor((Math.random()*25));
70+
quotePara.textContent = quoteJson[random].quote + ' -- ' + quoteJson[random].author;
71+
}
72+
</script>
73+
</body>
74+
</html>

‎accessibility/aria/aria-tabbed-info-box.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>ARIA tabbed info box</title>
6+
<style>
7+
8+
/* General setup */
9+
10+
html {
11+
font-family: sans-serif;
12+
}
13+
14+
* {
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
margin: 0;
20+
}
21+
22+
/* info-box setup */
23+
24+
.info-box {
25+
width: 450px;
26+
height: 400px;
27+
margin: 0 auto;
28+
}
29+
30+
/* styling info-box tabs */
31+
32+
ul[role="tablist"] {
33+
padding-left: 0;
34+
margin-top: 0;
35+
}
36+
37+
li[role="tab"] {
38+
float: left;
39+
list-style-type: none;
40+
width: 150px;
41+
display: inline-block;
42+
line-height: 3;
43+
background-color: red;
44+
color: black;
45+
text-align: center;
46+
}
47+
48+
li[role="tab"]:focus, li[role="tab"]:hover {
49+
background-color: #a60000;
50+
color: white;
51+
}
52+
53+
li[role="tab"].active {
54+
background-color: #a60000;
55+
color: white;
56+
}
57+
58+
/* styling info-box panels */
59+
60+
.info-box .panels {
61+
clear: both;
62+
position: relative;
63+
height: 352px;
64+
}
65+
66+
.info-box article {
67+
background-color: #a60000;
68+
color: white;
69+
position: absolute;
70+
padding: 10px;
71+
height: 352px;
72+
top: 0;
73+
left: 0;
74+
}
75+
76+
.info-box .active-panel {
77+
z-index: 1;
78+
}
79+
80+
81+
82+
</style>
83+
</head>
84+
<body>
85+
86+
<section class="info-box">
87+
<ul role="tablist">
88+
<li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
89+
<li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
90+
<li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
91+
</ul>
92+
<div class="panels">
93+
<article class="active-panel" role="tabpanel" aria-hidden="false">
94+
<h2>The first tab</h2>
95+
96+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
97+
</article>
98+
<article role="tabpanel" aria-hidden="true">
99+
<h2>The second tab</h2>
100+
101+
<p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
102+
</article>
103+
<article role="tabpanel" aria-hidden="true">
104+
<h2>The third tab</h2>
105+
106+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
107+
108+
<ol>
109+
<li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
110+
<li>Aliquam ut porttitor urna.</li>
111+
<li>Nulla facilisi</li>
112+
</ol>
113+
</article>
114+
</div>
115+
</section>
116+
117+
<script>
118+
119+
let tabs = document.querySelectorAll('.info-box li');
120+
let panels = document.querySelectorAll('.info-box article');
121+
122+
for(let i = 0; i < tabs.length; i++) {
123+
let tab = tabs[i];
124+
setTabHandler(tab, i);
125+
}
126+
127+
function setTab(e) {
128+
if(e.type === 'keypress' && e.keyCode !== 13) {
129+
return;
130+
}
131+
132+
let tabPos = Number(this.getAttribute('aria-posinset'))-1;
133+
for(let i = 0; i < tabs.length; i++) {
134+
if(tabs[i].getAttribute('class')) {
135+
tabs[i].removeAttribute('class');
136+
}
137+
138+
tabs[i].setAttribute('aria-selected', 'false');
139+
}
140+
141+
this.setAttribute('class', 'active');
142+
this.setAttribute('aria-selected', 'true');
143+
144+
for(let i = 0; i < panels.length; i++) {
145+
if(panels[i].getAttribute('class')) {
146+
panels[i].removeAttribute('class');
147+
}
148+
149+
panels[i].setAttribute('aria-hidden', 'true');
150+
}
151+
152+
panels[tabPos].setAttribute('class', 'active-panel');
153+
panels[tabPos].setAttribute('aria-hidden', 'false');
154+
}
155+
156+
function setTabHandler(tab) {
157+
tab.addEventListener('click', setTab);
158+
tab.addEventListener('keypress', setTab);
159+
}
160+
161+
</script>
162+
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)