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: Minor accessibility warnings #141

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

fix: Minor accessibility warnings #141

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a3b7aa1
Fix accessibility warning in the footer's links
Jun 22, 2022
1600ad1
Fix an accessibility warning with the `Hero` component
Jun 22, 2022
207d978
Print more detailes about the element that failed axe's a11y check
Jun 22, 2022
3667714
Trigger CI
Jun 23, 2022
b5abf59
Add an entry to the change log
Jun 23, 2022
c807781
Merge branch 'main' into fix/a11y-warnings
filipewl Jun 23, 2022
64fb2f8
Attempt to fix an accessibility issue with the mobile search input
Jun 23, 2022
784cef5
Merge branch 'main' into fix/a11y-warnings
hellofanny Nov 18, 2022
38b5f7f
chore: Updates navbar stylesheet
hellofanny Nov 18, 2022
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
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Support for the new type definitions from React 18 ([#113](https://github.com/vtex-sites/nextjs.store/pull/113)).

### Changed

- The helper log function `logToTerminal` used by `cy.checkA11y` to also report the HTML element associated to the violation to help with identification ([#141](https://github.com/vtex-sites/nextjs.store/pull/141))
- Move logo's svg code from JS into static asset ([#135](https://github.com/vtex-sites/nextjs.store/pull/135))
- Upgrade dependencies ([#131](https://github.com/vtex-sites/nextjs.store/pull/131))
- Uses `[data-fs-dropdown-button]` instead of `[data-store-dropdown-button]` to select `DropdownButton` on breadcrumb stylesheet ([#123](https://github.com/vtex-sites/nextjs.store/pull/123))
Expand All @@ -36,6 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Fixed

- Two accessibility warnings reported by the axe DevTools ([#141](https://github.com/vtex-sites/nextjs.store/pull/141))
- Some console errors when running the storybook ([#129](https://github.com/vtex-sites/nextjs.store/pull/129))
- The search input's dropdown not closing when a suggested product was selected ([#112](https://github.com/vtex-sites/nextjs.store/pull/112).
- Status code when error occurs (404/500) ([#116](https://github.com/vtex-sites/nextjs.store/pull/116))
Expand Down
9 changes: 9 additions & 0 deletions cypress/support/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,15 @@ function logToTerminal(violations) {
nodes: nodes.length,
}))
)
for (const violation of violations) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Example of this new log. Hoping it can help us to better pinpoint the elements with the issues.
Screen Shot 2022-06-21 at 15 38 01

Copy link
Contributor

Choose a reason for hiding this comment

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

😍 thank youu!

cy.task(
'table',
violation.nodes.map(({ html }) => ({
id: violation.id,
html,
}))
)
}
}

Cypress.Commands.overwrite(
Expand Down
10 changes: 8 additions & 2 deletions src/components/common/Footer/FooterLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Accordion, { AccordionItem } from 'src/components/ui/Accordion'

const links = [
{
id: 'footer-our-company',
title: 'Our company',
items: [
{
Expand All @@ -27,6 +28,7 @@ const links = [
],
},
{
id: 'footer-orders-and-purchases',
title: 'Orders & Purchases',
items: [
{
Expand All @@ -48,6 +50,7 @@ const links = [
],
},
{
id: 'footer-support-and-services',
title: 'Support & Services',
items: [
{
Expand All @@ -65,6 +68,7 @@ const links = [
],
},
{
id: 'footer-partnership',
title: 'Partnerships',
items: [
{
Expand Down Expand Up @@ -139,8 +143,10 @@ function FooterLinks() {
<div className="hidden-mobile">
<div className="footer__links-columns">
{links.map((section) => (
<nav key={section.title}>
<p className="text__title-mini">{section.title}</p>
<nav key={section.title} aria-labelledby={section.id}>
<p className="text__title-mini" id={section.id}>
{section.title}
</p>
<LinksList items={section.items} />
</nav>
))}
Expand Down
1 change: 1 addition & 0 deletions src/components/common/Navbar/navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
width: 0;
padding: 0;
border-width: 0;
opacity: 0;

&:hover, &:focus, &:focus-visible &:hover:focus-visible {
border-width: 0;
Expand Down
4 changes: 2 additions & 2 deletions src/components/sections/Hero/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@ const Hero = ({
sizes="(max-width: 768px) 70vw, 50vw"
/>
</UIHeroImage>
<UIHeroHeading data-fs-hero-heading aria-labelledby="hero-heading">
<UIHeroHeading data-fs-hero-heading>
<div data-fs-hero-wrapper className="layout__content">
<div data-fs-hero-info>
<h1 id="hero-heading">{title}</h1>
<h1>{title}</h1>
<p data-fs-hero-text-body>{subtitle}</p>
{!!link && (
<ButtonLink href={link} inverse={colorVariant === 'main'}>
Expand Down