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 = `
-
- -
-
-
-
-
- {} 2 keys
-
-
- -
-
-
- [] 1 item
-
- -
-
-
-
+
+
+ -
+
+
+
+
+ {} 2 keys
+
+
+ -
+
+
+ [] 1 item
+
+ -
+
+
- {}
- 2 keys
+
+ {}
+ 2 keys
+
-
-
- - "1"
- - "Bot"
-
-
-
-
-
- - "conversationUpdate"
-
-
-
-
`;
+
+ - "1"
+ - "Bot"
+
+
+
+
+
+
- "conversationUpdate"
+
+
+
+
+
text content
+
`;
let jsonViewerWrapper;
let jsonViewer;
@@ -117,6 +120,7 @@ describe('The JsonViewer', () => {
beforeAll(() => {
jsonViewerWrapper = mount();
jsonViewer = jsonViewerWrapper.find(CollapsibleJsonViewer).instance();
+ document.body.innerHTML = mockTreeHTMLText;
});
it('should render with data and a theme', () => {
diff --git a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.tsx b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.tsx
index c11b8e9e7..b271ed7bf 100644
--- a/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.tsx
+++ b/packages/sdk/ui-react/src/widget/collapsibleJsonViewer/collapsibleJsonViewer.tsx
@@ -115,6 +115,7 @@ export class CollapsibleJsonViewer extends Component
+
);
}
@@ -186,6 +187,12 @@ export class CollapsibleJsonViewer extends Component -1 ? newState : newState.concat('.');
};
private focusNext(event: KeyboardEvent): void {