Filter button functionality not accessible using JAWS keyboard navigation (End: 7/10)

[ajspotts]

Description

We think this is filter functionality on a more generic table component.

This issue connects to #12126 which was partially solved by #12898. It was discovered that while using JAWS in Chrome, the filter button would not activate.

Background

Below is a list of discoveries made while investigating the initial ticket:

• When navigating the page with the keyboard without JAWS, filter button activation worked as expected.
• The filter button is wrapped in a span element; when testing JAWS on a similar element on a different page JAWS activated the element as expected.
• It is believed that the issue may be related to the location of the event handler in the code. There is a sort button on the same page that interacts as expected with JAWS whose handler is located directly within the element. On the other hand, the filter button is made up of several nested components and is being passed a handler via props.

[yoomlam]

The sort button was straight-forward to fix by adding role="button" tabindex="0" to the button's span element. However the filter button is more complex -- it must first be clicked to open a modal dialog for the user to select filter options. "Clicking" (by using the space or Enter keys) on the filter button does not work while JAWS is on.
A difference is the sort button has a typical onClick attribute whereas the filter button used a more complex click recognition mechanism that apparently is not compatible with JAWS and Chrome.

[yoomlam]

A11y testing can be done by using or modifying a simple page, e.g., http://pauljadam.com/demos/button.html, to mimic the component in question. In this case, we changed the <a href="#" role="button"> to a span element to mimic the sort button.

[ajspotts]

It was suggested by Carolyn that submitting a ticket to the helpdesk using this link could potentially be useful as there is a contracted team dedicated to JAWS related issues per these docs

[jimruggiero]

@ajspotts @hschallhorn Has the help desk ticket referenced above been completed/closed? If no, should this be in Current Sprint or the Backlog? If it stays in Current Sprint, can this be estimated?

[ajspotts]

@ajspotts @hschallhorn Has the help desk ticket referenced above been completed/closed? If no, should this be in Current Sprint or the Backlog? If it stays in Current Sprint, can this be estimated?

It has not been opened as that's considered part of the work on the ticket. If @hschallhorn is ok with keeping in the current sprint and estimating I'm on board with that.

[leikkisa]

@araposo-tistatech
I set up JAWS on a virtual machine with Windows 10 and navigated to the Queue Table on Caseflow demo using Chrome. I am able to navigate to the filter checkboxes using my keyboard, and select them using the space key while JAWS is running. It seems to be working normally.

I did notice that the checkbox doesn't get outlined in red with JAWS. I visited another checkbox elsewhere in the app and observed the same behavior (I'm able to navigate to the checkbox with the keyboard and select it, but it's not highlighted in red).

I can't hear any of the screen reading on the VM due to no audio... but since this is for keyboard navigation, I think it's working.

Do you have URLS for specific tables besides the Queue table that I should check out?

[leikkisa]

[alisan16]

Data in columns with filtering capabilities are read as filter by when reviewing information with assistive technology programs and table commands. Elements should only read as filter by in the first row when the filter button has focus visually. This occurs with numerous tables throughout the web hosted application. (Not Resolved: 12/13/2019) Every table cell with a header filter reads as if you can filter from that location (3/26/2020 Not Resolved)

The state of the Filter elements Task, Types and Docket is not read by assistive technology programs. If a filter is applied, visually a user can see this change has been applied to the data, however this change is not read by assistive technology programs. (New: 08/21/2019) in caseflowdemo (under Queue/your queue/assigned) – I couldn’t get it to function in Chrome (3/26/2020 I was able to get to the filter but it was not read by JAWs once I activated (checked the box) of a filter)

Here were a couple of issues from the audit that seem related to this. The full audit document is here: https://docs.google.com/document/d/10w7kVO1ySZAezpwgLA-pELS2da1zu-xu/edit

Also - if audio isn't working, JAWS has a results viewer/speech history mode which will allow you to see the recent spoken messages - you can follow these instructions to enable it: https://doccenter.freedomscientific.com/doccenter/doccenter/rs25c51746a0cc/2015-5-29_jaws_tool_belt_lesson_one/02_JAWS_Tool_Belt_Lesson_One.htm#:~:text=If%20you%20miss%20one%20or,containing%20the%20most%20recent%20announcement.

Let me know if you run into more issues.

[alisan16]

Actually this ticket looks like a duplicate of #12134, where Alec already confirmed that the filter button is read by JAWS and the column is read as "filtered by X" when the filtering is applied. @leikkisa let's hold off on further work here.

@chandracarney @carodew can you check with Linsey? On our side, it looks all fixed, but we'll hold off on closing both tickets until we get more confirmation.

[carodew]

@chandracarney is that something you're working on or should it bounce to @jimruggiero ?

[jimruggiero]

Thanks for flagging @carodew - this one's me! I'm pulling together an update for Linsey and will include this one in the messaging!

[leikkisa]

Ok - I am testing Stephen's JAWS setup instructions (success!), and I can hear the audio and connect to the dev environment. Below is the readout (thanks to Alisa's tip!).

I confirm that when re-selecting the element on the table, it reads the current filter options. So if that's the goal, I think this can be closed per the ticket Alisa linked above. It doesn't read it after checking the box, but the option would have been read right before (and instructions to press space to select it).

JAWS Readout when applying the filter
Tasks Sort by Tasks Filter by task �column header�
column 3 row 1
Filter by task �Button�
To activate press Enter.
Clear Label filter �Button�
To activate press Enter.
�list�
with 3 items
Denied Motion to Vacate (3) �check box� �not checked�
To check press Spacebar.
Is reading the filter options supposed to happen here?

Reloads with the new filter
Review Cases | Caseflow
table
Column 2, Row 1
�MainRegion�
�MainRegion�
�TabPanel�
Case Details Sort by Case Details �column header�
column 2 row 1
Sort by Case Details �Button�
To activate press Enter.

When re-selecting the elements, it reads the current filter
Tasks Sort by Tasks Filter by task. Filtering by DeniedMotionToVacateTask �column header�
Sort by Tasks �Button�
To activate press Enter.
Filter by task. Filtering by DeniedMotionToVacateTask �Button�
To activate press Enter.