From 92626c3f41af5e53c3ee4e38139a8a2a35411d2b Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 16 Aug 2019 16:23:29 +0100 Subject: [PATCH] Change method of hiding extra table layer This module creates a clone of the existing table as an extra layer which sits on top of it. This allows the row headers to sit above the table content when it scrolls. We were setting `role=presentation` on the extra table to hide it from assistive technologies. It seems that this wasn't working. From the spec' `role-presentation` should remove the semantics of the table but leave the content. Testing in Safari, with the OSX Accessibility Inspector, this isn't happening and the table is still being reported as a table by the accessibility API. This changes to the `aria-hidden` attribute, to make sure the extra table is ignored. --- app/assets/javascripts/fullscreenTable.js | 2 +- tests/javascripts/fullscreenTable.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/fullscreenTable.js b/app/assets/javascripts/fullscreenTable.js index 799e518d1..5f3cd073a 100644 --- a/app/assets/javascripts/fullscreenTable.js +++ b/app/assets/javascripts/fullscreenTable.js @@ -44,7 +44,7 @@ .clone() .addClass('fullscreen-fixed-table') .removeClass('fullscreen-scrollable-table') - .attr('role', 'presentation') + .attr('aria-hidden', true) ) .append( '
' diff --git a/tests/javascripts/fullscreenTable.test.js b/tests/javascripts/fullscreenTable.test.js index c1130f1ce..e179a97bd 100644 --- a/tests/javascripts/fullscreenTable.test.js +++ b/tests/javascripts/fullscreenTable.test.js @@ -123,7 +123,7 @@ describe('FullscreenTable', () => { expect(tableFrame).not.toBeNull(); expect(numberColumnFrame).not.toBeNull(); - expect(numberColumnFrame.getAttribute('role')).toEqual('presentation'); + expect(numberColumnFrame.getAttribute('aria-hidden')).toEqual('true'); });