Merge pull request #1113 from mfranzke/fix/a11y-issues-on-overview-pages

Fix: a11y issues on overview pages

Author: bmuenzenmeyer

packages/uikit-workshop/src/sass/scss/01-abstracts/_variables.scss

@@ -14,6 +14,7 @@ $pl-color-gray-07: #eee;
 $pl-color-gray-13: #ddd;
 $pl-color-gray-20: #ccc;
 $pl-color-gray-50: #808080;
+$pl-color-gray-55: #737373;
 $pl-color-gray-70: #4d4c4c;
 $pl-color-gray-87: #222;
 $pl-color-black: #000;

packages/uikit-workshop/src/sass/scss/04-components/_pattern.scss

@@ -24,7 +24,7 @@
   padding: 0.5rem 0 0;
   line-height: 1.3;
   font-size: 90%;
-  color: $pl-color-gray-50;
+  color: $pl-color-gray-55;
 
   &:empty {
     padding: 0;
@@ -52,7 +52,7 @@
   display: inline-flex; /* 1 */
   align-items: center; /* 1 */
   padding: $pl-pad 0 0.3rem;
-  color: $pl-color-gray-50 !important;
+  color: $pl-color-gray-55 !important;
   text-decoration: none;
   cursor: pointer;
 
@@ -73,7 +73,7 @@
   right: 0;
   z-index: 1;
   padding: 0.4rem 0.5rem;
-  color: $pl-color-gray-50;
+  color: $pl-color-gray-55;
   background-color: transparent;
   cursor: pointer;
   font-weight: normal;

packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss

@@ -42,7 +42,7 @@
   padding: 0.2rem 0.4rem;
   border: 1px solid transparent;
   border-radius: $pl-border-radius-med;
-  color: $pl-color-gray-50;
+  color: $pl-color-gray-55;
   background-color: $pl-color-white;
   cursor: pointer;
   text-decoration: none;

packages/uikit-workshop/src/sass/scss/04-components/_text-passage.scss

@@ -23,7 +23,7 @@
 	 * Link within the text passage
 	 */
   a {
-    color: $pl-color-gray-50;
+    color: $pl-color-gray-55;
     text-decoration: underline;
     transition: opacity $pl-animate-quick ease;
 

packages/uikit-workshop/views-twig/partials/patternSection.twig

@@ -19,7 +19,7 @@
     <button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{partial.patternPartial}}" data-patternpartial="{{ partial.patternPartial }}" title="View Pattern Info">
         <span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
         <span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
-        <div class="pl-c-pattern__toggle-icon-wrapper">
+        <div class="pl-c-pattern__toggle-icon-wrapper" aria-hidden="true">
           <svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">
             <path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
             <path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>

packages/uikit-workshop/views/partials/patternSection.mustache

@@ -18,7 +18,7 @@
 		<button class="pl-c-pattern__extra-toggle pl-js-pattern-extra-toggle" id="pl-pattern-extra-toggle-{{ patternPartial }}" data-patternpartial="{{ patternPartial }}" title="View Pattern Info">
 			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--expand">Expand</span>
 			<span class="pl-c-pattern__extra-toggle-text pl-c-pattern__extra-toggle-text--collapse">Collapse</span>
-			<div class="pl-c-pattern__toggle-icon-wrapper">
+			<div class="pl-c-pattern__toggle-icon-wrapper" aria-hidden="true">
 				<svg viewBox="0 0 16 16" width="20" height="20" class="pl-c-pattern__toggle-icon pl-c-pattern__toggle-icon--expand">
 					<path fill="currentColor" d="M9 11.5l1.5 1.5 5-5-5-5-1.5 1.5 3.5 3.5z"></path>
 					<path fill="currentColor" d="M7 4.5l-1.5-1.5-5 5 5 5 1.5-1.5-3.5-3.5z"></path>