Styling additions (#46)

* cleanup
* remove visuallyhidden list transformation
* fix baact adding undefined values to elements
* implement new design
* fix Capitalization

---------

Co-authored-by: Sven Kummetz <[email protected]>

Author: mtelgkamp

baact/baact.ts

@@ -48,6 +48,9 @@ function DOMparseNode<P>(element: string, properties: Partial<P>, children: Baac
             }
             return
         }
+        if (typeof value === 'undefined') {
+            return
+        }
 
         value = isHTML ? String(value) : value
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "baat",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Bookmarklet for running axe-core tests directly in the Browser",
   "main": "index.js",
   "scripts": {

package.json

@@ -8,7 +8,6 @@ export const config = {
         differenceMode: false,
         developer: false,
         reporter: 'v2',
-        showAdditionalInformation: false,
         impactMapping: {}
     },
     size: {
@@ -24,7 +23,6 @@ export const settingNames = {
     autorun: 'autorun',
     differenceMode: 'differenceMode',
     developer: 'developer',
-    showAdditionalInformation: 'showAdditionalInformation',
     impactMapping: 'impactMapping',
 }
 

src/config.ts

@@ -5,6 +5,7 @@ import { baact, createRef } from '../../../baact/baact'
 import { css } from '../../util/taggedString'
 
 const border = `${theme.sizing.absolute.tiny} solid ${theme.palette.gray}`
+const padding = `${theme.sizing.relative.smaller} ${theme.sizing.relative.small}`
 
 const styles = css`
     #container {
@@ -13,27 +14,32 @@ const styles = css`
     #handle {
         position: relative;
         display: flex;
-        align-items: baseline;
+        align-items: center;
         box-sizing: border-box;
-        padding: ${theme.sizing.relative.tiny};
-        border: 2px solid transparent;
+        padding: ${theme.sizing.relative.smaller};
+        border: none;
         text-align: left;
         border-bottom: ${border};
         background-color: ${theme.palette.white};
         width: 100%;
         cursor: pointer;
-        color: #333;
-        font-size: ${theme.sizing.relative.normal};
+        color: var(--text-color);
+        background-color: var(--color, ${theme.palette.white});
+    }
+    ::slotted([slot='heading']) {
+        margin: 0;
+        font-size: ${theme.sizing.relative.large};
     }
     #handle baat-icon {
+        align-self: baseline;
         color: var(--text-color);
     }
     #handle:focus {
         border-left-color: ${theme.palette.primaryDark};
         outline: none;
     }
     .open #handle {
-        border-bottom: ${border};
+        border-bottom: none;
     }
     .open #caret {
         transform: rotate(90deg);
@@ -48,17 +54,14 @@ const styles = css`
         border-bottom: none;
     }
     #caret {
-        margin: 0 ${theme.sizing.relative.tiny};
+        margin: ${theme.sizing.relative.tiny};
+        align-self: baseline;
         z-index: 1;
     }
-    .flex {
-        display: flex;
-    }
     #content {
         display: none;
-        padding: ${theme.sizing.relative.small};
-        padding-left:  ${theme.sizing.relative.larger};
-        border-left-color: var(--border-color, ${theme.palette.gray});
+        padding: ${padding};
+        border-left-color: var(--color, ${theme.palette.white});
         border-left-width: ${theme.sizing.absolute.normal};
         border-left-style: solid;
     }
@@ -73,7 +76,7 @@ interface IAccordionAccessor {
     folded: boolean
     fixed: boolean
     nestedRoot?: boolean
-    borderColor?: string
+    color?: string
     textColor?: string
     onChange?: (folded: boolean) => void
 }
@@ -84,7 +87,7 @@ export class Accordion extends BaseHTMLElement<IAccordionAccessor> implements IA
     folded: boolean = true
     fixed: boolean = false
     nestedRoot?: boolean = false
-    borderColor?: string
+    color?: string
     textColor?: string
     private containerRef = createRef<HTMLDivElement>()
     private contentRef = createRef<HTMLDivElement>()
@@ -102,8 +105,8 @@ export class Accordion extends BaseHTMLElement<IAccordionAccessor> implements IA
             case 'nestedRoot':
                 this.updateNestedRoot()
                 break
-            case 'borderColor':
-                this.updateBorderColor()
+            case 'color':
+                this.updateColor()
                 break
             case 'textColor':
                 this.updateTextColor()
@@ -137,10 +140,10 @@ export class Accordion extends BaseHTMLElement<IAccordionAccessor> implements IA
         this.containerRef.value?.classList.toggle('nestedRoot', !!this.nestedRoot)
     }
 
-    updateBorderColor() {
+    updateColor() {
         if (!this.shadowRoot) return;
 
-        this.containerRef.value?.style.setProperty('--border-color', this.borderColor ?? theme.palette.gray)
+        this.containerRef.value?.style.setProperty('--color', this.color ?? theme.palette.white)
     }
 
     updateTextColor() {
@@ -161,7 +164,7 @@ export class Accordion extends BaseHTMLElement<IAccordionAccessor> implements IA
         this.shadowRoot?.appendChild(
             <div id='container' ref={this.containerRef}>
                 <button id='handle' onClick={handleMouseUp}>
-                    <div id='caret'><Icon width="16" height="16"><path stroke-width="5" stroke="currentColor" d="M 11,43 37,24 11,5"/></Icon></div>
+                    <div id='caret'><Icon width="16" height="16"><path stroke-width="5" stroke="currentColor" d="M12.213 45.213L33.426 24L12.213 2.787"/></Icon></div>
                     <slot name='heading'></slot>
                 </button>
                 <div id='content' ref={this.contentRef}>
@@ -173,7 +176,7 @@ export class Accordion extends BaseHTMLElement<IAccordionAccessor> implements IA
         this.updateFixed()
         this.updateFolded()
         this.updateNestedRoot()
-        this.updateBorderColor()
+        this.updateColor()
         this.updateTextColor()
 
         this.initialized = true

src/elements/Accordion/Accordion.tsx

@@ -35,8 +35,8 @@ const styles = css`
 
     .container {
         position: relative;
-        padding-top:.5rem;
-        padding-left: 2rem;
+        padding-top:.25rem;
+        padding-left: 1.75rem;
         cursor: pointer;
         margin-bottom: ${theme.sizing.relative.tiny};
     }
@@ -46,15 +46,14 @@ const styles = css`
         left: 0;
         width: 1.25rem;
         height: 1.25rem;
-        margin: .25rem;
         border: 1px solid #333;
+        border-radius: 2px;
         color: transparent;
     }
     .container input[type="checkbox"] ~ .checkbox > i > svg {
         margin: .25rem;
         width: .75rem;
         height: .75rem;
-        
     }
     .container input[type="checkbox"]:checked ~ .checkbox {
         color: #fff;

src/elements/Checkbox/Checkbox.tsx

@@ -4,11 +4,12 @@ import { css } from '../../util/taggedString'
 import { theme } from '../../theme'
 import { baact, createRef } from '../../../baact/baact'
 import { NodeResult, Result } from '../../types'
-import { Icon } from '..'
-import {baatSymbol} from "../../core/BAAT";
-import {settingNames} from "../../config";
+import { Icon } from '../Icon/Icon'
+import { baatSymbol } from "../../core/BAAT";
+import { settingNames } from "../../config";
 
 const borderBottom = `${theme.sizing.absolute.tiny} solid ${theme.palette.gray}`;
+const padding = `${theme.sizing.relative.tiny} ${theme.sizing.relative.smaller}`;
 
 const styles = css`
     .container {
@@ -34,7 +35,7 @@ const styles = css`
         gap: ${theme.sizing.relative.tiny};
         background-color: ${theme.palette.white};
         border: none;
-        padding: ${theme.sizing.relative.tiny} ${theme.sizing.relative.smaller};
+        padding: ${padding};
         cursor: pointer;
         font-size: 1rem;
         margin: -${theme.sizing.relative.tiny};
@@ -49,12 +50,6 @@ interface IHiddenViolationAccessor {
     result?: Result
 }
 
-function createNodeLink(index: number, result: NodeResult, alternativeText?: string): HTMLLIElement {
-    return <li>
-        <NodeResultLink number={index} result={result} alternativeText={alternativeText}/>
-    </li> as unknown as HTMLLIElement;
-}
-
 export class HiddenViolation extends BaseHTMLElement<IHiddenViolationAccessor> implements IHiddenViolationAccessor {
     public static tagName: string = 'baat-hidden-violation'
     result?: Result

src/elements/HiddenViolation/HiddenViolation.tsx

@@ -3,11 +3,14 @@ import { css } from '../../util/taggedString'
 import { baact, createRef } from '../../../baact/baact'
 import { theme } from '../../theme'
 import { NodeResult } from 'axe-core'
-import { isHidden, ownText, removeAllChildren } from '../../util/dom'
+import { removeAllChildren } from '../../util/dom'
 import { baatSymbol } from '../../core/BAAT'
 import { BAATEvent, HighlightElement, SettingsChanged } from '../../types'
-import { Icon } from '..'
-import {settingNames} from "../../config";
+import { Icon } from '../Icon/Icon'
+import { settingNames } from "../../config";
+import { getElementFromNodeResult, getNameFromNodeResult } from '../../util/axe';
+
+const padding = `${theme.sizing.relative.tiny} ${theme.sizing.relative.smaller}`;
 
 const styles = css`
     :host {
@@ -20,9 +23,10 @@ const styles = css`
         font-family: sans-serif;
         gap: ${theme.sizing.relative.tiny};
         background-color: ${theme.palette.white};
+        color: ${theme.palette.black};
         border: 1px solid;
         border-radius: 2px;
-        padding: ${theme.sizing.relative.tiny} ${theme.sizing.relative.smaller};
+        padding: ${padding};
         cursor: pointer;
         max-width: 100%;
         overflow: hidden;
@@ -35,22 +39,6 @@ const styles = css`
     button:hover {
         background-color: ${theme.palette.grayLight};
     }
-
-    button:disabled {
-        cursor: default;
-        color: #333;
-        border: none;
-        padding-left: calc(6px + 12px + ${theme.sizing.relative.smaller});
-    }
-
-    button:disabled:hover {
-        background-color: #fff;
-    }
-
-    #info {
-        padding-left: ${theme.sizing.relative.huge};
-        font-size: ${theme.semanticSizing.font.small};
-    }
 `
 
 interface INodeLinkAccessor {
@@ -64,7 +52,6 @@ export class NodeResultLink extends BaseHTMLElement<INodeLinkAccessor> implement
     styles = styles
     static tagName: string = 'baat-node-link'
     private buttonRef = createRef<HTMLButtonElement>()
-    private infoRef = createRef<HTMLDivElement>()
     private element: HTMLElement | null = null;
 
     attributeChangedCallback<T extends keyof INodeLinkAccessor>(name: T, oldValue: INodeLinkAccessor[T], newValue: INodeLinkAccessor[T]) {
@@ -80,33 +67,14 @@ export class NodeResultLink extends BaseHTMLElement<INodeLinkAccessor> implement
 
     update() {
         if (!this.shadowRoot || !this.isConnected) return
-        let name = ""
-        this.element = this.result?.element ?? document.querySelector(this?.result?.target?.join(', ') ?? '') as HTMLElement | null
-        let hasLink = this.element && !isHidden(this.element)
-        const devMode = window[baatSymbol].getSetting(settingNames.developer)
+        let name = getNameFromNodeResult(this.result, window[baatSymbol].getSetting(settingNames.developer));
+        this.element = getElementFromNodeResult(this.result);
 
         removeAllChildren(this.buttonRef.value)
 
-        if (devMode) {
-            name = this.result?.target.join(', ') ?? this.element?.tagName.toLowerCase() ?? ''
-        } else {
-            name = this.element ? ownText(this.element).trim() : ""
-
-            if (name === "") name = this.element?.tagName.toLowerCase() ?? this.result?.target.join(', ') ?? ""
-        }
+        this.buttonRef.value.appendChild(<Icon width="16" height="16"><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="4.65"><circle cx="24" cy="24" r="16.3"/><path d="m24 2.5v11"/><path d="m24 35v10.5"/><path d="m45.5 24h-10.5"/><path d="m13.5 24h-11"/></g></Icon>)
 
-        if (hasLink || devMode) {
-            this.buttonRef.value.appendChild(<Icon width="16" height="16"><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="4.65"><circle cx="24" cy="24" r="16.3"/><path d="m24 2.5v11"/><path d="m24 35v10.5"/><path d="m45.5 24h-10.5"/><path d="m13.5 24h-11"/></g></Icon>)
-            this.buttonRef.value.removeAttribute('disabled')
-        } else {
-            this.buttonRef.value.setAttribute('disabled', 'true')
-            console.log(this.buttonRef);
-        }
         this.buttonRef.value.appendChild(document.createTextNode(name))
-
-        this.infoRef.value.innerText = window[baatSymbol].getSetting<boolean>(settingNames.showAdditionalInformation)
-            ? this.result?.failureSummary ?? ''
-            : ''
     }
 
     initialize() {
@@ -123,12 +91,11 @@ export class NodeResultLink extends BaseHTMLElement<INodeLinkAccessor> implement
         }
 
         window[baatSymbol].addEventListener(BAATEvent.ChangeSettings, ((event: CustomEvent<SettingsChanged>) => {
-            if (event.detail.name === settingNames.developer || event.detail.name === settingNames.showAdditionalInformation) this.update()
+            if (event.detail.name === settingNames.developer) this.update()
         }) as EventListener)
 
         this.shadowRoot?.appendChild(<div>
             <button id='nodeLink' type='button' onClick={handleClick} ref={this.buttonRef}></button>
-            <div id='info' ref={this.infoRef}></div>
         </div>)
 
         this.update()