Skip to content

Commit 32141a7

Browse files
gsa-brigsa-bri
authored
Merge pull request #63 from GSA/prod
Section 508 header and footer for Open ACR
2 parents b9b2a98 + 7a509e9 commit 32141a7

23 files changed

+206
-76
lines changed

‎README.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,70 @@ The vars are now in the `vars` object, you can reference them with `vars.variabl
6666
## Data structure
6767

6868
The editor uses the OpenACR [schema](https://github.com/GSA/openacr/tree/main/schema) and [catalog](https://github.com/GSA/open-product-accessibility-template/tree/main/catalog) as data structures.
69+
70+
# External Blocks Integration Documentation
71+
72+
## Overview
73+
74+
The External Blocks feature provided by Section 508 offers functionality to seamlessly integrate the header and footer elements from the Section 508 website into external projects. This documentation outlines the steps required to incorporate Section 508 header and footer elements into your website.
75+
76+
## Integration Steps
77+
78+
To integrate the Section 508 header and footer into your website, follow these steps:
79+
80+
### 1. Include Stylesheet and JavaScript Files
81+
82+
Add the following stylesheet and JavaScript files to your website's HTML code:
83+
84+
```html
85+
<link
86+
rel="stylesheet"
87+
href="https://www.section508.gov/assets/css/external-blocks.css"
88+
/>
89+
<script
90+
defer
91+
src="https://www.section508.gov/assets/js/external-508-blocks.js"
92+
></script>
93+
<script defer src="https://www.section508.gov/assets/js/uswds.min.js"></script>
94+
```
95+
96+
### Example
97+
98+
Here's an example of how to integrate the Section 508 header and footer into your HTML code:
99+
100+
```html
101+
<!DOCTYPE html>
102+
<html lang="en">
103+
<head>
104+
<meta charset="UTF-8" />
105+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
106+
<title>My Website</title>
107+
<!-- Include Section 508 stylesheet and JavaScript after Open ACR-->
108+
<link
109+
rel="stylesheet"
110+
href="https://www.section508.gov/assets/css/external-blocks.css"
111+
/>
112+
<script
113+
defer
114+
src="https://www.section508.gov/assets/js/external-508-blocks.js"
115+
></script>
116+
<script
117+
defer
118+
src="https://www.section508.gov/assets/js/uswds.min.js"
119+
></script>
120+
</head>
121+
<body>
122+
<!-- Section 508 Header -->
123+
<div id="header-508"></div>
124+
125+
<!-- Your Website Content Goes Here -->
126+
127+
<!-- Section 508 Footer -->
128+
<div id="footer-508"></div>
129+
</body>
130+
</html>
131+
```
132+
133+
### Notes
134+
135+
- Ensure that your website's design accommodates the integration of the Section 508 header and footer appropriately.

‎public/fonts/public-sans/PublicSans-Bold.ttf

77.6 KB
Binary file not shown.

‎public/fonts/public-sans/PublicSans-Bold.woff

39.1 KB
Binary file not shown.

‎public/fonts/public-sans/PublicSans-Bold.woff2

31.6 KB
Binary file not shown.

‎public/fonts/public-sans/PublicSans-Regular.ttf

78 KB
Binary file not shown.

‎public/fonts/public-sans/PublicSans-Regular.woff

39.2 KB
Binary file not shown.

‎public/fonts/public-sans/PublicSans-Regular.woff2

31.8 KB
Binary file not shown.

‎public/fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf

53.1 KB
Binary file not shown.

‎public/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff

25.4 KB
Binary file not shown.

‎public/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2

19.9 KB
Binary file not shown.

‎public/fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf

53.2 KB
Binary file not shown.

‎public/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff

25.5 KB
Binary file not shown.

‎public/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2

20.1 KB
Binary file not shown.

‎public/images/Accessibility Conformance Report (ACR) A4 Small.png

18.5 KB
Loading

‎public/images/Accessibility Conformance Report A4 White Horizontal (1).png

119 KB
Loading

‎public/images/Accessibility Conformance Report A4 White Horizontal.png

47 KB
Loading

‎src/.empty-file

Whitespace-only changes.

‎src/App.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
function setInteracted(e) {
3131
if (e.target.type != "file") {
3232
window.removeEventListener("input", setInteracted);
33-
window.onbeforeunload = closeEditorWarning;
33+
//window.onbeforeunload = closeEditorWarning;
3434
}
3535
}
3636

‎src/components/Nav.svelte

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<style>
2-
.nav {
3-
-ms-grid-column: 2;
4-
-ms-grid-column-span: 8;
5-
grid-column: 2 / span 8;
6-
-ms-grid-row: 1;
7-
-ms-grid-row-span: 1;
8-
grid-row: 1;
9-
overflow: auto;
10-
margin: -32px 0 40px;
11-
background-color: #d0e1f1;
12-
background-color: var(--cloudy-subtle);
13-
}
14-
.nav ul {
15-
display: flex;
16-
flex-direction: row;
17-
margin: 0;
18-
padding: 0;
19-
}
2+
.nav {
3+
-ms-grid-column: 2;
4+
-ms-grid-column-span: 8;
5+
grid-column: 2 / span 8;
6+
-ms-grid-row: 1;
7+
-ms-grid-row-span: 1;
8+
grid-row: 1;
9+
overflow: auto;
10+
margin: -32px 0 40px;
11+
background-color: #d0e1f1;
12+
background-color: var(--cloudy-subtle);
13+
}
14+
.nav ul {
15+
display: flex;
16+
flex-direction: row;
17+
margin: 0;
18+
padding: 0;
19+
}
2020
</style>
2121

2222
<nav class="nav" aria-label="Steps">

‎src/components/YourReport.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
}
2525
2626
function clear() {
27-
window.onbeforeunload = null;
27+
//window.onbeforeunload = null;
2828
if (
2929
window.confirm(
3030
"This will clear the current OpenACR and start a new one. Are you sure that's what you'd like to do?"
@@ -77,7 +77,7 @@
7777
@media (min-width: 60em) {
7878
.your-report--expanded {
7979
position: sticky;
80-
top: 1em;
80+
top: 4em;
8181
}
8282
}
8383

‎src/components/report/ReportChapter.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
}
2323
thead {
2424
position: sticky;
25-
top: 0;
25+
top: 3em;
2626
z-index: 1;
2727
}
2828
thead th {
@@ -44,7 +44,7 @@
4444
{/if}
4545

4646
{#if $evaluation['chapters'][chapterId]['criteria'] && !$evaluation['chapters'][chapterId]['disabled'] }
47-
<table class="usa-table">
47+
<table>
4848
<thead>
4949
<tr>
5050
<th>Criteria</th>

‎src/components/report/ReportHeader.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ Based on {catalog.title}
6868
<HeaderWithAnchor id="applicable-standards-guidelines" level=2 {download}>Applicable Standards/Guidelines</HeaderWithAnchor>
6969
This report covers the degree of conformance for the following accessibility standard/guidelines:
7070

71-
<table class="usa-table">
71+
<table>
7272
<thead>
7373
<tr>
7474
<th>Standard/Guideline</th>

0 commit comments

Comments
 (0)