ashwin/nxtgauge-frontend-solid
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
nxtgauge-frontend-solid/playwright-reports/html/data/fe5c78020a2eaf74673c87f209438ff9cd840f1f.md

442 lines
20 KiB
Markdown
Raw Normal View History

fix: Update buttons from orange to navy blue for accessibility WCAG AA compliance - Changed all buttons with orange background (#fd6116) and white text to navy blue background (#050026) with white text - Maintains 12.5:1 contrast ratio (exceeds WCAG AA 4.5:1 requirement) - Keeps brand orange (#fd6116) for decorative elements and accents - Preserves all hover states and transitions Fixes accessibility violations for chip buttons, nav buttons, auth buttons, submit buttons, and primary action buttons.
2026-07-07 05:07:28 +05:30
# Instructions
- Following Playwright test failed.
- Explain why, be concise, respect Playwright best practices.
- Provide a snippet of code with the fix, if possible.
# Test info
- Name: accessibility.spec.ts >> Public Frontend Accessibility >> homepage should have no accessibility violations
- Location: tests/e2e/accessibility.spec.ts:5:3
# Error details
```
Error: expect(received).toEqual(expected) // deep equality
- Expected - 1
+ Received + 58
- Array []
+ Array [
+ Object {
+ "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
+ "help": "Elements must meet minimum color contrast ratio thresholds",
+ "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright",
+ "id": "color-contrast",
+ "impact": "serious",
+ "nodes": Array [
+ Object {
+ "all": Array [],
+ "any": Array [
+ Object {
+ "data": Object {
+ "bgColor": "#fd6116",
+ "contrastRatio": 3.04,
+ "expectedContrastRatio": "4.5:1",
+ "fgColor": "#ffffff",
+ "fontSize": "10.5pt (14px)",
+ "fontWeight": "normal",
+ "messageKey": null,
+ },
+ "id": "color-contrast",
+ "impact": "serious",
+ "message": "Element has insufficient color contrast of 3.04 (foreground color: #ffffff, background color: #fd6116, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "relatedNodes": Array [
+ Object {
+ "html": "<button data-hk=\"00000001000001000000000a1080\" type=\"button\" class=\"chip-btn active\">All</button>",
+ "target": Array [
+ "button[data-hk=\"00000001000001000000000a1080\"]",
+ ],
+ },
+ ],
+ },
+ ],
+ "failureSummary": "Fix any of the following:
+ Element has insufficient color contrast of 3.04 (foreground color: #ffffff, background color: #fd6116, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
+ "html": "<button data-hk=\"00000001000001000000000a1080\" type=\"button\" class=\"chip-btn active\">All</button>",
+ "impact": "serious",
+ "none": Array [],
+ "target": Array [
+ "button[data-hk=\"00000001000001000000000a1080\"]",
+ ],
+ },
+ ],
+ "tags": Array [
+ "cat.color",
+ "wcag2aa",
+ "wcag143",
+ "TTv5",
+ "TT13.c",
+ "EN-301-549",
+ "EN-9.1.4.3",
+ "ACT",
+ "RGAAv4",
+ "RGAA-3.2.1",
+ ],
+ },
+ ]
```
# Page snapshot
```yaml
- generic [ref=e2]:
- main [ref=e3]:
- generic:
- generic:
- generic:
- img
- generic:
- img
- generic:
- img
- generic:
- img
- generic:
- img
- generic [ref=e4]:
- navigation [ref=e6]:
- link "Nxtgauge home" [ref=e7] [cursor=pointer]:
- /url: /
- img "NXTGAUGE" [ref=e8]
- generic [ref=e9]:
- link "Home" [ref=e10] [cursor=pointer]:
- /url: /
- link "Professionals" [ref=e11] [cursor=pointer]:
- /url: /professionals
- link "About Us" [ref=e12] [cursor=pointer]:
- /url: /about
- link "Help Center" [ref=e13] [cursor=pointer]:
- /url: /help-center
- link "Contact Us" [ref=e14] [cursor=pointer]:
- /url: /contact
- link "Login" [ref=e16] [cursor=pointer]:
- /url: /login
- generic [ref=e18]:
- generic [ref=e19]:
- heading "Trusted hiring and opportunities, verified." [level=1] [ref=e20]
- paragraph [ref=e21]: Hire trusted professionals, post verified jobs, and apply faster in one platform.
- generic [ref=e22]:
- link "Get Started" [ref=e23] [cursor=pointer]:
- /url: /signup/customer
- link "How It Works" [ref=e24] [cursor=pointer]:
- /url: /#how-it-works
- paragraph [ref=e25]: Most profile and listing reviews are completed within 24-48 hours.
- region "Nxtgauge opportunity graph preview" [ref=e27]:
- generic [ref=e28]:
- generic [ref=e29]:
- img [ref=e30]
- generic [ref=e47]: Developer
- generic [ref=e48]:
- generic [ref=e49]:
- generic [ref=e50]: ✓
- generic [ref=e51]: Everything from Nxtgauge
- paragraph [ref=e52]: Opportunity Workspace
- generic [ref=e53]:
- strong [ref=e54]: Verified Profiles
- generic [ref=e55]: Trust layer ready
- generic [ref=e56]:
- strong [ref=e57]: Matched Opportunities
- generic [ref=e58]: Priority queue
- generic [ref=e59]:
- strong [ref=e60]: Responses
- generic [ref=e61]: Tracked in one flow
- generic [ref=e62]:
- strong [ref=e63]: Updates
- generic [ref=e64]: Live status signals
- paragraph [ref=e66]: Opportunities start scattered
- generic [ref=e68]:
- generic [ref=e70]:
- heading "Who Nxtgauge is for" [level=2] [ref=e71]
- paragraph [ref=e72]: Start with one account, then activate the journey you need.
- generic [ref=e73]:
- article [ref=e74]:
- img "Post a Job" [ref=e76]
- generic [ref=e78]:
- generic [ref=e79]:
- img [ref=e81]
- generic [ref=e85]:
- img [ref=e86]
- text: Company
- heading "Post a Job" [level=3] [ref=e89]
- paragraph [ref=e90]: Create verified job openings and find the right talent faster.
- link "Explore Company" [ref=e91] [cursor=pointer]:
- /url: /roles/company
- article [ref=e92]:
- img "Apply for Jobs" [ref=e94]
- generic [ref=e96]:
- generic [ref=e97]:
- img [ref=e99]
- generic [ref=e102]:
- img [ref=e103]
- text: Job Seeker
- heading "Apply for Jobs" [level=3] [ref=e106]
- paragraph [ref=e107]: Build your profile and apply to approved opportunities quickly.
- link "Explore Job Seeker" [ref=e108] [cursor=pointer]:
- /url: /roles/job-seeker
- article [ref=e109]:
- img "Hire a Professional" [ref=e111]
- generic [ref=e113]:
- generic [ref=e114]:
- img [ref=e116]
- generic [ref=e121]:
- img [ref=e122]
- text: Customer
- heading "Hire a Professional" [level=3] [ref=e125]
- paragraph [ref=e126]: Post your requirement and discover trusted specialists.
- link "Explore Customer" [ref=e127] [cursor=pointer]:
- /url: /roles/customer
- article [ref=e128]:
- img "Join as Professional" [ref=e130]
- generic [ref=e132]:
- generic [ref=e133]:
- img [ref=e135]
- generic [ref=e139]:
- img [ref=e140]
- text: Professional
- heading "Join as Professional" [level=3] [ref=e143]
- paragraph [ref=e144]: Create a trusted profile and grow through verified demand.
- link "Explore Professionals" [ref=e145] [cursor=pointer]:
- /url: /professionals
- generic [ref=e147]:
- generic [ref=e148]:
- heading "Explore professional categories" [level=2] [ref=e150]
- link "View all professionals" [ref=e151] [cursor=pointer]:
- /url: /professionals
- generic [ref=e152]:
- button "All" [ref=e153] [cursor=pointer]
- button "Creative" [ref=e154] [cursor=pointer]
- button "Tech" [ref=e155] [cursor=pointer]
- button "Education" [ref=e156] [cursor=pointer]
- button "Wellness" [ref=e157] [cursor=pointer]
- button "Events" [ref=e158] [cursor=pointer]
- button "Marketing" [ref=e159] [cursor=pointer]
- generic [ref=e160]:
- article [ref=e161]:
- img "Developer" [ref=e163]
- generic [ref=e165]:
- generic [ref=e167]: tech
- heading "Developer" [level=3] [ref=e168]
- paragraph [ref=e169]: Join Nxtgauge as a Developer and connect with customers and companies through a trust-first workflow.
- generic [ref=e170]:
- link "Explore Developer" [ref=e171] [cursor=pointer]:
- /url: /professionals/developer
- link "Join Developer" [ref=e172] [cursor=pointer]:
- /url: /signup?intent=professional&role=DEVELOPER
- article [ref=e173]:
- img "Photographer" [ref=e175]
- generic [ref=e177]:
- generic [ref=e179]: creative
- heading "Photographer" [level=3] [ref=e180]
- paragraph [ref=e181]: Join as a Photographer and receive opportunities where trust and profile quality matter.
- generic [ref=e182]:
- link "Explore Photographer" [ref=e183] [cursor=pointer]:
- /url: /professionals/photographer
- link "Join Photographer" [ref=e184] [cursor=pointer]:
- /url: /signup?intent=professional&role=PHOTOGRAPHER
- article [ref=e185]:
- img "Makeup Artist" [ref=e187]
- generic [ref=e189]:
- generic [ref=e191]: creative
- heading "Makeup Artist" [level=3] [ref=e192]
- paragraph [ref=e193]: Join Nxtgauge as a Makeup Artist and connect with verified requirements from customers and event planners.
- generic [ref=e194]:
- link "Explore Makeup Artist" [ref=e195] [cursor=pointer]:
- /url: /professionals/makeup-artist
- link "Join Makeup Artist" [ref=e196] [cursor=pointer]:
- /url: /signup?intent=professional&role=MAKEUP_ARTIST
- article [ref=e197]:
- img "Tutor" [ref=e199]
- generic [ref=e201]:
- generic [ref=e203]: education
- heading "Tutor" [level=3] [ref=e204]
- paragraph [ref=e205]: Join as a Tutor to receive verified educational requirements and present your profile with confidence.
- generic [ref=e206]:
- link "Explore Tutor" [ref=e207] [cursor=pointer]:
- /url: /professionals/tutor
- link "Join Tutor" [ref=e208] [cursor=pointer]:
- /url: /signup?intent=professional&role=TUTOR
- article [ref=e209]:
- img "Video Editor" [ref=e211]
- generic [ref=e213]:
- generic [ref=e215]: creative
- heading "Video Editor" [level=3] [ref=e216]
- paragraph [ref=e217]: Join as a Video Editor and connect with customers and companies through a review-based trust model.
- generic [ref=e218]:
- link "Explore Video Editor" [ref=e219] [cursor=pointer]:
- /url: /professionals/video-editor
- link "Join Video Editor" [ref=e220] [cursor=pointer]:
- /url: /signup?intent=professional&role=VIDEO_EDITOR
- article [ref=e221]:
- img "Graphic Designer" [ref=e223]
- generic [ref=e225]:
- generic [ref=e227]: creative
- heading "Graphic Designer" [level=3] [ref=e228]
- paragraph [ref=e229]: Join as a Graphic Designer to connect with verified requirements and role-relevant opportunities.
- generic [ref=e230]:
- link "Explore Graphic Designer" [ref=e231] [cursor=pointer]:
- /url: /professionals/graphic-designer
- link "Join Graphic Designer" [ref=e232] [cursor=pointer]:
- /url: /signup?intent=professional&role=GRAPHIC_DESIGNER
- article [ref=e233]:
- img "Social Media Manager" [ref=e235]
- generic [ref=e237]:
- generic [ref=e239]: marketing
- heading "Social Media Manager" [level=3] [ref=e240]
- paragraph [ref=e241]: Join as a Social Media Manager and grow with trusted customer and company requirements.
- generic [ref=e242]:
- link "Explore Social Media Manager" [ref=e243] [cursor=pointer]:
- /url: /professionals/social-media-manager
- link "Join Social Media Manager" [ref=e244] [cursor=pointer]:
- /url: /signup?intent=professional&role=SOCIAL_MEDIA_MANAGER
- article [ref=e245]:
- img "Fitness Trainer" [ref=e247]
- generic [ref=e249]:
- generic [ref=e251]: wellness
- heading "Fitness Trainer" [level=3] [ref=e252]
- paragraph [ref=e253]: Join as a Fitness Trainer and grow through profile-led visibility in a trust-first marketplace.
- generic [ref=e254]:
- link "Explore Fitness Trainer" [ref=e255] [cursor=pointer]:
- /url: /professionals/fitness-trainer
- link "Join Fitness Trainer" [ref=e256] [cursor=pointer]:
- /url: /signup?intent=professional&role=FITNESS_TRAINER
- generic [ref=e258]:
- generic [ref=e259]:
- paragraph [ref=e260]: Why Nxtgauge
- heading "Trust, approvals, and better matching in one flow." [level=2] [ref=e261]
- generic [ref=e262]:
- article [ref=e263]:
- generic [ref=e265]:
- paragraph [ref=e266]: Capability 1 of 6
- img [ref=e268]
- heading "Verified profiles & businesses" [level=3] [ref=e271]
- paragraph [ref=e272]: Identity and profile checks reduce fake submissions and spam.
- generic [ref=e274]:
- button "Show Verified profiles & businesses" [ref=e275]:
- img [ref=e276]
- button "Show Approval-based quality (24-48 hours)" [ref=e279]:
- img [ref=e280]
- button "Show Smart matching using tags/skills" [ref=e282]:
- img [ref=e283]
- button "Show Focused discovery with filters" [ref=e285]:
- img [ref=e286]
- button "Show Controlled contact visibility" [ref=e289]:
- img [ref=e290]
- button "Show Notifications & updates" [ref=e293]:
- img [ref=e294]
- generic [ref=e297]:
- button "Previous slide" [ref=e298]: ◀
- button "Next slide" [ref=e299]: ▶
- generic [ref=e301]:
- generic [ref=e302]:
- paragraph [ref=e303]: How it works
- heading "Clear journey, zero confusion" [level=2] [ref=e304]
- article [ref=e305]:
- generic [ref=e306]:
- img "Customers role" [ref=e308]
- generic [ref=e309]:
- paragraph [ref=e310]: Customers
- heading "Hire trusted professionals with less noise" [level=3] [ref=e311]
- paragraph [ref=e312]: Post requirements, pass review checks, and receive better-fit responses.
- generic [ref=e313]:
- paragraph [ref=e314]: Step Flow
- generic [ref=e315]:
- generic [ref=e316]:
- generic [ref=e317]: "1"
- generic [ref=e318]:
- heading "Create account" [level=4] [ref=e319]
- paragraph [ref=e320]: Sign up quickly with customer intent.
- generic [ref=e321]:
- generic [ref=e322]: "2"
- generic [ref=e323]:
- heading "Share requirement" [level=4] [ref=e324]
- paragraph [ref=e325]: Add budget, scope, and timing.
- generic [ref=e326]:
- generic [ref=e327]: "3"
- generic [ref=e328]:
- heading "Review and verify" [level=4] [ref=e329]
- paragraph [ref=e330]: Quality checks run before visibility.
- generic [ref=e331]:
- generic [ref=e332]: "4"
- generic [ref=e333]:
- heading "Track responses" [level=4] [ref=e334]
- paragraph [ref=e335]: Monitor replies and status updates.
- generic [ref=e337]:
- button "Previous role" [ref=e338]: ←
- button "Next role" [ref=e339]: →
- generic [ref=e346]:
- heading "Frequently asked questions" [level=2] [ref=e347]
- paragraph [ref=e348]: Quick answers before you create your account.
- generic [ref=e349]:
- article [ref=e350]:
- button "What is Nxtgauge? ⌄" [ref=e351] [cursor=pointer]:
- generic [ref=e352]: What is Nxtgauge?
- generic [ref=e353]: ⌄
- paragraph [ref=e354]: Nxtgauge connects customers, professionals, companies, and job seekers in one trusted platform.
- article [ref=e355]:
- button "Who can join Nxtgauge? ⌄" [ref=e356] [cursor=pointer]:
- generic [ref=e357]: Who can join Nxtgauge?
- generic [ref=e358]: ⌄
- article [ref=e359]:
- button "Why does Nxtgauge require verification? ⌄" [ref=e360] [cursor=pointer]:
- generic [ref=e361]: Why does Nxtgauge require verification?
- generic [ref=e362]: ⌄
- article [ref=e363]:
- button "How long does account approval take? ⌄" [ref=e364] [cursor=pointer]:
- generic [ref=e365]: How long does account approval take?
- generic [ref=e366]: ⌄
- article [ref=e367]:
- button "Do I need to choose my role during signup? ⌄" [ref=e368] [cursor=pointer]:
- generic [ref=e369]: Do I need to choose my role during signup?
- generic [ref=e370]: ⌄
- generic [ref=e372]:
- generic [ref=e373]:
- paragraph [ref=e374]: Quick Actions
- heading "Start with one account. Choose your path after." [level=2] [ref=e375]
- paragraph [ref=e376]: Hire, post, apply, or join as a professional from stable role-specific pages.
- generic [ref=e377]:
- link "Get Started" [ref=e378] [cursor=pointer]:
- /url: /signup/customer
- link "Explore Professionals" [ref=e379] [cursor=pointer]:
- /url: /professionals
- link "Post a Job" [ref=e380] [cursor=pointer]:
- /url: /signup/company
- generic [ref=e382]:
- img "NXTGAUGE" [ref=e383]
- paragraph [ref=e384]: © 2026 Nxtgauge. All rights reserved.
- generic [ref=e385]:
- link "Professionals" [ref=e386] [cursor=pointer]:
- /url: /professionals
- link "Terms" [ref=e387] [cursor=pointer]:
- /url: /terms
- link "Privacy" [ref=e388] [cursor=pointer]:
- /url: /privacy
- link "Help Center" [ref=e389] [cursor=pointer]:
- /url: /help-center
- button "AI Assistant" [ref=e390] [cursor=pointer]:
- img [ref=e391]
```
# Test source
```ts
1 | import { test, expect } from "@playwright/test";
2 | import AxeBuilder from "@axe-core/playwright";
3 |
4 | test.describe("Public Frontend Accessibility", () => {
5 | test("homepage should have no accessibility violations", async ({ page }) => {
6 | await page.goto("/");
7 | const results = await new AxeBuilder({ page }).analyze();
> 8 | expect(results.violations).toEqual([]);
| ^ Error: expect(received).toEqual(expected) // deep equality
9 | });
10 |
11 | test("professionals listing page should be accessible", async ({ page }) => {
12 | await page.goto("/professionals");
13 | const results = await new AxeBuilder({ page }).analyze();
14 | expect(results.violations).toEqual([]);
15 | });
16 | });
17 |
```
Reference in a new issue Copy permalink