UMB-CS-682-Team-03 / tracker

0 stars 0 forks source link

Keyboard accessibility #28

Closed patel-malav closed 6 months ago

patel-malav commented 7 months ago

Keyboard accessibility is mostly functional

Though when an option is selected in the table using << "space" >> key the selected row needs to be highlighted.

To fix this make the tab navigate to the next row instead of the input checkbox, or the better solution to this issue is properly handle the click event on the checkbox

rouilj commented 6 months ago

@patel-malav, can you write out the keyboard sequences that you should see in a superseder/issue popup.

Something like:

  popup opens
  default focus is set to title (first input)
  tab moves from title -> status -> search -> reset

  after return key clicks search,  tab moves to first row of results
  arrow keys used to move up/down rows
  tab moves to accumulator input then Accept then cancel then back to title input.

@BharathKanama will need this info to try to test at least a part of it under selenium and we will need it for documentation.

rouilj commented 6 months ago

@patel-malav Also what branch holds this code? Main??

patel-malav commented 6 months ago

@rouilj It's now updated in main

@BharathKanama

When popup opens, if there is searchWith present

Then the first input/select element in the popup and it will then navigate through out the following inputs and button, till the end of searchFragment form elements.

Once done with the form, the next element in focus will be pagination next or previous button depending if the a button is not disabled

Then it will navigate to the rows of the table instead of the checkboxes present in table row

Then it will go the accumulator fragment and then cancel and apply button

A user can use Arrow Up / Arrow Down key to move in popup to quickly jump to the first row or the last row

Here Arrow Down key will get the user to the first Element in table if no row is focused and Arrow Up will get the user to the last element in the table.

From there Arrow Down key will get the user to the next row in table Arrow Up to the previous row (this is intuitive once you try)

Arrow Left key can be used to quickly jump to the previous page button Arrow Right key can be used to quickly jump to the next page button

Though if a user is focused on a input or a select form element then he will not be able to use Arrow up and Arrow Down shortcuts