Keyboard navigation issue for 'Learn More' button on Map

[trushmi]

What is the issue you are reporting?

Description:

When users select a school using the keyboard on the map, they can only press the 'Learn More' button after traversing through each marker on the map.

Screen recording:

Issue.with.learn.more.button.mov

Contact Details

No response

[nickvisut]

Additional notes: Issue originally reported by @javtran here: #191 (comment). Ideally, a user ought to be able to easily and quickly get to either the "Learn more" button or the school details page. Some suggestions for fixes discussed below:

---

Suggestion for short-term fix via @BeeSeeWhy: Since tabbing only focuses the school and doesn't select it (keyboard user must press ENTER or KEY), we can change tab order so that AFTER the user selects the school, the next tab keypress focuses "Learn more". Alternatively, selecting the school automatically focuses "Learn more", skipping the interim step. Getting back to the map could use, for example, the ESC key.

Long-term fix suggestion (TODO: break out to own issue?): No longer allow keyboard navigation/tabbing through the map markers directly. Instead, only allow keyboard navigation through the list. This allows for a stable, intuitive tab order (versus map marker coordinates). This also appears to be how major map web applications handle keyboard navigation.

• for desktop keyboard users, show list and map at the same time (perhaps the school card is merged into the list, or the card is adjacent to the list); perhaps have toggle for either list or map as per Kira where needed
• for phone users, it would be difficult to show both list and map simultaneously due to screen real estate; map can show w/a "drawer" for list, or vice versa. a connected keyboard would then allow navigating through the list when shown
• for tablets, it would be similar to keyboard users, but may have less screen real estate