W-10556766 Array response cannot be focused (#9)

* Add focus behavior on the response array + test

* Code review

* 0.3.9

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",

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';

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: '+';
 }

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,12 +287,36 @@ 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>' +
         '</code>';
       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");
+    });
+  });
 });