From 523963970c12ef8da205c90b2ae356dab57f28ed Mon Sep 17 00:00:00 2001 From: mikeclark206 Date: Tue, 28 Apr 2026 17:53:49 -0700 Subject: [PATCH 1/2] feat: add accessibility smoke checks --- docs/accessibility-notes.md | 44 ++++++++++ package-lock.json | 24 ++++++ package.json | 5 +- tests/accessibility/public-pages-a11y.spec.ts | 85 +++++++++++++++++++ 4 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 docs/accessibility-notes.md create mode 100644 tests/accessibility/public-pages-a11y.spec.ts diff --git a/docs/accessibility-notes.md b/docs/accessibility-notes.md new file mode 100644 index 0000000..624dbe1 --- /dev/null +++ b/docs/accessibility-notes.md @@ -0,0 +1,44 @@ +# Accessibility Notes + +## Purpose + +Accessibility checks in DISCOGS-UI are automated smoke-level scans intended to identify obvious accessibility issues on selected public Discogs pages. + +## Version 1 Scope + +Version 1 includes automated accessibility checks for: + +- Homepage +- Search results page +- Marketplace browse page + +## Tooling + +Accessibility checks are implemented with Playwright and `@axe-core/playwright`. + +## Assertion Strategy + +Version 1 fails tests only when critical accessibility violations are detected. + +This is intentional because Discogs is a public third-party website, and the goal is to demonstrate practical accessibility awareness without making the suite overly brittle. + +## Limitations + +Automated accessibility testing does not replace a full manual accessibility audit. + +These tests do not guarantee WCAG compliance. They are designed to catch obvious critical issues and provide scan artifacts for review. + +## Manual Review + +Accessibility scan results should be manually reviewed before documenting any issue as a bug or finding. + +## Known Third-Party Findings + +During initial accessibility smoke testing, automated scans found critical violations in shared Discogs page chrome: + +- Footer menu ARIA structure issue: `aria-required-children` +- Header/search clear button accessible name issue: `button-name` + +Because DISCOGS-UI is a portfolio project testing a third-party public website, Version 1 accessibility smoke tests exclude known shared header and footer containers from automated pass/fail assertions. + +The full scan artifacts are still attached to Playwright test results for manual review. These findings should be treated as observed accessibility findings, not defects that can be fixed within this repository. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8627e76..cf5d4fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,24 @@ "version": "1.0.0", "license": "ISC", "devDependencies": { + "@axe-core/playwright": "^4.11.2", "@playwright/test": "^1.59.1", "@types/node": "^25.6.0" } }, + "node_modules/@axe-core/playwright": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.11.2.tgz", + "integrity": "sha512-iP6hfNl9G0j/SEUSo8M7D80RbcDo9KRAAfDP4IT5OHB+Wm6zUHIrm8Y51BKI+Oyqduvipf9u1hcRy57zCBKzWQ==", + "dev": true, + "license": "MPL-2.0", + "dependencies": { + "axe-core": "~4.11.3" + }, + "peerDependencies": { + "playwright-core": ">= 1.0.0" + } + }, "node_modules/@playwright/test": { "version": "1.59.1", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz", @@ -39,6 +53,16 @@ "undici-types": "~7.19.0" } }, + "node_modules/axe-core": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.3.tgz", + "integrity": "sha512-zBQouZixDTbo3jMGqHKyePxYxr1e5W8UdTmBQ7sNtaA9M2bE32daxxPLS/jojhKOHxQ7LWwPjfiwf/fhaJWzlg==", + "dev": true, + "license": "MPL-2.0", + "engines": { + "node": ">=4" + } + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", diff --git a/package.json b/package.json index d78b185..c5a32c2 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,14 @@ "version": "1.0.0", "description": "", "main": "index.js", - "scripts": {}, + "scripts": { + "test:a11y": "playwright test tests/accessibility --project=chromium" + }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { + "@axe-core/playwright": "^4.11.2", "@playwright/test": "^1.59.1", "@types/node": "^25.6.0" } diff --git a/tests/accessibility/public-pages-a11y.spec.ts b/tests/accessibility/public-pages-a11y.spec.ts new file mode 100644 index 0000000..e639130 --- /dev/null +++ b/tests/accessibility/public-pages-a11y.spec.ts @@ -0,0 +1,85 @@ +import { expect, test, Page, TestInfo } from '@playwright/test'; +import AxeBuilder from '@axe-core/playwright'; +import { HomePage } from '../../pages/HomePage'; +import { MarketplacePage } from '../../pages/MarketplacePage'; +import { SearchResultsPage } from '../../pages/SearchResultsPage'; + +async function runCriticalA11yScan( + page: Page, + testInfo: TestInfo, + scanName: string +): Promise { + const accessibilityScanResults = await new AxeBuilder({ page }) + .include('body') + .exclude('#esi-footer-root') + .exclude('[id^="__header_root_"]') + .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']) + .analyze(); + + await testInfo.attach(`${scanName}-a11y-results`, { + body: JSON.stringify(accessibilityScanResults, null, 2), + contentType: 'application/json', + }); + + const criticalViolations = accessibilityScanResults.violations.filter( + (violation) => violation.impact === 'critical' + ); + + expect( + criticalViolations, + `Critical accessibility violations found on ${scanName}:\n${JSON.stringify( + criticalViolations, + null, + 2 + )}` + ).toEqual([]); +} + +test.describe('Discogs public page accessibility smoke checks', () => { + test('@a11y homepage has no critical accessibility violations', async ({ + page, + }, testInfo) => { + const homePage = new HomePage(page); + + await test.step('Navigate to Discogs homepage', async () => { + await homePage.goto(); + await homePage.expectPageLoaded(); + }); + + await test.step('Run critical accessibility scan', async () => { + await runCriticalA11yScan(page, testInfo, 'homepage'); + }); + }); + + test('@a11y search results page has no critical accessibility violations', async ({ + page, + }, testInfo) => { + const homePage = new HomePage(page); + const searchResultsPage = new SearchResultsPage(page); + + await test.step('Navigate to search results page', async () => { + await homePage.goto(); + await homePage.searchFor('Miles Davis'); + await searchResultsPage.expectSearchResultsPageLoaded('Miles Davis'); + }); + + await test.step('Run critical accessibility scan', async () => { + await runCriticalA11yScan(page, testInfo, 'search-results'); + }); + }); + + test('@a11y marketplace page has no critical accessibility violations', async ({ + page, + }, testInfo) => { + const marketplacePage = new MarketplacePage(page); + + await test.step('Navigate to marketplace page', async () => { + await marketplacePage.goto(); + await marketplacePage.expectPageLoaded(); + }); + + await test.step('Run critical accessibility scan', async () => { + await runCriticalA11yScan(page, testInfo, 'marketplace'); + }); + }); +}); \ No newline at end of file From 4d8b073d81e604df3c9bd9e603a008ff74779af9 Mon Sep 17 00:00:00 2001 From: mikeclark206 Date: Tue, 28 Apr 2026 18:10:28 -0700 Subject: [PATCH 2/2] fix: make marketplace error check more specific --- pages/MarketplacePage.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/pages/MarketplacePage.ts b/pages/MarketplacePage.ts index 517b392..5c056ed 100644 --- a/pages/MarketplacePage.ts +++ b/pages/MarketplacePage.ts @@ -29,8 +29,16 @@ export class MarketplacePage { } async expectNoApplicationError(): Promise { - await expect(this.mainContent).not.toContainText( - /server error|something went wrong|application error|internal error|404/i - ); - } + await expect(this.page).not.toHaveTitle(/error|404|not found/i); + await expect(this.page).not.toHaveURL(/404|error|not-found/i); + + const visibleErrorAlerts = this.page + .locator('[role="alert"], [aria-live="assertive"], .error, .error-message, [class*="alert"]') + .filter({ + hasText: + /server error|something went wrong|application error|internal error|404|not found/i, + }); + + await expect(visibleErrorAlerts).toHaveCount(0); +} } \ No newline at end of file