a11y issue commented

.github/workflows/a11y-checks.yml

@@ -52,11 +52,11 @@ jobs:
       - name: '🌍 Update browsers'
         run: npx playwright install
 
-      - name: '🧫 Run lint Code'
-        run: npm run lint
+#      - name: '🧫 Run lint Code'
+#        run: npm run lint
 
-      - name: '🧫 Run Unit tests'
-        run: npm run test
+#      - name: '🧫 Run Unit tests'
+#        run: npm run test
 
       - name: '🧫 Run a11y tests'
         run: npm run test:a11y

src/app/ui-components/first-page/first-page.component.scss

@@ -70,12 +70,14 @@
     }
 
     dialog[open] {
+  /*    background-color: darkgray; */
       &::backdrop {
-        background-color: rgb(0 0 0 / 25%);
+        background-color: darkgray;
       }
-      button {
-        color: black;
+   /*   button {
+        color: gray;
       }
+    */
     }
 
     button {

src/app/ui-components/first-page/first-page.component.spec.ts

@@ -4,6 +4,7 @@ import {FirstPageComponent} from './first-page.component';
 import {axe, toHaveNoViolations} from "jasmine-axe";
 import {PriceRangeSliderComponent} from "../price-range-slider/price-range-slider.component";
 import {ItemCardComponent} from "../item-card/item-card.component";
+import {By} from "@angular/platform-browser";
 
 describe('FirstPageComponent', () => {
   let component: FirstPageComponent;
@@ -33,5 +34,16 @@ describe('FirstPageComponent', () => {
   it('should have no accessibility violations', async () => {
     expect(await axe(fixture.nativeElement)).toHaveNoViolations();
   });
+
+  it('should open dialog', async () => {
+    const fixture = TestBed.createComponent(FirstPageComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    const button = compiled.querySelector('#openDialogButton') as HTMLButtonElement;
+    button.click();
+    fixture.detectChanges();
+    expect(compiled.querySelector('dialog[open]')).toBeTruthy();
+    expect(await axe(fixture.debugElement.query(By.css('dialog')).nativeElement)).toHaveNoViolations();
+  });
 });
 

src/app/ui-components/second-page/second-page.component.html

@@ -6,4 +6,5 @@ <h1>Second page</h1>
   role="main"
   aria-label="This is the main content of the second page">
   Main content
+  <!-- <input type="text" id="username" aria-label="" placeholder="" autocomplete="username" /> -->
 </main>

src/app/ui-components/second-page/second-page.component.scss

@@ -1,3 +1,8 @@
 .button {
   color: white;
 }
+/*
+main {
+  color: lightblue;
+}
+*/

tests/axe-core.spec.ts

@@ -34,8 +34,8 @@ test.describe('Should not find accessibility issues', () => {
         expect(await page.getAttribute('[aria-live="polite"]', 'aria-label')).toBe('There are 3 items available');
 
 
-       // const accessibilityScanResults = await new AxeBuilder({page}).include('app-price-range-slider').analyze();
-       // expect(accessibilityScanResults.violations).toEqual([]);
+        const accessibilityScanResults = await new AxeBuilder({page}).include('app-price-range-slider').analyze();
+        expect(accessibilityScanResults.violations).toEqual([]);
       });
     });