Fixes ADO Issue: #63920

Describe the issue

If the screen reader is not reading the state as Expanded/Collapsed after selecting the ‘Expand/Collapse’ button present on the ‘JSON’ section under the “Live Chat’ tab, so it would be difficult and confusing for screen reader users to find out the state of the control.

Actual behavior:

The screen reader is not reading the state as Expanded/Collapsed after selecting the ‘Expand/Collapse’ button present on the ‘JSON’ section under the “Live Chat’ tab.

Expected behavior:

The screen reader should be reading the state as Expanded/Collapsed after selecting the ‘Expand/Collapse’ button present on the ‘JSON’ section under the “Live Chat’ tab.

Repro Steps:

1. Open Bot Framework Emulator installed on the system.
2. Bot Framework Emulator Application with Welcome screen opens.
3. Navigate on the welcome screen and select the Open Bot button.
4. Open A bot Dialog opens, navigate on the dialog and enter inputs in edit fields and select Connect button.
5. Bot Gets connected and a new Tab opens, navigate to Type a Message field and enter any chat message.
6. Bot Response as per text entered appears and changes occur in JSON Section.
7. Navigate on JSON Section.
8. Verify the issue.

Changes included in the PR

• Added a DIV element for handling announcements when tree nodes are expanded/collapsed
• Added a CSS class to position the DIV element offscreen
• Updated test cases for the Json Viewer component

Screenshots

Test cases executed successfully