Skip to content

Commit 9c86abe

Browse files
heatherpekrulJinjiang
heatherpekrul
authored and
Jinjiang
committed
Fix accessibility issues relating to landmarks (#2321)
* Fix accessibility issues relating to landmarks * Revert changes to package.json * Revert inadvertent newline change to package.json
1 parent 9989483 commit 9c86abe

File tree

2 files changed

+99
-97
lines changed

2 files changed

+99
-97
lines changed

‎themes/vue/layout/index.ejs

Lines changed: 97 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,115 @@
1-
<div class="sidebar">
2-
<div class="sidebar-inner-index">
3-
<ul class="main-menu">
4-
<%- partial('partials/main_menu', { context: 'sidebar' }) %>
5-
</ul>
1+
<main role="main">
2+
<div class="sidebar">
3+
<div class="sidebar-inner-index">
4+
<ul class="main-menu">
5+
<%- partial('partials/main_menu', { context: 'sidebar' }) %>
6+
</ul>
7+
</div>
68
</div>
7-
</div>
89

9-
<div id="hero">
10-
<div class="inner">
11-
<div class="left">
12-
<img class="hero-logo" src="<%- url_for("/images/logo.png") %>" alt="vue logo">
13-
</div><div class="right">
14-
<h2 class="vue">Vue.js</h2>
15-
<h1>
16-
渐进式<br>JavaScript 框架
17-
</h1>
18-
<p>
19-
<a id="modal-player" class="button has-icon" href="javascript:;">
20-
<%- partial('icons/play') %>
21-
WHY VUE.JS?</a>
22-
<a class="button white" href="<%- url_for("/v2/guide/") %>">起步</a>
23-
<a class="button gray has-icon" href="https://github.com/vuejs/vue" target="_blank" rel="noopener">
24-
<%- partial('icons/github-dark') %>
25-
GITHUB</a>
26-
</p>
10+
<div id="hero">
11+
<div class="inner">
12+
<div class="left">
13+
<img class="hero-logo" src="<%- url_for("/images/logo.png") %>" alt="vue logo">
14+
</div><div class="right">
15+
<h2 class="vue">Vue.js</h2>
16+
<h1>
17+
渐进式<br>JavaScript 框架
18+
</h1>
19+
<p>
20+
<a id="modal-player" class="button has-icon" href="javascript:;">
21+
<%- partial('icons/play') %>
22+
WHY VUE.JS?</a>
23+
<a class="button white" href="<%- url_for("/v2/guide/") %>">起步</a>
24+
<a class="button gray has-icon" href="https://github.com/vuejs/vue" target="_blank" rel="noopener">
25+
<%- partial('icons/github-dark') %>
26+
GITHUB</a>
27+
</p>
28+
</div>
2729
</div>
2830
</div>
29-
</div>
3031

31-
<div id="special">
32-
<h3>特别赞助</h3>
33-
<%_ for (const sponsor of theme.platinum_sponsors_china) { _%>
34-
<a href="<%- sponsor.url %>" target="_blank" rel="noopener sponsored">
35-
<img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width:200px">
36-
</a>
37-
<%_ } _%>
38-
<%_if (theme.platinum_sponsors_china.length < 2) { _%>
39-
<br>
40-
<a class="become-backer" href="/support-vuejs/#special-sponsor-china">
41-
成为特别赞助商
42-
</a>
43-
<%_} _%>
44-
</div>
32+
<div id="special">
33+
<h3>特别赞助</h3>
34+
<%_ for (const sponsor of theme.platinum_sponsors_china) { _%>
35+
<a href="<%- sponsor.url %>" target="_blank" rel="noopener sponsored">
36+
<img src="<%- url_for(`/images/${sponsor.img}`) %>" style="width:200px">
37+
</a>
38+
<%_ } _%>
39+
<%_if (theme.platinum_sponsors_china.length < 2) { _%>
40+
<br>
41+
<a class="become-backer" href="/support-vuejs/#special-sponsor-china">
42+
成为特别赞助商
43+
</a>
44+
<%_} _%>
45+
</div>
4546

46-
<div id="highlights">
47-
<div class="inner">
48-
<div class="point">
49-
<h2>易用</h2>
50-
<p>已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！</p>
51-
</div>
47+
<div id="highlights">
48+
<div class="inner">
49+
<div class="point">
50+
<h2>易用</h2>
51+
<p>已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！</p>
52+
</div>
5253

53-
<div class="point">
54-
<h2>灵活</h2>
55-
<p>不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。</p>
56-
</div>
54+
<div class="point">
55+
<h2>灵活</h2>
56+
<p>不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。</p>
57+
</div>
5758

58-
<div class="point">
59-
<h2>高效</h2>
60-
<p>
61-
20kB min+gzip 运行大小<br>
62-
超快虚拟 DOM <br>
63-
最省心的优化
64-
</p>
59+
<div class="point">
60+
<h2>高效</h2>
61+
<p>
62+
20kB min+gzip 运行大小<br>
63+
超快虚拟 DOM <br>
64+
最省心的优化
65+
</p>
66+
</div>
6567
</div>
6668
</div>
67-
</div>
6869

69-
<div id="sponsors">
70-
<div class="inner">
71-
<%- partial('partials/sponsors') %>
70+
<div id="sponsors">
71+
<div class="inner">
72+
<%- partial('partials/sponsors') %>
73+
</div>
7274
</div>
73-
</div>
7475

75-
<div id="news">
76-
<div class="inner">
77-
<h3><label for="member_email">订阅我们的周刊 (英文)</label></h3>
78-
<form
79-
class="newsletter-form"
80-
id="revue-form"
81-
name="revue-form"
82-
target="_blank"
83-
rel="noopener"
84-
action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
85-
method="post"
86-
@submit="subscribe"
87-
>
88-
<input
89-
class="newsletter-input"
90-
type="email"
91-
name="member[email]"
92-
id="member_email"
93-
required
94-
placeholder="邮件地址"
95-
>
96-
<input
97-
class="button newsletter-button"
98-
type="submit"
99-
value="订阅"
100-
name="member[subscribe]"
101-
id="member_submit"
76+
<div id="news">
77+
<div class="inner">
78+
<h3><label for="member_email">订阅我们的周刊 (英文)</label></h3>
79+
<form
80+
class="newsletter-form"
81+
id="revue-form"
82+
name="revue-form"
83+
target="_blank"
84+
rel="noopener"
85+
action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
86+
method="post"
87+
@submit="subscribe"
10288
>
103-
</form>
104-
<p>
105-
你可以在 <a href="https://news.vuejs.org" target="_blank" rel="noopener">news.vuejs.org</a> 翻阅往期的 issue，也可以收听 podcast。
106-
</p>
89+
<input
90+
class="newsletter-input"
91+
type="email"
92+
name="member[email]"
93+
id="member_email"
94+
required
95+
placeholder="邮件地址"
96+
>
97+
<input
98+
class="button newsletter-button"
99+
type="submit"
100+
value="订阅"
101+
name="member[subscribe]"
102+
id="member_submit"
103+
>
104+
</form>
105+
<p>
106+
你可以在 <a href="https://news.vuejs.org" target="_blank" rel="noopener">news.vuejs.org</a> 翻阅往期的 issue，也可以收听 podcast。
107+
</p>
108+
</div>
107109
</div>
108-
</div>
110+
</main>
109111

110-
<div id="footer">
112+
<footer id="footer" role="contentinfo">
111113
<p>
112114
<a class="social-icon" href="https://github.com/vuejs/vue" target="_blank" rel="noopener">
113115
<%- partial('icons/github') %>
@@ -121,7 +123,7 @@
121123
</p>
122124
<p>遵循 <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener">MIT 开源协议</a><br>
123125
Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
124-
</div>
126+
</footer>
125127

126128
<div id="video-modal" class="modal">
127129
<div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"></div>

‎themes/vue/layout/partials/header.ejs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<div id="header">
1+
<header id="header">
22
<a id="logo" href="<%- url_for("/") %>">
33
<img src="<%- url_for("/images/logo.png") %>" alt="vue logo">
44
<span>Vue.js</span>
55
</a>
66
<ul id="nav">
77
<%- partial('partials/main_menu', { context: 'nav' }) %>
88
</ul>
9-
</div>
9+
</header>

0 commit comments

Comments
 (0)