[Dialog] Improve assistive technology (AT) experience for `dragEnabled` and `resizable`

[geospatialem]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Summary

The component provides some support to assistive technology (AT) users, but its unclear of the support since they must enter via forms mode to access the component, and they may enable the functionality without knowing and will not receive context of their changes.

Actual Behavior

In forms mode AT users may activate dragEnabled using the arrow keys unknowingly. Users are not currently provided context of the changes made for both dragEnabled and resizable, so they could be unaware of any changes taking place.

Expected Behavior

• [x] Remove aria-grabbed due to its deprecation and inconsistent support
• [ ] Remove dragging via arrows by default. Instead offer a method to enter or leave the drag mode, such as a button to enter, listen for the keystrokes, respond, then Escape or Space to exit.
  • This was the recommendation from Level Access, because a screen reader user will get to the component and try to read it. If they are in Forms mode which allows key presses to go straight through the screen reader, they will be moving the component around instead of reading it.
• [ ] Provide context when interacting with the component's drag and resizing utilities via a live region. Nice to have: Provide context if at the edge of the viewport.

Reproduction Sample

https://codepen.io/geospatialem/pen/BagmoWa

Reproduction Steps

1. Enable either JAWS or NVDA
2. Open the sample
3. When the component is in focus turn on forms mode
   • JAWS: Enter key
   • NVDA: Inst + spacebar keys
4. Observe that dragging (arrow keys) and resizing (shift + arrow keys) works, but its not intuitive after entering form mode nor is context provided to the user

Reproduction Version

2.12.0

Working W3C Example/Tutorial

https://www.nngroup.com/articles/drag-drop/#toc-accessibility-for-draganddrop-4

Relevant Info

Confirmed with JAWS and NVDA on Windows browsers

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

[geospatialem]

Adding design for expertise on the following:

Remove dragging via arrows by default. Instead offer a method to enter or leave the drag mode, such as a button to enter, listen for the keystrokes, respond, then Escape or Space to exit.

[driskull]

Remove aria-grabbed due to its deprecation and inconsistent support

We never added this so ✅

Nice to have: Provide context if at the edge of the viewport.

This one would be a bit tough to do.