Maps UI accessibility improvements

[Malvoz]

DuckDuckGo maps has a few accessibility issues. Additionally it inherits accessibility issues in MapKit (which I have reported in the Apple developer forum).

I believe the following issues are specific to DuckDuckGo maps (not inherited by the MapKit JS framework):

Back button

• Is missing role="button" (preferably it should be <button>)
• Is missing an accessible name e.g. aria-label="Back"

---

Clear search button

• The accessible name is "X". This should be descriptive, e.g. aria-label="Clear search"
• Although fousable, it is not reachable using a keyboard

---

Search button

• The accessible name is "S". This should be descriptive, e.g. aria-label="Search"

---

Close sidebar button

• The accessible name is "<". This should be descriptive, e.g. aria-label="(Close|Hide) details"

---

Open sidebar button

• The accessible name is ">". This should be descriptive, e.g. aria-label="(Open|Show) details"

---

Locate Me button

• Is not keyboard focusable
• Is missing semantics. It should be <button> (or <a (tabindex="0"|href="#") role="button">)
• Is missing an accessible name. This should be descriptive, e.g. aria-label="Locate me"

---

Close Locate Me button

• Is not keyboard focusable
• Has no semantics. It should be <button> (or <a (tabindex="0"|href="#") role="button">)
• Is missing an accessible name. This should be descriptive, e.g. aria-label="Close"

---

Activate Locate Me button

• Is not keyboard focusable
• It should be <button> (or <a (tabindex="0"|href="#") role="button">)

(these things apply to the "button" next to it aswell)

---

I'm just scratching the surface though, other things to consider:

• Focus delegation (For example, you'd probably want to send focus to the "dialog" after clicking the Locate Me button. As well as send focus back to the Locate Me button once the dialog has been closed. Per the WAI-ARIA Authoring Practices recommended Keyboard Interactions for buttons)
• CSS outlines. It seems outlines are disabled, consider enabling outlines at least for keyboard users (see :focus-visible).