Skip to content

Commit ab18f21

Browse files
RyanCavanaughRyanCavanaugh
authored
Merge pull request #2338 from RyanCavanaugh/v2
Fix various accessibility issues
2 parents 246798d + 29d2703 commit ab18f21

File tree

14 files changed

+210
-127
lines changed

14 files changed

+210
-127
lines changed

‎packages/playground/src/index.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -191,21 +191,21 @@ export const setupPlayground = (
191191
const lenses = !showFileCodeLens
192192
? []
193193
: [
194-
{
195-
range: {
196-
startLineNumber: 1,
197-
startColumn: 1,
198-
endLineNumber: 2,
199-
endColumn: 1,
200-
},
201-
id: "implicit-filename-first",
202-
command: {
203-
id: "noop",
204-
title: `// @filename: ${sandbox.filepath}`,
205-
},
194+
{
195+
range: {
196+
startLineNumber: 1,
197+
startColumn: 1,
198+
endLineNumber: 2,
199+
endColumn: 1,
206200
},
207-
]
208-
return { lenses, dispose: () => {} }
201+
id: "implicit-filename-first",
202+
command: {
203+
id: "noop",
204+
title: `// @filename: ${sandbox.filepath}`,
205+
},
206+
},
207+
]
208+
return { lenses, dispose: () => { } }
209209
},
210210
})
211211

@@ -338,7 +338,7 @@ export const setupPlayground = (
338338
a.parentElement!.classList.toggle("open")
339339
a.setAttribute("aria-expanded", "true")
340340

341-
const exampleContainer = a.closest("li")!.getElementsByTagName("ul").item(0)
341+
const exampleContainer = a.closest("li")!.getElementsByClassName("dropdown-dialog").item(0) as HTMLElement
342342
if (!exampleContainer) return
343343

344344
const firstLabel = exampleContainer.querySelector("label") as HTMLElement
@@ -359,7 +359,7 @@ export const setupPlayground = (
359359
if (lastButton) {
360360
redirectTabPressTo(lastButton, exampleContainer, ".examples-close")
361361
} else {
362-
const sections = document.querySelectorAll("ul.examples-dropdown .section-content")
362+
const sections = document.querySelectorAll(".dropdown-dialog .section-content")
363363
sections.forEach(s => {
364364
const buttons = s.querySelectorAll("a.example-link")
365365
const lastButton = buttons.item(buttons.length - 1) as HTMLElement

‎packages/typescriptlang-org/src/components/ShowExamples.scss

+25-24
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,28 @@
1414
color: var(--link-color);
1515
}
1616

17+
button.section-name {
18+
font-size: 2rem;
19+
font-weight: 600;
20+
21+
height: 2.8rem;
22+
text-decoration: none;
23+
border-bottom: none;
24+
padding-bottom: 0.05rem;
25+
margin-top: 0;
26+
padding-top: 0;
27+
margin-right: 1rem;
28+
border: none;
29+
background-color: transparent;
30+
color: var(--text-color);
31+
}
32+
33+
button.section-name.selected {
34+
border-bottom: $ts-main-blue-color 2px solid;
35+
}
36+
1737
// The titles of the sections
18-
> ol {
38+
>ol {
1939
padding-left: 0;
2040

2141
li {
@@ -28,26 +48,6 @@
2848
background-color: transparent;
2949
}
3050
}
31-
32-
button.section-name {
33-
font-size: 2rem;
34-
font-weight: 600;
35-
36-
height: 2.8rem;
37-
text-decoration: none;
38-
border-bottom: none;
39-
padding-bottom: 0.05rem;
40-
margin-top: 0;
41-
padding-top: 0;
42-
margin-right: 1rem;
43-
border: none;
44-
background-color: transparent;
45-
color: var(--text-color);
46-
}
47-
48-
button.section-name.selected {
49-
border-bottom: $ts-main-blue-color 2px solid;
50-
}
5151
}
5252

5353
ol {
@@ -56,11 +56,11 @@
5656
padding-left: 0;
5757
}
5858

59-
> div.section-content {
59+
>div.section-content {
6060
flex-wrap: wrap;
6161
display: flex;
6262

63-
> p > a {
63+
>p>a {
6464
display: inline-block;
6565
color: $ts-main-blue-color;
6666
padding: 0;
@@ -118,6 +118,7 @@
118118
&.done {
119119
background-color: $ts-main-blue-darker-color;
120120
}
121+
121122
&.changed {
122123
border: $ts-main-blue-darker-color 1px solid;
123124
}
@@ -126,4 +127,4 @@
126127
}
127128
}
128129
}
129-
}
130+
}

‎packages/typescriptlang-org/src/components/ShowExamples.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -108,18 +108,16 @@ export const RenderExamples = (props: Props) => {
108108
const sections = props.sections.map(sectionID => locale.sections.find(localeSection => sectionID === localeSection.id) || english.sections.find(localeSection => sectionID === localeSection.id))
109109
return (
110110
<div className="examples">
111-
<ol role="tablist">
111+
<div role="tablist">
112112
{sections.map(section => {
113113
const startOpen = section.id === props.defaultSection
114114
const selectedClass = startOpen ? " selected" : ""
115115
return (
116-
<li key={section.name}>
117-
<button role="tab" onClick={buttonOnClick(section.id.toLowerCase().replace(".", "-"))} className={"section-name button " + selectedClass} aria-selected={selectedClass.length ? "true" : "false"} >{section.name}</button>
118-
</li>
116+
<button key={section.name} role="tab" onClick={buttonOnClick(section.id.toLowerCase().replace(".", "-"))} className={"section-name button " + selectedClass} aria-selected={selectedClass.length ? "true" : "false"} >{section.name}</button>
119117
)
120118
}
121119
)}
122-
</ol>
120+
</div>
123121

124122
{sections.map(section => {
125123
const sectionDict = sortedSectionsDictionary(locale, section)

‎packages/typescriptlang-org/src/components/layout/SiteFooter-PlaygroundSamples.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const PlaygroundSamples = (props: Props) => {
5050
}, []);
5151

5252
return (
53-
<div id="playground-samples-popover" aria-hidden="true" aria-label="Code Samples Submenu">
53+
<div id="playground-samples-popover" aria-hidden="true" aria-label="Code Samples Submenu" tabIndex={-1}>
5454
<RenderExamples defaultSection="TypeScript" sections={["JavaScript", "TypeScript"]} />
5555
<div className="arrow-down" />
5656
</div>)

‎packages/typescriptlang-org/src/components/layout/TopNav.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const SiteNav = (props: Props) => {
3030

3131
// @ts-ignore - this comes from the script above
3232
docsearch({
33-
appId:"BGCDYOIYZ5",
33+
appId: "BGCDYOIYZ5",
3434
apiKey: '37ee06fa68db6aef451a490df6df7c60',
3535
indexName: 'typescriptlang',
3636
inputSelector: '.search input',
@@ -99,8 +99,7 @@ export const SiteNav = (props: Props) => {
9999

100100

101101
<div className="right above-small">
102-
103-
<nav role="navigation" className="search-section">
102+
<div className="search-section">
104103
<OpenInMyLangQuickJump />
105104
<div className="nav-item">
106105
<form id="search-form" className="search top-nav" role="search">
@@ -109,7 +108,7 @@ export const SiteNav = (props: Props) => {
109108
<input type="submit" style={{ display: "none" }} />
110109
</form>
111110
</div>
112-
</nav>
111+
</div>
113112
</div>
114113
</div>
115114

‎packages/typescriptlang-org/src/copy/en/community.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
export const comCopy = {
2-
com_layout_title: "How to set up TypeScript", // FIXME: Is this the right title for the community page?
2+
com_layout_title: "TypeScript Community Resources",
33
com_layout_description:
44
"Connect with other TypeScripters online and offline.",
5-
com_headline: "Connect with us", // FIXME: I think this is not used anywhere
5+
com_headline: "Connect with us",
66
com_connect_online: "Online",
77
com_connect_online_description:
88
" Tell us what’s working well, what you want to see added or improved, and find out about new updates.",

‎packages/typescriptlang-org/src/templates/documentation.scss

+19-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
@import "../style/globals.scss";
22

33
#beta {
4-
background: repeating-linear-gradient(
5-
45deg,
6-
#9b9a4e,
7-
#9b9a4e 10px,
8-
#6e6a33 10px,
9-
#6e6a33 20px
10-
);
4+
background: repeating-linear-gradient(45deg,
5+
#9b9a4e,
6+
#9b9a4e 10px,
7+
#6e6a33 10px,
8+
#6e6a33 20px);
119
background-color: "#c63131";
1210
text-align: center;
1311
color: white;
@@ -32,7 +30,7 @@
3230
}
3331

3432
// Page title
35-
& > h2 {
33+
&>h1 {
3634
font-size: 3.5rem;
3735
line-height: 3.5rem;
3836
font-weight: 400;
@@ -76,9 +74,11 @@
7674
nav {
7775
position: sticky;
7876
top: 30px;
77+
7978
&.deprecated {
8079
top: 7rem;
8180
}
81+
8282
margin-bottom: 1rem;
8383
}
8484

@@ -120,6 +120,7 @@
120120
}
121121

122122
.like-dislike-subnav {
123+
123124
#like-button,
124125
#dislike-button {
125126
cursor: pointer;
@@ -130,6 +131,7 @@
130131
.preamble a {
131132
color: var(--text-color);
132133
}
134+
133135
.justify-between {
134136
justify-content: space-between;
135137
}
@@ -269,13 +271,15 @@
269271
margin: 0 0 0 0;
270272
padding: 1rem;
271273
flex-direction: column;
274+
272275
h3 {
273276
font-size: 0.8rem;
274277
}
275278

276279
#deprecated-icon {
277280
margin-right: 1rem;
278281
}
282+
279283
#deprecated-action {
280284
margin-top: 1rem;
281285
}
@@ -325,24 +329,30 @@
325329

326330
tr {
327331
width: 100%;
332+
328333
p {
329334
margin: 0;
330335
padding: 0;
331336
}
337+
332338
code {
333339
word-wrap: normal;
334340
}
335341
}
342+
336343
// Override the default stripes
337344
tr.odd {
338345
background-color: var(--background-color) !important;
339346
}
347+
340348
tr.even {
341349
background-color: var(--background-minor-highlight-color) !important;
342350
}
351+
343352
ul {
344353
margin: 0;
345354
padding: 0;
355+
346356
li {
347357
list-style: none;
348358
margin: 0;
@@ -446,4 +456,4 @@
446456
-webkit-animation: 0.1s ease forwards;
447457
animation: 0.1s ease forwards;
448458
}
449-
}
459+
}

‎packages/typescriptlang-org/src/templates/documentation.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const HandbookTemplate: React.FC<Props> = (props) => {
9696
<section id="doc-layout" >
9797
<SidebarToggleButton />
9898

99-
<div className="page-popup" id="page-helpful-popup" style={{ opacity: 0 }}>
99+
<div className="page-popup" id="page-helpful-popup" style={{ opacity: 0, display: "none" }}>
100100
<p>Was this page helpful?</p>
101101
<div>
102102
<button className="first" id="like-button-popup" title="Like this page"><LikeUnfilledSVG /></button>
@@ -138,21 +138,21 @@ const HandbookTemplate: React.FC<Props> = (props) => {
138138
</>
139139
}
140140

141-
{showExperimental &&
142-
<div id="deprecated-header">
143-
<div id="deprecated-content">
144-
<div id="deprecated-icon">
145-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7.5" stroke="black" /><path d="M8 3V9" stroke="black" /><path d="M8 11L8 13" stroke="black" /></svg>
146-
</div>
147-
<div>
148-
<h3>{i("handb_experimental_title")}</h3>
149-
<p>{i("handb_experimental_subtitle")}</p>
150-
</div>
141+
{showExperimental &&
142+
<div id="deprecated-header">
143+
<div id="deprecated-content">
144+
<div id="deprecated-icon">
145+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7.5" stroke="black" /><path d="M8 3V9" stroke="black" /><path d="M8 11L8 13" stroke="black" /></svg>
151146
</div>
147+
<div>
148+
<h3>{i("handb_experimental_title")}</h3>
149+
<p>{i("handb_experimental_subtitle")}</p>
150+
</div>
151+
</div>
152152
</div>
153153
}
154154

155-
<h2>{post.frontmatter.title}</h2>
155+
<h1>{post.frontmatter.title}</h1>
156156
{post.frontmatter.preamble && <div className="preamble" dangerouslySetInnerHTML={{ __html: post.frontmatter.preamble }} />}
157157
<article>
158158
<div className="whitespace raised">
@@ -190,7 +190,7 @@ const HandbookTemplate: React.FC<Props> = (props) => {
190190
<Contributors lang={props.pageContext.lang} i={i} path={props.pageContext.repoPath} lastEdited={props.pageContext.modifiedTime} />
191191
</div>
192192
</section>
193-
<Popup {...showPopup}/>
193+
<Popup {...showPopup} />
194194
</Layout>
195195
)
196196
}

0 commit comments

Comments
 (0)