A11y: Focus order within the map should follow visual order

[bacitracin]

Describe the task

On the Find Properties page the focus order is a bit wonky within the map. Generally, focus order for screenreaders & keyboard users should match the visual order on the screen.

Acceptance Criteria

• Go to the find properties page. Select a property.
• Keyboard nav through the map, OR use screenreader.
• After you land on the Search input, TAB to move forward.
• Your focus SHOULD land on the property tooltip next. But it jumps down to the map legend.
• See this image for how it "ought" to work

Note: It's possible that this is a giant pain to fix. So just do some research, and if it seems like a huge lift, comment here, and we'll reevaluate whether it's worth it to pursue.

Additional context

• https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

[zheyichn]

I have tried wrapping these components within div elements and using tabIndex={1/2/3} to adjust the order. However, this approach still failed to place the tooltip popup in the second position. Please let me know if there is another potential solution to address this issue, and I will give it a try.

[bacitracin]

Hey @zheyichn I'm traveling this week for the holiday so can't be too responsive. I wrote this ticket up based on issues found from @Amberroseweeks audit of the properties map. Perhaps she has some suggestions for you.

As mentioned in the issue, this fix could be a giant pain that is not worth it to pursue.

[JT0Y]

Just adding a comment here regarding the maplibre API. This doesn't seem to resolve the tab order issue on the ticket, but there is one prop about focus: focusafteropen.

[zheyichn]

I looked up the maplibre API, it seems that a Popup component is lifted up to the same level as the Map comp when rendered to ensure it is floating above the map despite the Popup is nested within Map in React. Here is an example: https://maplibre.org/maplibre-gl-js/docs/examples/popup/, the popup is always focused lastly, after map control.
I tried adding more css to retain the Popup within Map, but this did not work.