nxtgauge-frontend-solid/playwright-reports/html/data/fe5c78020a2eaf74673c87f209438ff9cd840f1f.md

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

- 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

  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 |