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

feat: add Touch Target Minimum section to Links and Button pages #390

Closed
wants to merge 8 commits into from
Closed

feat: add Touch Target Minimum section to Links and Button pages #390

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
244d0d9
feat: add Touch Target Minimum section to Links page
CBID2 Jan 12, 2024
fd9cda1
feat: add Touch Target Minimum section to Buttons page
CBID2 Jan 13, 2024
c8698c1
feat: add information about the Touch Target Minimum to the buttons s…
CBID2 Jan 13, 2024
7cbfc46
fix: change section name
CBID2 Jan 14, 2024
58a78dd
fix: turn the list into a paragraph
CBID2 Jan 27, 2024
436b753
fix: omit link to WCAG
CBID2 Jan 27, 2024
ac6a0c1
fix: make the same changes that were done to the Buttons page
CBID2 Jan 27, 2024
caa2d9f
Merge branch 'adding-small-section-about-WCAG-2.2' of https://github.…
CBID2 Jan 27, 2024
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
28 changes: 28 additions & 0 deletions components/ContentTemplates/ButtonsTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -467,6 +467,34 @@ export const ButtonsTemplate = () => {
</li>
</ul>
</TemplateSection>
<TemplateSection
sectionName="Touch Target Minimum"
CBID2 marked this conversation as resolved.
Show resolved Hide resolved
title="Touch Target Minimum">
<p>
When it comes to creating accessible buttons, it's important that they
are easy to activate. To achieve this goal, WCAG suggests the
following:
</p>
<ul className="list">
<li>
Spacing: Avoid putting the buttons close together. Consider making
it at least 24 by 24 CSS pixels in size. It'll make it easier for
users who suffer from mobility impairments such as hand tremors or
are amputees to navigate mobile apps or websites.
</li>
</ul>
CBID2 marked this conversation as resolved.
Show resolved Hide resolved
<p>
{" "}
If you're interested in learning more about this new standard, check
it out at{" "}
<a
href="https://www.w3.org/TR/WCAG22/#target-size-minimum"
className="blockLink">
{" "}
W3's website
</a>{" "}
</p>
CBID2 marked this conversation as resolved.
Show resolved Hide resolved
</TemplateSection>
<TemplateSection sectionName="otherResources" title="Other Resources">
<ul className="list">
<li>
Expand Down
27 changes: 27 additions & 0 deletions components/ContentTemplates/LinksTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,33 @@ other places on the web */`}
</a>
</li>
</ul>
<TemplateSection
sectionName="Touch Target Minimum"
CBID2 marked this conversation as resolved.
Show resolved Hide resolved
title="Touch Target Minimum">
<p>
When it comes to creating accessible links, it's important that they
are easy to activate. To achieve this goal, WCAG suggests the
following:
</p>
<ul className="list">
<li>
Spacing: Ensure that the link's text has enough space so that
users can understand its context. Doing this would also make it
easier for users who have motor dexterity issues.
</li>
</ul>
<p>
{" "}
If you're interested in learning more about this new standard, check
it out at{" "}
<a
href="https://www.w3.org/TR/WCAG22/#target-size-minimum"
className="blockLink">
{" "}
W3's website
</a>{" "}
</p>
</TemplateSection>
</TemplateSection>
<PageUpdated date="5th January 2024" />
</>
Expand Down
1 change: 1 addition & 0 deletions data/pageNavigationLists.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const linkPageNavigation: IPageNavigationItem[] = [
{ linkName: "Link State and Style", href: "#linkStates" },
{ linkName: "Image and Icon Links", href: "#linkImage" },
{ linkName: "WCAG Criteria", href: "#WCAGCriteria" },
{ linkName: "Touch Target Minimum", href: "#touchTargetMinimum" },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add the link object in the correct place in the list corresponding to where it appears on the page.

Please also add it to the buttonPageNavigation array.

{ linkName: "Other Resources", href: "#otherResources" },
]

Expand Down