From 0b3e2021c890ddd67c02228f0d22eab3461acbc9 Mon Sep 17 00:00:00 2001
From: Alex Perez <96145153+alexpmule@users.noreply.github.com>
Date: Wed, 16 Feb 2022 12:07:24 -0300
Subject: [PATCH] W-10556766 Array response cannot be focused (#9)

* Add focus behavior on the response array + test

* Code review

* 0.3.9
---
 package-lock.json                     |  2 +-
 package.json                          |  2 +-
 src/lib/PrismFolding.js               |  2 +-
 src/styles/Highlight.styles.js        |  6 ++++++
 test/ResponseHighlightElement.test.js | 28 +++++++++++++++++++++++++--
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b9fad5a..6331d8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@advanced-rest-client/arc-response",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8bf8e31..a213de6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@advanced-rest-client/arc-response",
   "description": "A module containing the UI regions and the logic to render and support HTTP response in Advanced REST Client.",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",
diff --git a/src/lib/PrismFolding.js b/src/lib/PrismFolding.js
index e7db502..923da04 100644
--- a/src/lib/PrismFolding.js
+++ b/src/lib/PrismFolding.js
@@ -111,7 +111,7 @@ Prism.hooks.add('brace-complete', (env) => {
   }
   code.classList.add('toggle-padding');
   nodes.forEach((node) => {
-    const target = document.createElement('span');
+    const target = document.createElement('button');
     target.classList.add('toggle-target');
     target.classList.add('opened');
     target.title = 'Toggle visibility';
diff --git a/src/styles/Highlight.styles.js b/src/styles/Highlight.styles.js
index 79419c3..00da362 100644
--- a/src/styles/Highlight.styles.js
+++ b/src/styles/Highlight.styles.js
@@ -61,6 +61,7 @@ pre {
 }
 
 .toggle-target {
+  all: unset;
   position: absolute;
   width: 12px;
   height: 12px;
@@ -73,6 +74,11 @@ pre {
   margin-top: 0.2rem;
 }
 
+.toggle-target:focus {
+  border: 1px solid rgb(0 95 204);
+  box-shadow: 0px 0px 1px 0px rgb(0 88 200 / 87%);
+}
+
 .toggle-target::before {
   content: '+';
 }
diff --git a/test/ResponseHighlightElement.test.js b/test/ResponseHighlightElement.test.js
index c3ae2b2..3e59482 100644
--- a/test/ResponseHighlightElement.test.js
+++ b/test/ResponseHighlightElement.test.js
@@ -90,7 +90,7 @@ describe('ResponseHighlightElement', () => {
       await aTimeout(0);
       const compare =
         '<code class="language- toggle-padding" id="output">' + 
-        '<span class="toggle-target opened" title="Toggle visibility" aria-label="Activate to toggle visibility of the lines"></span>' + 
+        '<button class="toggle-target opened" title="Toggle visibility" aria-label="Activate to toggle visibility of the lines"></button>' + 
         '<span class="token punctuation brace-curly brace-open brace-level-1" id="pair-0-close" data-open="pair-0-open">{</span>' + 
         '<span class="token property">"test"</span><span class="token operator">:</span> <span class="token boolean">true</span>' + 
         '<span class="token punctuation brace-curly brace-close brace-level-1" id="pair-0-open" data-close="pair-0-close">}</span>' +
@@ -287,7 +287,7 @@ describe('ResponseHighlightElement', () => {
       await aTimeout(0);
       const compare =
         '<code class="language- toggle-padding" id="output">' + 
-        '<span class="toggle-target opened" title="Toggle visibility" aria-label="Activate to toggle visibility of the lines"></span>' + 
+        '<button class="toggle-target opened" title="Toggle visibility" aria-label="Activate to toggle visibility of the lines"></button>' + 
         '<span class="token punctuation brace-curly brace-open brace-level-1" id="pair-0-close" data-open="pair-0-open">{</span>' + 
         '<span class="token property">"test"</span><span class="token operator">:</span> <span class="token boolean">true</span>' + 
         '<span class="token punctuation brace-curly brace-close brace-level-1" id="pair-0-open" data-close="pair-0-close">}</span>' +
@@ -295,4 +295,28 @@ describe('ResponseHighlightElement', () => {
       assert.dom.equal(element[outputElement], compare, { ignoreAttributes: ['aria-label'] });
     });
   });
+
+  describe('test toggle button in code viewer', () => {
+    beforeEach(() => {
+      // @ts-ignore
+      Prism.plugins.matchBraces.resetIndex();
+    });
+
+    it("should remove and add class on toggle button", async () => {
+      const element = await jsonNpFixture();
+      await aTimeout(0);
+      const button = /** @type HTMLElement */ (
+        element[outputElement].querySelector(".toggle-target")
+      );
+
+      // @ts-ignore
+      assert.equal(button.classList, "toggle-target opened");
+      button.click();
+      // @ts-ignore
+      assert.equal(button.classList, "toggle-target");
+      button.click();
+      // @ts-ignore
+      assert.equal(button.classList, "toggle-target opened");
+    });
+  });
 });