Kanban board: Instructions provided in live region are announced multiple times.

Issue Summary

On Kanban board the instructions provided in live region are announced multiple times.

Steps to Reproduce

1. Turn on a screen reader like JAWS
2. Navigate to the kanban board
3. Navigate to any Issue on the board with tab key. 
4. Turn off the browse mode (Ins + z) 
5. Press space to lift the issue & use left/right arrow keys to move 
6. Observe that the announcements are repeated unnecessarily.

Actual Results

When user lift any issue with keyboard space key the instructions "You have lifted an issue in Selected for Development column. Use the arrow keys to move, space bar to drop, and escape to cancel." is announced twice by the screen reader. 

Similarly when user press left/right arrow keys to move the instructions "You have moved an item from Selected for Development column to In Progress column. Use the arrow keys to move, space bar to drop, and escape to cancel." is announced twice by the screen reader.

Similarly when user drops the issue with space key the instructions is announced twice by screen reader.

It is because the instructions are provided in live region are also referenced again via aria-labelledby attribute to the issue button. Hence it makes the screen reader announce them twice (once via live region & next via aria-labelledby)

Expected Results

The instructions provided in live region should be announced once by the screen reader when user has lifted the issue or moved the issue with arrow keys & dropped the issue. 

There are 2 main ways I can think of.

1) Remove the id "drag-and-drop-announcements" from the aria-labelledby attributes provided to <div classs="js-draggable-trigger"> elements or the id should be removed as soon as user lifts the issue & should be placed back when user drops the issue.

But a challenge if we remove the id is how to announce the instruction "Draggable item. Ensure your screen reader is not in browse mode and then press space bar to lift" when user tabs to the issue for first time ? 

A long term solution would be to make these instructions along with other keyboard instructions available on the page visually persistent. So user can access them before starting interaction with drag/drop and also to make drag/drop work without needing to disabling the browse mode.

2) or another solution would be to stop aria live & keep the aria-labelledby attribute. 

More improvements 

• Also remove the id "ghx-column-title-" from the aria-labelledby attribute. And only keep the id of the issue.
• Also when user moves around the text "Use the arrow keys to move, space bar to drop, and escape to cancel" should not be announced everytime. Only once when user lifts the item then it should be announced.
• Also the live region seems to be updated everytime if user press keys like control, escape, etc. 

Note: Here I also think that we need to make the label of the button shorter since it will be announced by screen reader everytime user moves the issue (because the button is focused hence it’s label will be announced)

Also the entire card need to be focusable first so user can access all information such as issue key, summary, assignee, type, priority, etc & then put the button to drag/drop the issue, so in this way we can keep the label of the button shorter & would be easy for screen reader users to understand & interact.

Because there is a disadvantage of keeping the button label longer with all info because it will be announced by screen reader each time button is moved around.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available