craigsapp / website-polish-scores

Front-end for digital transcriptions of the Polish Music Heritage in Open Access project
https://polishscores.org
3 stars 1 forks source link

Add keyboard tabbing to the browse page #197

Closed craigsapp closed 1 year ago

craigsapp commented 1 year ago

The browse page does not have any significant keyboard navigation capabilities. Add this.

craigsapp commented 1 year ago

Commit https://github.com/craigsapp/website-polish-scores/commit/29b928c3d9cd2843967385f0743321a604e63409 implements keyboard tabbing for language selection and navigator toolbar.

For example, pressing tab three times on the browse page will highlight the random selection button in the navigator:

Screen Shot 2022-10-17 at 2 38 21 PM

Pressing enter will click on the button (according to the delegate event listener in the _include/listeners/clickListener.js file.

There should be another button to link to POPC2 scans before the NIFC icon. The EU flag icon does not go anywhere, so it is not tabbable. Also the selected language is not tabble, only the language which can be changed tol.

All page types should have this behavior. Here is an example of pressing the tab key 10 times on the work page to navigate to the keyscape button:

Screen Shot 2022-10-17 at 2 45 23 PM

Pressing enter on the keyscape button will toggle display of the keyscape plot:

Screen Shot 2022-10-17 at 2 46 34 PM
craigsapp commented 1 year ago

Commit https://github.com/craigsapp/website-polish-scores/commit/edabb850e749dd412b85a0484e77cf0432bc97f3 adds more tabbing to the browse page.

Select menus in the search area are now highlighted in red when tabbing:

Screen Shot 2022-10-17 at 5 51 40 PM

They still need to be activated with enter key to open the menu.

And tabbing further down the page to the search results will highlight the rows in the search results list:

Screen Shot 2022-10-17 at 5 51 57 PM

Pressing enter on a particular row will open the work page for that entry.

craigsapp commented 1 year ago

Some problems remain, but those can be separate issues: