fix: visually hide NavToggle icon text; fix for visual regression after merging down #1227

sghoweri · sghoweri · commit 3a2ad9f12d83 · 2020-06-28T13:18:56.000-04:00
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
@@ -36,7 +36,7 @@ export const NavList = props => {
                 aria-controls={category}
                 onClick={elem.toggleSpecialNavPanel}
               >
-                {category}
+                Expand / Collapse {category} Panel
               </NavToggle>
             )}
           </div>
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js
@@ -7,7 +7,7 @@ export const NavToggle = props => {
       role="tab"
       {...props}
     >
-      {props.children}
+      <span class="is-vishidden">{props.children}</span>
       <span
         class="pl-c-nav__link-icon"
         dangerouslySetInnerHTML={{

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export const NavList = props => {`
`36`	`36`	`aria-controls={category}`
`37`	`37`	`onClick={elem.toggleSpecialNavPanel}`
`38`	`38`	`>`
`39`		`- {category}`
	`39`	`+ Expand / Collapse {category} Panel`
`40`	`40`	`</NavToggle>`
`41`	`41`	`)}`
`42`	`42`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ export const NavToggle = props => {`
`7`	`7`	`role="tab"`
`8`	`8`	`{...props}`
`9`	`9`	`>`
`10`		`- {props.children}`
	`10`	`+ <span class="is-vishidden">{props.children}</span>`
`11`	`11`	`<span`
`12`	`12`	`class="pl-c-nav__link-icon"`
`13`	`13`	`dangerouslySetInnerHTML={{`