Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/lists #329

Merged
merged 4 commits into from
Jun 23, 2023
Merged

Fix/lists #329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d87dc1f
Fix list styling on breadcrumbs page
EmmaDawsonDev Jun 23, 2023
449a33a
update list styling on buttons page
EmmaDawsonDev Jun 23, 2023
59629d0
update list styling on heading page
EmmaDawsonDev Jun 23, 2023
e9da9b1
Add list styling to images page
EmmaDawsonDev Jun 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 96 additions & 61 deletions components/ContentTemplates/BreadcrumbsTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const BreadcrumbsTemplate = () => {
together, offer the semantics needed to make accessible breadcrumbs.
</p>
<p>What is needed:</p>
<ul>
<ul className="list">
<li>
A nav element will let users know that this is a navigation
landmark. Landmarks make things easier to find, especially for
Expand Down Expand Up @@ -142,68 +142,103 @@ export const BreadcrumbsTemplate = () => {
</p>
</TemplateSection>
<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
<a
href="https://www.w3.org/TR/WCAG21/#info-and-relationships"
className="blockLink">
1.3.1 Info and Relationships
</a>
<a
href="https://www.w3.org/TR/WCAG21/#identify-purpose"
className="blockLink">
1.3.6 Identify Purpose
</a>
<a href="https://www.w3.org/TR/WCAG21/#keyboard" className="blockLink">
2.1.1 Keyboard
</a>
<a
href="https://www.w3.org/TR/WCAG21/#focus-order"
className="blockLink">
2.4.3 Focus Order
</a>
<a
href="https://www.w3.org/TR/WCAG21/#link-purpose-in-context"
className="blockLink">
2.4.4 Link Purpose
</a>
<a
href="https://www.w3.org/TR/WCAG21/#multiple-ways"
className="blockLink">
2.4.5 Multiple Ways
</a>
<a
href="https://www.w3.org/TR/WCAG21/#focus-visible"
className="blockLink">
2.4.7 Focus Visible
</a>
<a href="https://www.w3.org/TR/WCAG21/#location" className="blockLink">
2.4.8 Location
</a>

<a
href="https://www.w3.org/TR/WCAG21/#target-size"
className="blockLink">
2.5.5 Target Size
</a>
<a href="https://www.w3.org/TR/WCAG21/#on-focus" className="blockLink">
3.2.1 On Focus
</a>
<a
href="https://www.w3.org/TR/WCAG21/#consistent-navigation"
className="blockLink">
3.2.3 Consistent Navigation
</a>
<ul className="list">
<li>
<a
href="https://www.w3.org/TR/WCAG21/#info-and-relationships"
className="blockLink">
1.3.1 Info and Relationships
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#identify-purpose"
className="blockLink">
1.3.6 Identify Purpose
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#keyboard"
className="blockLink">
2.1.1 Keyboard
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#focus-order"
className="blockLink">
2.4.3 Focus Order
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#link-purpose-in-context"
className="blockLink">
2.4.4 Link Purpose
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#multiple-ways"
className="blockLink">
2.4.5 Multiple Ways
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#focus-visible"
className="blockLink">
2.4.7 Focus Visible
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#location"
className="blockLink">
2.4.8 Location
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#target-size"
className="blockLink">
2.5.5 Target Size
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#on-focus"
className="blockLink">
3.2.1 On Focus
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#consistent-navigation"
className="blockLink">
3.2.3 Consistent Navigation
</a>
</li>
</ul>
</TemplateSection>
<TemplateSection sectionName="otherResources" title="Other Resources">
<a
href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/"
className="blockLink">
ARIA Authoring Practices Guide Breadcrumb Example
</a>
<a
href="https://design-system.service.gov.uk/components/breadcrumbs/"
className="blockLink">
Gov.uk Design System - Breadcrumbs
</a>
<ul className="list">
<li>
<a
href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/"
className="blockLink">
ARIA Authoring Practices Guide Breadcrumb Example
</a>
</li>
<li>
<a
href="https://design-system.service.gov.uk/components/breadcrumbs/"
className="blockLink">
Gov.uk Design System - Breadcrumbs
</a>
</li>
</ul>
</TemplateSection>
<PageUpdated date="10th April 2023" />
</>
Expand Down
156 changes: 96 additions & 60 deletions components/ContentTemplates/ButtonsTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const ButtonsTemplate = () => {
button. Adding the onclick event will not automatically make the
element keyboard interactive. It also needs to:
</p>
<ul>
<ul className="list">
<li>Activate when a user presses the enter key</li>
<li>Activate when a user presses the space key</li>
<li>Be included in the tab sequence</li>
Expand Down Expand Up @@ -387,67 +387,103 @@ export const ButtonsTemplate = () => {
</p>
</TemplateSection>
<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
<a
href="https://www.w3.org/TR/WCAG21/#non-text-content"
className="blockLink">
1.1.1 Non-text content
</a>
<a
href="https://www.w3.org/TR/WCAG21/#info-and-relationships"
className="blockLink">
1.3.1 Info and Relationships
</a>
<a
href="https://www.w3.org/TR/WCAG21/#identify-purpose"
className="blockLink">
1.3.6 Identify Purpose
</a>
<a
href="https://www.w3.org/TR/WCAG21/#contrast-minimum"
className="blockLink">
1.4.3 Contrast (minimum)
</a>
<a
href="https://www.w3.org/TR/WCAG21/#non-text-contrast"
className="blockLink">
1.4.11 Non-text Contrast
</a>
<a
href="https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus"
className="blockLink">
1.4.13 Content on Hover or Focus
</a>
<a href="https://www.w3.org/TR/WCAG21/#keyboard" className="blockLink">
2.1.1 Keyboard
</a>
<a
href="https://www.w3.org/TR/WCAG21/#focus-visible"
className="blockLink">
2.4.7 Focus Visible
</a>
<a
href="https://www.w3.org/TR/WCAG21/#label-in-name"
className="blockLink">
2.5.3 Label in Name
</a>
<a
href="https://www.w3.org/TR/WCAG21/#target-size"
className="blockLink">
2.5.5 Target Size
</a>
<a href="https://www.w3.org/TR/WCAG21/#on-focus" className="blockLink">
3.2.1 On Focus
</a>
<ul className="list">
<li>
<a
href="https://www.w3.org/TR/WCAG21/#non-text-content"
className="blockLink">
1.1.1 Non-text content
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#info-and-relationships"
className="blockLink">
1.3.1 Info and Relationships
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#identify-purpose"
className="blockLink">
1.3.6 Identify Purpose
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#contrast-minimum"
className="blockLink">
1.4.3 Contrast (minimum)
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#non-text-contrast"
className="blockLink">
1.4.11 Non-text Contrast
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus"
className="blockLink">
1.4.13 Content on Hover or Focus
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#keyboard"
className="blockLink">
2.1.1 Keyboard
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#focus-visible"
className="blockLink">
2.4.7 Focus Visible
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#label-in-name"
className="blockLink">
2.5.3 Label in Name
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#target-size"
className="blockLink">
2.5.5 Target Size
</a>
</li>
<li>
<a
href="https://www.w3.org/TR/WCAG21/#on-focus"
className="blockLink">
3.2.1 On Focus
</a>
</li>
</ul>
</TemplateSection>
<TemplateSection sectionName="otherResources" title="Other Resources">
<a
href="https://design-system.service.gov.uk/components/button/"
className="blockLink">
Gov.uk Design System Button
</a>
<a href="https://yatil.net/blog/buttons-vs-links" className="blockLink">
Buttons vs. Links by Eric Eggert
</a>
<ul className="list">
<li>
<a
href="https://design-system.service.gov.uk/components/button/"
className="blockLink">
Gov.uk Design System Button
</a>
</li>
<li>
<a
href="https://yatil.net/blog/buttons-vs-links"
className="blockLink">
Buttons vs. Links by Eric Eggert
</a>
</li>
</ul>
</TemplateSection>
<PageUpdated date="18th February 2023" />
</>
Expand Down
Loading