fix: renamed .sr-only to .visually-hidden (#3982)

ng-bootstrap · May 12, 2021 · 09eb6b2 · 09eb6b2
1 parent 43bae41
commit 09eb6b2
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 29 deletions.
diff --git a/demo/src/app/shared/component-wrapper/component-wrapper.component.html b/demo/src/app/shared/component-wrapper/component-wrapper.component.html
@@ -38,7 +38,7 @@ <h1 class="mb-4 me-auto me-md-none">{{ component | titlecase }}</h1>
             class="align-self-center ms-0 ms-md-auto navigation-dropdown"
             *ngIf="tableOfContents.length && isLargeScreenOrLess">
             <span ngbDropdownToggle class="nav-link" title="Table of content">
-              <span class="sr-only">Table of content</span>
+              <span class="visually-hidden">Table of content</span>
               <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                 <path fill="currentColor"
                   d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v340a6 6 0 0 1-6 6zm-42-92v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm-252 12c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36z">

diff --git a/demo/src/app/shared/page-wrapper/page-wrapper.component.html b/demo/src/app/shared/page-wrapper/page-wrapper.component.html
@@ -36,7 +36,7 @@ <h1 class="mt-0">{{ pageTitle }}</h1>
             *ngIf="tableOfContents.length && isLargeScreenOrLess"
           >
             <span ngbDropdownToggle class="nav-link" title="Table of contents">
-              <span class="sr-only">Table of content</span>
+              <span class="visually-hidden">Table of content</span>
               <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v340a6 6 0 0 1-6 6zm-42-92v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm-252 12c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36z"></path></svg>
             </span>
 

diff --git a/src/carousel/carousel.spec.ts b/src/carousel/carousel.spec.ts
@@ -855,12 +855,12 @@ describe('ngb-carousel', () => {
        const slideElms = fixture.nativeElement.querySelectorAll('.carousel-item');
        expect(slideElms.length).toBe(1);
        expect(slideElms[0].textContent).toMatch(/foo/);
-       expect(fixture.nativeElement.querySelectorAll('ol.carousel-indicators.sr-only > li').length).toBe(0);
+       expect(fixture.nativeElement.querySelectorAll('ol.carousel-indicators.visually-hidden > li').length).toBe(0);
        expect(fixture.nativeElement.querySelectorAll('ol.carousel-indicators > li').length).toBe(1);
 
        fixture.componentInstance.showNavigationIndicators = false;
        fixture.detectChanges();
-       expect(fixture.nativeElement.querySelectorAll('ol.carousel-indicators.sr-only > li').length).toBe(1);
+       expect(fixture.nativeElement.querySelectorAll('ol.carousel-indicators.visually-hidden > li').length).toBe(1);
        expect(fixture.nativeElement.querySelectorAll('ol.carousel-indicators > li').length).toBe(1);
 
        discardPeriodicTasks();

diff --git a/src/carousel/carousel.ts b/src/carousel/carousel.ts
@@ -80,27 +80,27 @@ export class NgbSlide {
     '[attr.aria-activedescendant]': `'slide-' + activeId`
   },
   template: `
-    <ol class="carousel-indicators" [class.sr-only]="!showNavigationIndicators" role="tablist">
+    <ol class="carousel-indicators" [class.visually-hidden]="!showNavigationIndicators" role="tablist">
       <li *ngFor="let slide of slides" [class.active]="slide.id === activeId"
           role="tab" [attr.aria-labelledby]="'slide-' + slide.id" [attr.aria-controls]="'slide-' + slide.id"
           [attr.aria-selected]="slide.id === activeId"
           (click)="focus();select(slide.id, NgbSlideEventSource.INDICATOR);"></li>
     </ol>
     <div class="carousel-inner">
       <div *ngFor="let slide of slides; index as i; count as c" class="carousel-item" [id]="'slide-' + slide.id" role="tabpanel">
-        <span class="sr-only" i18n="Currently selected slide number read by screen reader@@ngb.carousel.slide-number">
+        <span class="visually-hidden" i18n="Currently selected slide number read by screen reader@@ngb.carousel.slide-number">
           Slide {{i + 1}} of {{c}}
         </span>
         <ng-template [ngTemplateOutlet]="slide.tplRef"></ng-template>
       </div>
     </div>
     <a class="carousel-control-prev" role="button" (click)="arrowLeft()" *ngIf="showNavigationArrows">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      <span class="sr-only" i18n="@@ngb.carousel.previous">Previous</span>
+      <span class="visually-hidden" i18n="@@ngb.carousel.previous">Previous</span>
     </a>
     <a class="carousel-control-next" role="button" (click)="arrowRight()" *ngIf="showNavigationArrows">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      <span class="sr-only" i18n="@@ngb.carousel.next">Next</span>
+      <span class="visually-hidden" i18n="@@ngb.carousel.next">Next</span>
     </a>
   `
 })

diff --git a/src/pagination/pagination.spec.ts b/src/pagination/pagination.spec.ts
@@ -687,7 +687,7 @@ describe('ngb-pagination', () => {
           <ng-template ngbPaginationEllipsis>E</ng-template>
           <ng-template ngbPaginationNumber let-page let-currentPage="currentPage">
             {{ page }}!
-            <span *ngIf="page === currentPage" class="sr-only">(current)</span>
+            <span *ngIf="page === currentPage" class="visually-hidden">(current)</span>
           </ng-template>
         </ngb-pagination>
       `);
@@ -704,7 +704,7 @@ describe('ngb-pagination', () => {
           <ng-template ngbPaginationNext let-disabled="disabled">{{ disabled ? 'dN' : 'N' }}</ng-template>
           <ng-template ngbPaginationNumber let-page let-currentPage="currentPage" let-disabled="disabled">
             {{ disabled ? 'd'+page : page }}
-            <span *ngIf="page === currentPage" class="sr-only">(current)</span>
+            <span *ngIf="page === currentPage" class="visually-hidden">(current)</span>
           </ng-template>
         </ngb-pagination>
       `);

diff --git a/src/pagination/pagination.ts b/src/pagination/pagination.ts
@@ -160,7 +160,7 @@ export class NgbPaginationPages {
     <ng-template #ellipsis>...</ng-template>
     <ng-template #defaultNumber let-page let-currentPage="currentPage">
       {{ page }}
-      <span *ngIf="page === currentPage" class="sr-only">(current)</span>
+      <span *ngIf="page === currentPage" class="visually-hidden">(current)</span>
     </ng-template>
     <ng-template #defaultPages let-page let-pages="pages" let-disabled="disabled">
       <li *ngFor="let pageNumber of pages" class="page-item" [class.active]="pageNumber === page"

diff --git a/src/rating/rating.spec.ts b/src/rating/rating.spec.ts
@@ -20,20 +20,20 @@ function createKeyDownEvent(key: number) {
 }
 
 function getAriaState(compiled) {
-  const stars = getStars(compiled, '.sr-only');
+  const stars = getStars(compiled, '.visually-hidden');
   return stars.map(star => star.textContent === '(*)');
 }
 
 function getStar(compiled, num: number) {
   return getStars(compiled)[num - 1];
 }
 
-function getStars(element, selector = 'span:not(.sr-only)') {
+function getStars(element, selector = 'span:not(.visually-hidden)') {
   return <HTMLElement[]>Array.from(element.querySelectorAll(selector));
 }
 
 function getDbgStar(element, num: number) {
-  return element.queryAll(By.css('span:not(.sr-only)'))[num - 1];
+  return element.queryAll(By.css('span:not(.visually-hidden)'))[num - 1];
 }
 
 function getState(element: DebugElement | HTMLElement) {
@@ -395,7 +395,7 @@ describe('ngb-rating', () => {
       const fixture = createTestComponent('<ngb-rating max="5"></ngb-rating>');
 
       const compiled = fixture.nativeElement;
-      const hiddenStars = getStars(compiled, '.sr-only');
+      const hiddenStars = getStars(compiled, '.visually-hidden');
 
       expect(hiddenStars.length).toBe(5);
     });

diff --git a/src/rating/rating.ts b/src/rating/rating.ts
@@ -56,7 +56,7 @@ export interface StarTemplateContext {
   template: `
     <ng-template #t let-fill="fill">{{ fill === 100 ? '&#9733;' : '&#9734;' }}</ng-template>
     <ng-template ngFor [ngForOf]="contexts" let-index="index">
-      <span class="sr-only">({{ index < nextRate ? '*' : ' ' }})</span>
+      <span class="visually-hidden">({{ index < nextRate ? '*' : ' ' }})</span>
       <span (mouseenter)="enter(index + 1)" (click)="handleClick(index + 1)" [style.cursor]="isInteractive() ? 'pointer' : 'default'">
         <ng-template [ngTemplateOutlet]="starTemplate || starTemplateFromContent || t" [ngTemplateOutletContext]="contexts[index]">
         </ng-template>

diff --git a/src/timepicker/timepicker.spec.ts b/src/timepicker/timepicker.spec.ts
@@ -1300,12 +1300,12 @@ describe('ngb-timepicker', () => {
          fixture.detectChanges();
          const buttons = getButtons(fixture.nativeElement);
 
-         expect((<HTMLButtonElement>buttons[0]).querySelector('.sr-only') !.textContent).toBe('Increment hours');
-         expect((<HTMLButtonElement>buttons[1]).querySelector('.sr-only') !.textContent).toBe('Decrement hours');
-         expect((<HTMLButtonElement>buttons[2]).querySelector('.sr-only') !.textContent).toBe('Increment minutes');
-         expect((<HTMLButtonElement>buttons[3]).querySelector('.sr-only') !.textContent).toBe('Decrement minutes');
-         expect((<HTMLButtonElement>buttons[4]).querySelector('.sr-only') !.textContent).toBe('Increment seconds');
-         expect((<HTMLButtonElement>buttons[5]).querySelector('.sr-only') !.textContent).toBe('Decrement seconds');
+         expect((<HTMLButtonElement>buttons[0]).querySelector('.visually-hidden') !.textContent).toBe('Increment hours');
+         expect((<HTMLButtonElement>buttons[1]).querySelector('.visually-hidden') !.textContent).toBe('Decrement hours');
+         expect((<HTMLButtonElement>buttons[2]).querySelector('.visually-hidden') !.textContent).toBe('Increment minutes');
+         expect((<HTMLButtonElement>buttons[3]).querySelector('.visually-hidden') !.textContent).toBe('Decrement minutes');
+         expect((<HTMLButtonElement>buttons[4]).querySelector('.visually-hidden') !.textContent).toBe('Increment seconds');
+         expect((<HTMLButtonElement>buttons[5]).querySelector('.visually-hidden') !.textContent).toBe('Decrement seconds');
        }));
 
     it('should have aria-label for inputs', fakeAsync(() => {

diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
@@ -32,7 +32,7 @@ const FILTER_REGEX = /[^0-9]/g;
             class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
             [disabled]="disabled">
             <span class="chevron ngb-tp-chevron"></span>
-            <span class="sr-only" i18n="@@ngb.timepicker.increment-hours">Increment hours</span>
+            <span class="visually-hidden" i18n="@@ngb.timepicker.increment-hours">Increment hours</span>
           </button>
           <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize"
             [class.form-control-lg]="isLargeSize"
@@ -47,7 +47,7 @@ const FILTER_REGEX = /[^0-9]/g;
             class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
             [disabled]="disabled">
             <span class="chevron ngb-tp-chevron bottom"></span>
-            <span class="sr-only" i18n="@@ngb.timepicker.decrement-hours">Decrement hours</span>
+            <span class="visually-hidden" i18n="@@ngb.timepicker.decrement-hours">Decrement hours</span>
           </button>
         </div>
         <div class="ngb-tp-spacer">:</div>
@@ -56,7 +56,7 @@ const FILTER_REGEX = /[^0-9]/g;
             class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
             [disabled]="disabled">
             <span class="chevron ngb-tp-chevron"></span>
-            <span class="sr-only" i18n="@@ngb.timepicker.increment-minutes">Increment minutes</span>
+            <span class="visually-hidden" i18n="@@ngb.timepicker.increment-minutes">Increment minutes</span>
           </button>
           <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
             maxlength="2" inputmode="numeric" placeholder="MM" i18n-placeholder="@@ngb.timepicker.MM"
@@ -70,7 +70,7 @@ const FILTER_REGEX = /[^0-9]/g;
             class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize"  [class.disabled]="disabled"
             [disabled]="disabled">
             <span class="chevron ngb-tp-chevron bottom"></span>
-            <span class="sr-only"  i18n="@@ngb.timepicker.decrement-minutes">Decrement minutes</span>
+            <span class="visually-hidden"  i18n="@@ngb.timepicker.decrement-minutes">Decrement minutes</span>
           </button>
         </div>
         <div *ngIf="seconds" class="ngb-tp-spacer">:</div>
@@ -79,7 +79,7 @@ const FILTER_REGEX = /[^0-9]/g;
             class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize" [class.disabled]="disabled"
             [disabled]="disabled">
             <span class="chevron ngb-tp-chevron"></span>
-            <span class="sr-only" i18n="@@ngb.timepicker.increment-seconds">Increment seconds</span>
+            <span class="visually-hidden" i18n="@@ngb.timepicker.increment-seconds">Increment seconds</span>
           </button>
           <input type="text" class="ngb-tp-input form-control" [class.form-control-sm]="isSmallSize" [class.form-control-lg]="isLargeSize"
             maxlength="2" inputmode="numeric" placeholder="SS" i18n-placeholder="@@ngb.timepicker.SS"
@@ -93,7 +93,7 @@ const FILTER_REGEX = /[^0-9]/g;
             class="btn btn-link" [class.btn-sm]="isSmallSize" [class.btn-lg]="isLargeSize"  [class.disabled]="disabled"
             [disabled]="disabled">
             <span class="chevron ngb-tp-chevron bottom"></span>
-            <span class="sr-only" i18n="@@ngb.timepicker.decrement-seconds">Decrement seconds</span>
+            <span class="visually-hidden" i18n="@@ngb.timepicker.decrement-seconds">Decrement seconds</span>
           </button>
         </div>
         <div *ngIf="meridian" class="ngb-tp-spacer"></div>

diff --git a/src/util/accessibility/live.ts b/src/util/accessibility/live.ts
@@ -23,7 +23,7 @@ function getLiveElement(document: any, lazyCreate = false): HTMLElement | null {
     element.setAttribute('aria-live', 'polite');
     element.setAttribute('aria-atomic', 'true');
 
-    element.classList.add('sr-only');
+    element.classList.add('visually-hidden');
 
     document.body.appendChild(element);
   }