From 05da91015097148fd05081da6a3e060a38a54f3e Mon Sep 17 00:00:00 2001 From: fsuarez Date: Thu, 5 Aug 2021 14:52:12 -0500 Subject: [PATCH 1/7] fix: A11Y - add aria-current to ThumbnailsSidebar --- src/lib/ThumbnailsSidebar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/ThumbnailsSidebar.js b/src/lib/ThumbnailsSidebar.js index 7f1b61dd5..9dec2c260 100644 --- a/src/lib/ThumbnailsSidebar.js +++ b/src/lib/ThumbnailsSidebar.js @@ -254,6 +254,7 @@ class ThumbnailsSidebar { if (pageNum === this.currentPage) { thumbnailEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAIL_IS_SELECTED); + thumbnailEl.setAttribute('aria-current', true); } // If image is already in cache, then use it instead of waiting for From d043fa11f934f8aff9ee9a2076416fb393ee4fcd Mon Sep 17 00:00:00 2001 From: fsuarez Date: Thu, 5 Aug 2021 15:24:22 -0500 Subject: [PATCH 2/7] fix: A11Y - add aria-current to ThumbnailsSidebar From 811c086e2e7c9c042f52ec512bb7b39c26ee6bae Mon Sep 17 00:00:00 2001 From: fsuarez Date: Thu, 5 Aug 2021 16:03:46 -0500 Subject: [PATCH 3/7] fix: A11Y - add aria-current to ThumbnailsSidebar --- src/lib/ThumbnailsSidebar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/ThumbnailsSidebar.js b/src/lib/ThumbnailsSidebar.js index 9dec2c260..b3902a820 100644 --- a/src/lib/ThumbnailsSidebar.js +++ b/src/lib/ThumbnailsSidebar.js @@ -440,8 +440,10 @@ class ThumbnailsSidebar { const parsedPageNum = parseInt(thumbnailEl.dataset.bpPageNum, 10); if (parsedPageNum === this.currentPage) { thumbnailEl.classList.add(CLASS_BOX_PREVIEW_THUMBNAIL_IS_SELECTED); + thumbnailEl.setAttribute('aria-current', true); } else { thumbnailEl.classList.remove(CLASS_BOX_PREVIEW_THUMBNAIL_IS_SELECTED); + thumbnailEl.removeAttribute('aria-current'); } }); } From 01d783719ccc9a2dc055b55966735c65448ecb4e Mon Sep 17 00:00:00 2001 From: fsuarez Date: Fri, 6 Aug 2021 10:01:16 -0500 Subject: [PATCH 4/7] fix: A11Y - add unit tests --- src/lib/__tests__/ThumbnailsSidebar-test.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/lib/__tests__/ThumbnailsSidebar-test.js b/src/lib/__tests__/ThumbnailsSidebar-test.js index 44f5c360c..07193e911 100644 --- a/src/lib/__tests__/ThumbnailsSidebar-test.js +++ b/src/lib/__tests__/ThumbnailsSidebar-test.js @@ -435,10 +435,16 @@ describe('ThumbnailsSidebar', () => { describe('applyCurrentPageSelection()', () => { let thumbnails; + let parentEl; beforeEach(() => { stubs.addClass = jest.fn(); stubs.removeClass = jest.fn(); + stubs.addAriaAttribute = jest.fn(); + stubs.removeAriaAttribute = jest.fn(); + + parentEl = document.createElement('div'); + parentEl.dataset.bpPageNum = '3'; // eslint-disable-next-line const createTestThumbnail = pageNum => { @@ -446,6 +452,8 @@ describe('ThumbnailsSidebar', () => { thumbnail.dataset.bpPageNum = pageNum; thumbnail.classList.add = stubs.addClass; thumbnail.classList.remove = stubs.removeClass; + thumbnail.setAttribute = stubs.addAriaAttribute; + thumbnail.removeAttribute = stubs.removeAriaAttribute; return thumbnail; }; @@ -475,6 +483,14 @@ describe('ThumbnailsSidebar', () => { expect(stubs.removeClass).toBeCalledTimes(2); expect(stubs.addClass).toBeCalledTimes(1); }); + + test('should add the aria-current attribute when thumbnail is selected', () => { + thumbnailsSidebar.currentPage = 2; + + thumbnailsSidebar.applyCurrentPageSelection(); + + expect(stubs.addAriaAttribute).toBeCalledTimes(1); + }); }); describe('toggle()', () => { From acdcf2c4622f12f79a4e2325483652644faf18f6 Mon Sep 17 00:00:00 2001 From: fsuarez Date: Fri, 6 Aug 2021 10:12:16 -0500 Subject: [PATCH 5/7] fix: A11Y - add unit tests From 057a8e2b4a81738219abc17ff4012647e87eef59 Mon Sep 17 00:00:00 2001 From: fsuarez Date: Fri, 6 Aug 2021 10:30:03 -0500 Subject: [PATCH 6/7] fix: A11Y - add unit tests --- src/lib/__tests__/ThumbnailsSidebar-test.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/lib/__tests__/ThumbnailsSidebar-test.js b/src/lib/__tests__/ThumbnailsSidebar-test.js index 07193e911..6fd9ddee1 100644 --- a/src/lib/__tests__/ThumbnailsSidebar-test.js +++ b/src/lib/__tests__/ThumbnailsSidebar-test.js @@ -435,16 +435,11 @@ describe('ThumbnailsSidebar', () => { describe('applyCurrentPageSelection()', () => { let thumbnails; - let parentEl; beforeEach(() => { stubs.addClass = jest.fn(); stubs.removeClass = jest.fn(); stubs.addAriaAttribute = jest.fn(); - stubs.removeAriaAttribute = jest.fn(); - - parentEl = document.createElement('div'); - parentEl.dataset.bpPageNum = '3'; // eslint-disable-next-line const createTestThumbnail = pageNum => { @@ -453,7 +448,6 @@ describe('ThumbnailsSidebar', () => { thumbnail.classList.add = stubs.addClass; thumbnail.classList.remove = stubs.removeClass; thumbnail.setAttribute = stubs.addAriaAttribute; - thumbnail.removeAttribute = stubs.removeAriaAttribute; return thumbnail; }; From b492c7c30cdf86e09ceeac543243cfa46066eb6e Mon Sep 17 00:00:00 2001 From: fsuarez Date: Fri, 6 Aug 2021 11:06:09 -0500 Subject: [PATCH 7/7] fix: A11Y - add unit tests --- src/lib/__tests__/ThumbnailsSidebar-test.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/lib/__tests__/ThumbnailsSidebar-test.js b/src/lib/__tests__/ThumbnailsSidebar-test.js index 6fd9ddee1..9fdd77d95 100644 --- a/src/lib/__tests__/ThumbnailsSidebar-test.js +++ b/src/lib/__tests__/ThumbnailsSidebar-test.js @@ -440,6 +440,7 @@ describe('ThumbnailsSidebar', () => { stubs.addClass = jest.fn(); stubs.removeClass = jest.fn(); stubs.addAriaAttribute = jest.fn(); + stubs.removeAriaAttribute = jest.fn(); // eslint-disable-next-line const createTestThumbnail = pageNum => { @@ -448,6 +449,7 @@ describe('ThumbnailsSidebar', () => { thumbnail.classList.add = stubs.addClass; thumbnail.classList.remove = stubs.removeClass; thumbnail.setAttribute = stubs.addAriaAttribute; + thumbnail.removeAttribute = stubs.removeAriaAttribute; return thumbnail; }; @@ -485,6 +487,14 @@ describe('ThumbnailsSidebar', () => { expect(stubs.addAriaAttribute).toBeCalledTimes(1); }); + + test('should remove the aria-current attribute when thumbnail is not selected', () => { + thumbnailsSidebar.currentPage = 2; + + thumbnailsSidebar.applyCurrentPageSelection(); + + expect(stubs.removeAriaAttribute).toBeCalledTimes(2); + }); }); describe('toggle()', () => {