Skip to content

Commit 2f48dc1

Browse files
heatherpekrulheatherpekrul
authored
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 8c02378 commit 2f48dc1

File tree

2 files changed

+94
-92
lines changed

2 files changed

+94
-92
lines changed

‎themes/vue/layout/index.ejs

Lines changed: 92 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,110 @@
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-
The Progressive<br>JavaScript Framework
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/") %>">GET STARTED</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+
The Progressive<br>JavaScript Framework
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/") %>">GET STARTED</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>Special Sponsor</h3>
33-
<% var specialSponsor = theme.special_sponsors[0]; %>
34-
<a href="<%- specialSponsor.url %>" target="_blank" rel="noopener sponsored">
35-
<img src="<%- url_for(`/images/${specialSponsor.img}`) %>" style="width:160px" alt="Code.xyz Logo">
36-
<br>
37-
<span><%- specialSponsor.description %></span>
38-
</a>
39-
</div>
32+
<div id="special">
33+
<h3>Special Sponsor</h3>
34+
<% var specialSponsor = theme.special_sponsors[0]; %>
35+
<a href="<%- specialSponsor.url %>" target="_blank" rel="noopener sponsored">
36+
<img src="<%- url_for(`/images/${specialSponsor.img}`) %>" style="width:160px" alt="Code.xyz Logo">
37+
<br>
38+
<span><%- specialSponsor.description %></span>
39+
</a>
40+
</div>
4041

41-
<div id="highlights">
42-
<div class="inner">
43-
<div class="point">
44-
<h2>Approachable</h2>
45-
<p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
46-
</div>
42+
<div id="highlights">
43+
<div class="inner">
44+
<div class="point">
45+
<h2>Approachable</h2>
46+
<p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
47+
</div>
4748

48-
<div class="point">
49-
<h2>Versatile</h2>
50-
<p>An incrementally adoptable ecosystem that scales between a library and a full-featured framework.</p>
51-
</div>
49+
<div class="point">
50+
<h2>Versatile</h2>
51+
<p>An incrementally adoptable ecosystem that scales between a library and a full-featured framework.</p>
52+
</div>
5253

53-
<div class="point">
54-
<h2>Performant</h2>
55-
<p>
56-
20KB min+gzip Runtime<br>
57-
Blazing Fast Virtual DOM<br>
58-
Minimal Optimization Efforts
59-
</p>
54+
<div class="point">
55+
<h2>Performant</h2>
56+
<p>
57+
20KB min+gzip Runtime<br>
58+
Blazing Fast Virtual DOM<br>
59+
Minimal Optimization Efforts
60+
</p>
61+
</div>
6062
</div>
6163
</div>
62-
</div>
6364

64-
<div id="sponsors">
65-
<div class="inner">
66-
<%- partial('partials/sponsors') %>
65+
<div id="sponsors">
66+
<div class="inner">
67+
<%- partial('partials/sponsors') %>
68+
</div>
6769
</div>
68-
</div>
6970

70-
<div id="news">
71-
<div class="inner">
72-
<h3><label for="member_email">Subscribe to our Weekly Newsletter</label></h3>
73-
<form
74-
class="newsletter-form"
75-
id="revue-form"
76-
name="revue-form"
77-
target="_blank"
78-
rel="noopener"
79-
action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
80-
method="post"
81-
@submit="subscribe"
82-
>
83-
<input
84-
class="newsletter-input"
85-
type="email"
86-
name="member[email]"
87-
id="member_email"
88-
required
89-
placeholder="Email address"
90-
>
91-
<input
92-
class="button newsletter-button"
93-
type="submit"
94-
value="Subscribe"
95-
name="member[subscribe]"
96-
id="member_submit"
71+
<div id="news">
72+
<div class="inner">
73+
<h3><label for="member_email">Subscribe to our Weekly Newsletter</label></h3>
74+
<form
75+
class="newsletter-form"
76+
id="revue-form"
77+
name="revue-form"
78+
target="_blank"
79+
rel="noopener"
80+
action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
81+
method="post"
82+
@submit="subscribe"
9783
>
98-
</form>
99-
<p>
100-
You can read the previous issues and listen to our podcast at <a href="https://news.vuejs.org" target="_blank" rel="noopener">news.vuejs.org</a>.
101-
</p>
84+
<input
85+
class="newsletter-input"
86+
type="email"
87+
name="member[email]"
88+
id="member_email"
89+
required
90+
placeholder="Email address"
91+
>
92+
<input
93+
class="button newsletter-button"
94+
type="submit"
95+
value="Subscribe"
96+
name="member[subscribe]"
97+
id="member_submit"
98+
>
99+
</form>
100+
<p>
101+
You can read the previous issues and listen to our podcast at <a href="https://news.vuejs.org" target="_blank" rel="noopener">news.vuejs.org</a>.
102+
</p>
103+
</div>
102104
</div>
103-
</div>
105+
</main>
104106

105-
<div id="footer">
107+
<footer id="footer" role="contentinfo">
106108
<p>
107109
<a class="social-icon" href="https://github.com/vuejs/vue" target="_blank" rel="noopener">
108110
<%- partial('icons/github') %>
@@ -116,7 +118,7 @@
116118
</p>
117119
<p>Released under the <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener">MIT License</a><br>
118120
Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
119-
</div>
121+
</footer>
120122

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

‎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)