fix(appbar-accessibility): Fix app bar accessibility

[amir-azma]

Description

Fix some accessibility features in app bar:

AppBar

• Notification
• About
• Geolocator
• Basemap Panel
• Export

Fixes #1792

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

https://amir-azma.github.io/geoview/raw-feature-info.html

Checklist:

• I have build (rush build) and deploy (rush host) my PR
• I have connected the issues(s) to this PR
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have created new issue(s) related to the outcome of this PR is needed
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

---

This change is 

[kmansoor713]

Observation 1- In the search list, User keep tabbing the search result and when user select arrow keys, it goes into the map and map is scrolling up and down

Observation 2: Initially, the focus is not capturing the search button, instead it continue to go to map’s footer panel functionalities and then when we do Shift +TAB then focus come to the Search Icon (Left panel of map)
Observation 3:
A-when you search, then if you hit Esc key on keyboard or click on X icon, it is closing the panel as expected
B-Arrow keys is using to move the map section and tab is used for focus on different basemaps
C-As you shared about basemap in chat that arrow key is used to select up and down, so whether
it is accepted or not. Kindly confirm

Observation 3:
In Google Chrome-By selecting CNTR +Q= Exit the map
In MS Edge-By selecting CNTR +Q giving search option= Enter a Keyword like “tabs” or “Windows” to find an action

[jolevesq]

Reviewed 1 of 2 files at r1, all commit messages.
Reviewable status: 1 of 3 files reviewed, 6 unresolved discussions (waiting on @amir-azma)

---

packages/geoview-core/src/core/components/common/focus-trap-element.tsx line 1 at r2 (raw file):

/* eslint-disable react/require-default-props */

No global eslint disable

---

packages/geoview-core/src/core/components/common/focus-trap-element.tsx line 61 at r2 (raw file):

  return (
    <FocusTrap open={basic ? active : id === focusItem.activeElementId}>
      {!basic ? (

What does basic do, add comment

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 113 at r2 (raw file):

  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Escape') {

This whole listener on esc should be in a focus trap utility function an reuse everywhere

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 114 at r2 (raw file):

  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Escape') {
      setGeolocatorActive(false);

Focus goes back to geolocator but I have to press enter twice to get back in

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 119 at r2 (raw file):

    if (ARROW_KEY_CODES.includes(event.code)) {
      // TODO stop moving the map here
      event.preventDefault();

Doesnnot wrk, using arrow still move themaps. This arrow, ont moving the map should be handle at the same place as the crosshair on map focus. The arrow hould move map only when focus

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 130 at r2 (raw file):

    if (active) {
      document.addEventListener('keydown', handleKeyDown);

Listener is added every time it is active but remove only on unmount, we may end up with many listener I think...

[amir-azma]

Reviewable status: 1 of 3 files reviewed, 6 unresolved discussions (waiting on @jolevesq)

---

packages/geoview-core/src/core/components/common/focus-trap-element.tsx line 1 at r2 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

No global eslint disable

Removed the eslint disable, added defaultProps to component

---

packages/geoview-core/src/core/components/common/focus-trap-element.tsx line 61 at r2 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

What does basic do, add comment

Done

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 113 at r2 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

This whole listener on esc should be in a focus trap utility function an reuse everywhere

Once we call setGeolocatorActive(false); it set active to be false to close the search panel, then since active is false, the focus trap disables allowing to continue tab to other sections, the purpose of this Esc event listener is not disabling focus trap at the beginning, that's my idea

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 114 at r2 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

Focus goes back to geolocator but I have to press enter twice to get back in

That's a little tricky, need to check

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 119 at r2 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

Doesnnot wrk, using arrow still move themaps. This arrow, ont moving the map should be handle at the same place as the crosshair on map focus. The arrow hould move map only when focus

I am reviewing it

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 130 at r2 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

Listener is added every time it is active but remove only on unmount, we may end up with many listener I think...

In this case in component unmount, we remove the "handleKeyDown" listener for sure, I checked that by console.log, when we press Esc, then 'active' becomes false, closing panel, component unmounts, then pressing Esc again doesn't call event "handleKeyDown" since it's cleared inside the useEffect return ()..

[jolevesq]

Reviewable status: 0 of 3 files reviewed, 2 unresolved discussions (waiting on @amir-azma)

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 114 at r2 (raw file):

Previously, amir-azma wrote…

That's a little tricky, need to check

Not solved

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 119 at r2 (raw file):

Previously, amir-azma wrote…

I am reviewing it

Not working

[amir-azma]

Reviewable status: 0 of 3 files reviewed, 2 unresolved discussions (waiting on @jolevesq)

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 119 at r2 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

Not working

Applied the fix please check host url

[amir-azma]

Reviewable status: 0 of 3 files reviewed, 2 unresolved discussions (waiting on @jolevesq)

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 114 at r2 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

Not solved

Once we hit Esc, the geolocator icon is active (shows the tooltip) but first hit enter doesn't open it, then the second enter opens, I still don't know why if the button is active why hitting enter doesn't open the panel

[jolevesq]

Reviewed 1 of 2 files at r3, all commit messages.
Reviewable status: 1 of 3 files reviewed, 3 unresolved discussions (waiting on @amir-azma)

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 157 at r5 (raw file):

  const handleKeyDown = (event: KeyboardEvent) => {
    // disables map interactions (arrow keys won't move the map)
    setMapKeyboardPanInteractions(0);

This need to be in a the crosshair component. Keyboard pan interaction are on when crosshair is enable. This way it will work everything. In your case, you do notput back interaction when crosshair is enable again

[amir-azma]

Reviewable status: 1 of 4 files reviewed, 3 unresolved discussions (waiting on @jolevesq)

---

packages/geoview-core/src/core/components/geolocator/geolocator.tsx line 157 at r5 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

This need to be in a the crosshair component. Keyboard pan interaction are on when crosshair is enable. This way it will work everything. In your case, you do notput back interaction when crosshair is enable again

I moved this logic to Crosshair component

[jolevesq]

We close as we will deal with this later