From ed0b611033072b06d8916a1b776a1ae93f7332b7 Mon Sep 17 00:00:00 2001 From: Matias Lera <62261539+luislera@users.noreply.github.com> Date: Wed, 27 Oct 2021 18:01:25 -0300 Subject: [PATCH] [Accessibility] [Screen Reader] Enable the screen reader to announce when nodes are expanded and collapsed in the JSON tree view (#2299) * Added screen reader announcements when nodes are expanded and collapsed. * Added a new line at the end of the file * Added a comment --- .../collapsibleJsonViewer.scss | 6 ++ .../collapsibleJsonViewer.spec.tsx | 84 ++++++++++--------- .../collapsibleJsonViewer.tsx | 7 ++ 3 files changed, 57 insertions(+), 40 deletions(-) diff --git a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.scss b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.scss index 0318f1795..15dcf0eb8 100644 --- a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.scss +++ b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.scss @@ -23,3 +23,9 @@ width: calc(100% - 10px); } } + +.aria-region { + position: absolute; + top: -9999px; + overflow: hidden; +} diff --git a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.spec.tsx b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.spec.tsx index 244cc3048..92f3be20a 100644 --- a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.spec.tsx +++ b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.spec.tsx @@ -67,48 +67,51 @@ const mockData = { }; const mockTreeHTMLText = ` -