diff --git a/src/lib/ThumbnailsSidebar.js b/src/lib/ThumbnailsSidebar.js index 7f1b61dd5..b3902a820 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 @@ -439,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'); } }); } diff --git a/src/lib/__tests__/ThumbnailsSidebar-test.js b/src/lib/__tests__/ThumbnailsSidebar-test.js index 44f5c360c..9fdd77d95 100644 --- a/src/lib/__tests__/ThumbnailsSidebar-test.js +++ b/src/lib/__tests__/ThumbnailsSidebar-test.js @@ -439,6 +439,8 @@ describe('ThumbnailsSidebar', () => { beforeEach(() => { stubs.addClass = jest.fn(); stubs.removeClass = jest.fn(); + stubs.addAriaAttribute = jest.fn(); + stubs.removeAriaAttribute = jest.fn(); // eslint-disable-next-line const createTestThumbnail = pageNum => { @@ -446,6 +448,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 +479,22 @@ 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); + }); + + test('should remove the aria-current attribute when thumbnail is not selected', () => { + thumbnailsSidebar.currentPage = 2; + + thumbnailsSidebar.applyCurrentPageSelection(); + + expect(stubs.removeAriaAttribute).toBeCalledTimes(2); + }); }); describe('toggle()', () => {