Skip to content

Commit 5622ca7

Browse files
urfolomeusurfolomeus
committed
TXI-ify the base app
1 parent 0577d73 commit 5622ca7

File tree

12 files changed

+236
-65
lines changed

12 files changed

+236
-65
lines changed

‎public/favicon.ico

11.3 KB
Binary file not shown.

‎public/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="A sandbox for helping us test A11y features"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1313
<!--
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>A11y Testing Sandbox</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/logo192.png

17.5 KB
Loading

‎public/logo512.png

94.1 KB
Loading

‎src/App.css

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
.App {
2-
text-align: center;
1+
/* Text */
2+
3+
h1 {
4+
margin-top: 1rem;
5+
font-size: 3.6rem;
36
}
47

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8+
/* Layout */
9+
10+
.main {
11+
padding: 5rem;
812
}
913

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14+
/* Logo */
15+
16+
.logoContainer {
17+
padding-top: 10vmin;
1418
}
1519

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
20+
.logo {
21+
height: 40vmin;
22+
pointer-events: none;
2523
}
2624

27-
.App-link {
28-
color: #61dafb;
25+
@media (prefers-reduced-motion: no-preference) {
26+
.logo {
27+
animation: logo-spin infinite 20s linear;
28+
}
2929
}
3030

31-
@keyframes App-logo-spin {
31+
@keyframes logo-spin {
3232
from {
3333
transform: rotate(0deg);
3434
}

‎src/App.js

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/App.jsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import "./App.css";
2+
import logo from "./logo.svg";
3+
4+
function App() {
5+
return (
6+
<section className="main">
7+
<header>
8+
<h1>Accessibility Testing Sandbox</h1>
9+
</header>
10+
<div className="logoContainer">
11+
<img src={logo} className="logo" alt="logo" />
12+
</div>
13+
</section>
14+
);
15+
}
16+
17+
export default App;

‎src/App.test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { render, screen } from '@testing-library/react';
2-
import App from './App';
1+
import { render, screen } from "@testing-library/react";
2+
import App from "./App";
33

4-
test('renders learn react link', () => {
4+
test("renders the page header", () => {
55
render(<App />);
6-
const linkElement = screen.getByText(/learn react/i);
7-
expect(linkElement).toBeInTheDocument();
6+
const pageHeader = screen.getByText(/Accessibility Testing Sandbox/i);
7+
expect(pageHeader).toBeInTheDocument();
88
});

‎src/index.css

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
1+
/**
2+
* Use relative units for text: https://web.dev/accessible-responsive-design/#use-relative-units-for-text
3+
* By default browsers set font-size to 16px, which makes it harder for us to figure out relative sizing
4+
* using rem/em values. To make this easier we reset the base value to 10px. Some users prefer to change
5+
* the default font-size and so we don't want to hard code to 10px. As such we can use a relative reset
6+
* to get our base font-size.
7+
*
8+
* 16px * 0.65 = 10px
9+
*/
10+
html {
11+
font-size: 62.5%;
12+
}
13+
114
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
15+
font-family: "Roboto", "Helvetica Neue", sans-serif;
616
-webkit-font-smoothing: antialiased;
717
-moz-osx-font-smoothing: grayscale;
818
}
919

1020
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
21+
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
1222
monospace;
1323
}

‎src/index.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import App from './App';
5-
import reportWebVitals from './reportWebVitals';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
63

7-
const root = ReactDOM.createRoot(document.getElementById('root'));
4+
import "./reset.css";
5+
import "./index.css";
6+
7+
import App from "./App";
8+
import reportWebVitals from "./reportWebVitals";
9+
10+
const root = ReactDOM.createRoot(document.getElementById("root"));
811
root.render(
912
<React.StrictMode>
1013
<App />

0 commit comments

Comments
 (0)