Bugfixes (#47)

- Add information text when axe-core is not loaded
  Axe core might not load due to CSP. Add the information to the interface.
- Fix `controls` value of toggle button

Author: mtelgkamp

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "baat",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Bookmarklet for running axe-core tests directly in the Browser",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git@git.mindscreen.de:allianz/baat.git"
+    "url": "git@github.com:mindscreen/baat.git"
   },
   "keywords": [
     "axe-core",
@@ -36,7 +36,7 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "axe-core": "^4.3.3",
+    "axe-core": "^4.10.3",
     "browser-sync": "^2.27.10"
   }
 }

package.json

@@ -8,6 +8,7 @@ import { baact, createRef } from '../../../baact/baact'
 import { theme } from '../../theme'
 import { BAATEvent, ChangeCore } from '../../types'
 import {button} from "../../styles/button";
+import { link } from '../../styles/link';
 
 const styles = css`
     .visuallyHidden { ${visuallyHiddenStyles} }
@@ -25,6 +26,7 @@ const styles = css`
     input {
         font-size: ${theme.semanticSizing.font.normal};
     }
+    ${link}
 `;
 
 interface ILibSelectionAccessor {
@@ -34,8 +36,9 @@ export class LibSelection extends BaseHTMLElement<ILibSelectionAccessor> impleme
     loaded: boolean = false
     static tagName: string = 'baat-lib-selection'
     private loadedContainerRef = createRef<HTMLDivElement>()
-    private unloadedContainerRef = createRef<HTMLDivElement>()
     private loadedTextRef = createRef<HTMLDivElement>()
+    private unloadedContainerRef = createRef<HTMLDivElement>()
+    private unloadedTextRef = createRef<HTMLDivElement>()
     private fileRef = createRef<HTMLInputElement>()
     private source: string = ''
 
@@ -82,11 +85,14 @@ export class LibSelection extends BaseHTMLElement<ILibSelectionAccessor> impleme
         this.shadowRoot?.appendChild(
             <div id='container'>
                 <div id='unloadedContainer' ref={this.unloadedContainerRef}>
+                    <p id='unloadedText' ref={this.unloadedTextRef}>
+                        Axe-core is not loaded. This might be due to security headers (CSP) of the current page. Please select an axe-core file from local disk.<br/>It can be downloaded from <a href="https://tools.caat.report/axe.min.js">https://tools.caat.report/axe.min.js</a>
+                    </p>
                     <input type='file' accept='.js, text/javascript' id='fileInput' onChange={handleFileChange} ref={this.fileRef}/>
                     <button type='button' id='fileButton' onClick={() => this.fileRef.value.click()}>Select File</button>
                 </div>
                 <div id='loadedContainer' ref={this.loadedContainerRef}>
-                    <div id='loadedText' ref={this.loadedTextRef}></div>
+                    <p id='loadedText' ref={this.loadedTextRef}></p>
                     <button type='button' id='reloadButton' onClick={() => window[baatSymbol].unloadAxe()}>Change</button>
                 </div>
             </div>

src/elements/LibSelection/LibSelection.tsx

@@ -322,7 +322,7 @@ export class Window extends BaseHTMLElement<IRunnerWindowAccessor> implements IR
                     <slot name={windowSlots.heading}></slot>
                     <div id='info' ref={this.infoRef}><slot name={windowSlots.info}></slot></div>
                     <slot name={windowSlots.actions}></slot>
-                    <button id='foldButton' aria-label='hide window' aria-controls='fold' aria-expanded='true' onClick={handleClick} ref={this.buttonRef}>
+                    <button id='foldButton' aria-label='hide window' aria-controls='content' aria-expanded='true' onClick={handleClick} ref={this.buttonRef}>
                         <Icon width="24" height="24"><path d="m5 24h40"/></Icon>
                     </button>
                 </div>