pattern-lab · JosefBredereck · May 17, 2021 · Apr 26, 2021 · Apr 26, 2021 · Apr 27, 2021
@@ -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" />
@@ -39,13 +39,13 @@
     ></script>
     <script>
       // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
-      (function() {
+      (function () {
         var check = document.createElement('script');
         if (!('noModule' in check) && 'onbeforeload' in check) {
           var support = false;
           document.addEventListener(
             'beforeload',
-            function(e) {
+            function (e) {
               if (e.target === check) {
                 support = true;
               } else if (!e.target.hasAttribute('nomodule') || !support) {

@@ -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) => {

@@ -4,25 +4,27 @@ import { NavLink } from './NavLink';
 import { NavItem } from './NavItem';
 import { NavButton } from './NavButton';
 
-export const NavList = props => {
+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((item) => !item.isDocPattern)
     : children.filter(
-        item => !item.isDocPattern && !item.patternName.includes(' Docs')
+        (item) => !item.isDocPattern && !item.patternName.includes(' Docs')
       );
   const viewAllItems = elem.noViewAll
     ? []
-    : children.filter(item => item.isDocPattern);
+    : children.filter((item) => item.isDocPattern);
 
   reorderedChildren.push(...viewAllItems, ...nonViewAllItems);
 
   return (
     <NavItem className={`pl-c-nav__item--${category.toLowerCase()}`}>
       {viewAllItems.length > 0 ? (
-        viewAllItems.map(patternSubgroupItem => (
+        viewAllItems.map((patternSubgroupItem) => (
           <div class="pl-c-nav__link--overview-wrapper">
             <NavLink
               category={category}
@@ -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,18 +44,21 @@ 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 => (
+          {nonViewAllItems.map((patternSubgroupItem) => (
             <NavItem>
               <NavLink
                 category={category}

@@ -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>

@@ -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>

@@ -222,7 +222,7 @@ class IFrame extends BaseLitComponent {
       // this.iframe.style.width = theSize + 'px'; // resize viewport to desired size
 
       // auto-remove transition classes if not the animate param isn't set to true
-      setTimeout(function() {
+      setTimeout(function () {
         if (animate === true) {
           self.iframeContainer.classList.remove('is-animating');
           self.iframe.classList.remove('is-animating');
@@ -255,7 +255,7 @@ class IFrame extends BaseLitComponent {
       this.origOrientation = window.orientation;
       window.addEventListener(
         'orientationchange',
-        function() {
+        function () {
           if (window.orientation !== this.origOrientation) {
             const newWidth = window.innerWidth;
             self.iframeContainer.style.width = newWidth;
@@ -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">
@@ -468,7 +469,7 @@ class IFrame extends BaseLitComponent {
 
     document.body.addEventListener(
       'mouseup',
-      function() {
+      function () {
         self.iframeCover.removeEventListener(
           'mousemove',
           handleIframeCoverResize