refactor: accessibility (#1321)

mfranzke · web-flow · commit 4982187910d9 · 2021-05-17T18:46:52.000+02:00
* refactor(accessibility): axe/text-alternatives - Frames must have title attribute more information: https://dequeuniversity.com/rules/axe/4.1/frame-title * refactor(accessibility): axe/parsing - IDs used in ARIA and labels must be unique IDs used in ARIA and labels must be unique: Document has multiple elements referenced with ARIA with the same id attribute, e.g. "global" more information: https://dequeuniversity.com/rules/axe/4.1/duplicate-id-aria * refactor(accessibility): axe/name-role-value - Buttons must have discernible text: Element has no title attribute more information: https://dequeuniversity.com/rules/axe/4.1/button-name?application=axeAPI * refactor(accessibility): axe/language - added lang attribute <html> element must have a lang attribute: The <html> element does not have a lang attribute more information: https://dequeuniversity.com/rules/axe/4.2/html-has-lang * refactor(accessibility): axe/aria - ARIA attributes must conform to valid values Invalid ARIA attribute value: e.g. aria-controls="atoms" The IDs were currently missing on the related ol elements - their value (and that for variable) needs to be equal to the aria-controls-attribute on the related NavTitle tag more information: https://dequeuniversity.com/rules/axe/4.2/aria-valid-attr-value * refactor(accessibility): axe/name-role-value - Buttons must have discern… …ible text: Element has no title attribute The title-attribute needs to get transferred to the actual button itself, as this is the focusable element that even also gets recognized that read out loud by the screenreader. more information: https://dequeuniversity.com/rules/axe/4.1/button-name?application=axeAPI
diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="pl-c-html">
+<html class="pl-c-html" lang="en">
   <head>
     <title id="title">Pattern Lab</title>
     <meta charset="UTF-8" />
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
@@ -261,7 +261,7 @@ class Nav extends BaseComponent {
                 {item.patternGroupUC}
               </NavTitle>
               <ol
-                id={item.patternSubgroupUC}
+                id={item.patternGroupLC}
                 className={`pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel`}
               >
                 {item.patternGroupItems.map((patternSubgroup, i) => {
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js
@@ -8,6 +8,8 @@ export const NavList = (props) => {
   const { children, category, categoryName, elem } = props;
   const reorderedChildren = [];
 
+  const random = Math.random().toString().substr(2);
+
   const nonViewAllItems = elem.noViewAll
     ? children.filter((item) => !item.isDocPattern)
     : children.filter(
@@ -33,7 +35,7 @@ export const NavList = (props) => {
 
             {nonViewAllItems.length >= 1 && (
               <NavToggle
-                aria-controls={category}
+                aria-controls={`${category}-${random}`}
                 onClick={elem.toggleSpecialNavPanel}
               >
                 Expand / Collapse {category} Panel
@@ -42,15 +44,18 @@ export const NavList = (props) => {
           </div>
         ))
       ) : (
-        <NavButton aria-controls={category} onClick={elem.toggleNavPanel}>
+        <NavButton
+          aria-controls={`${category}-${random}`}
+          onClick={elem.toggleNavPanel}
+        >
           {categoryName}
         </NavButton>
       )}
 
       {((viewAllItems.length && nonViewAllItems.length) ||
         viewAllItems.length === 0) && (
         <ol
-          id={category}
+          id={`${category}-${random}`}
           className={`pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel`}
         >
           {nonViewAllItems.map((patternSubgroupItem) => (
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.js b/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.js
@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit-element';
 import { Slotify } from '../slotify';
 import styles from './pl-button.scss?external';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 // This decorator defines the element.
 class Button extends Slotify(LitElement) {
@@ -23,6 +24,10 @@ class Button extends Slotify(LitElement) {
         type: Boolean,
         reflect: true,
       },
+      title: {
+        attribute: true,
+        type: String,
+      },
     };
   }
 
@@ -77,6 +82,7 @@ class Button extends Slotify(LitElement) {
                 : ''}"
               href="${this.href}"
               target="${this.target ? this.target : 'self'}"
+              title=${ifDefined(this.title === '' ? undefined : this.title)}
             >
               ${this.innerTemplate()}
             </a>
@@ -86,6 +92,7 @@ class Button extends Slotify(LitElement) {
               class="pl-c-button pl-c-button--${size} ${this.iconOnly
                 ? 'pl-c-button--icon-only'
                 : ''}"
+              title=${ifDefined(this.title === '' ? undefined : this.title)}
             >
               ${this.innerTemplate()}
             </button>
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js
@@ -128,6 +128,7 @@ class ToolsMenu extends BaseLitComponent {
           icon-only
           @click="${this.handleClick}"
           class="pl-c-tools__toggle"
+          title="Settings"
         >
           <pl-icon name="settings" slot="after"></pl-icon>
         </pl-button>
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.js b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.js
@@ -414,6 +414,7 @@ class IFrame extends BaseLitComponent {
             sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"
             src=${ifDefined(url === '' ? undefined : url)}
             srcdoc=${ifDefined(url === '' ? this.iframe404Fallback : undefined)}
+            title="Pattern details"
           ></iframe>
 
           <div class="pl-c-viewport__resizer pl-js-resize-container">

Original file line number	Diff line number	Diff line change
`@@ -261,7 +261,7 @@ class Nav extends BaseComponent {`
`261`	`261`	`{item.patternGroupUC}`
`262`	`262`	`</NavTitle>`
`263`	`263`	`<ol`
`264`		`- id={item.patternSubgroupUC}`
	`264`	`+ id={item.patternGroupLC}`
`265`	`265`	className={`pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel`}
`266`	`266`	`>`
`267`	`267`	`{item.patternGroupItems.map((patternSubgroup, i) => {`
Original file line number	Diff line number	Diff line change
`@@ -128,6 +128,7 @@ class ToolsMenu extends BaseLitComponent {`
`128`	`128`	`icon-only`
`129`	`129`	`@click="${this.handleClick}"`
`130`	`130`	`class="pl-c-tools__toggle"`
	`131`	`+ title="Settings"`
`131`	`132`	`>`
`132`	`133`	`<pl-icon name="settings" slot="after"></pl-icon>`
`133`	`134`	`</pl-button>`