Accessibility roles to tell screen readers the input box and list of locations are related
Keyboard accessibility, via tabIndex values (more below)
With Reselect, memoizes creation of the array of features to display
Better options when editing a location selected from recently used, or hydrated from a URL (more below)
This also adds and corrects types to a bunch of files, and adds some memoization of callbacks with useCallback. We are now at 89% TypeScript by lines of code within src/.
Keyboard accessibility
Currently, if the input for start point is focused, tabbing will go to the input for end point, which takes away the dropdown suggestions for the start point. This uses tab indexes to make tabbing from the start point go to the dropdown, and only after the last entry in the dropdown will it then tab to the end point. From there, it will tab to the first entry in the dropdown for end point, etc.
It works ok, except that after the end of the dropdown, tab order goes, not to the next element in the SearchBar (that would be the TimeBar's button), but to the map, which is invisible, and then to each of its controls in turn. Adding aria-hidden to the map did not affect this. I'd seemingly have to also set tabIndex={-1} on the map and each of its controls and it looks like ReactMapGL doesn't even have a mechanism for this. Also, hardcoded values for tabIndex spread across two different components (SearchBar and SearchDropdown) is a bit of a hack.
Better options when editing a location selected from recently used, or hydrated from a URL
There are two indirect ways to select locations that were, at some point, geocoded:
Select a geocoded location, and then reload the page or share a link with someone. The location's source is now UrlWithString
Select a recently-used location (from the dropdown when input box is empty)
In both cases, currently, if you then select the input box corresponding to such a location, there are no dropdown suggestions (and in case 2 there's a spinner that spins endlessly). This PR will add suggestions of "Current Location" and any other recently-used locations.
Improves the search dropdown:
tabIndexvalues (more below)This also adds and corrects types to a bunch of files, and adds some memoization of callbacks with
useCallback. We are now at 89% TypeScript by lines of code withinsrc/.Keyboard accessibility
Currently, if the input for start point is focused, tabbing will go to the input for end point, which takes away the dropdown suggestions for the start point. This uses tab indexes to make tabbing from the start point go to the dropdown, and only after the last entry in the dropdown will it then tab to the end point. From there, it will tab to the first entry in the dropdown for end point, etc.
It works ok, except that after the end of the dropdown, tab order goes, not to the next element in the SearchBar (that would be the TimeBar's button), but to the map, which is invisible, and then to each of its controls in turn. Adding
aria-hiddento the map did not affect this. I'd seemingly have to also settabIndex={-1}on the map and each of its controls and it looks like ReactMapGL doesn't even have a mechanism for this. Also, hardcoded values fortabIndexspread across two different components (SearchBar and SearchDropdown) is a bit of a hack.Better options when editing a location selected from recently used, or hydrated from a URL
There are two indirect ways to select locations that were, at some point, geocoded:
In both cases, currently, if you then select the input box corresponding to such a location, there are no dropdown suggestions (and in case 2 there's a spinner that spins endlessly). This PR will add suggestions of "Current Location" and any other recently-used locations.