uikit bugs

[kryp71c]

I am using Pattern Lab Node v3.0.3 on Mac, with Node v10.15.0, using a Vanilla | Custom Edition and uikit-workshop version 1.0.3

@sghoweri nice job creating the new look for the uikit. 👍
This is copied over from gitter.

I wanted to share some issues I noticed (issues on Mac using Chrome unless otherwise noted):

1. Menu tree initially closed when submenu pattern is displayed
   
   To test open menu navigate to pattern with subpatterns, select sub pattern, wait for page to load and open the menu again. The arrow indicating the drawer state will point down, but the drawer is closed.
   e.g. Organisms > Global ... reveals two sub-patterns: Header and Footer ... Organisms > Global > Header ... opens the header pattern ... clicking on Organisms again after the page has loaded reveals the menu with the global section closed but the arrow indicator pointing down.
   State not hoisted/persistent?

2. Internet Explorer 10 gets a blank page
   This issue existed before the recent uikit updates.
   Due to javascript that is not supprted by older browsers (e.g. ie10 doesn't support mutation observer which is used in the uikit).
   Not sure which browsers patternlab is meant to support. However, some of us, unfortunately, need to support legacy browsers due to institutional requirements.

3. Logo proportions are distorted in IE11
   
   From past experience, removing the width and height attributes from the svg, ensuring there is a viewbox attribute, and adding preserveAspectRatio="xMinYMax meet" to the svg; then setting width height attributes on the img tag and controlling scaling with css seems to work accross browsers if the svg needs to be responsive.

4. Fractional widths in the screen width form are cropped.
   
   Perhaps these need to be rounded, or the form width increased?

5. a11y
   
   

• The Search form "Find A Pattern" placeholder has insufficient contrast with the new colors (in both the dark and light theme).
• The Search form input needs a label (placeholders are not label replacements)
• The screen size form needs descriptive text. Maybe a visually hidden fieldset legend?
• The tools tooggle button (gear) needs visually hidden descriptive text (title attribute is not sufficient for a11y)
• missing focus outlines or equivalent on menu drawer toggle buttons (arrows)
• missing focus outlines on resize viewport buttons (they do have hover backgrounds on the light theme)
• missing focus outlines tools toggle button (it does have a hover background in the light theme)
• missing focus outlines on tools menu items (in dark theme)

[kryp71c]

The pattern states seem a little misaligned (mac/Chrome):

[sghoweri]

I might end up breaking these out into a couple separate buckets so we can chip away at these:

• IE 10 support / addressing and clarifying cross browser support (and different options)
• Nav UI bug (probably relating to the vertical vs horizontal layout behavior)
• PL logo SVG getting stretched (strangely I don’t think we have this issue on https://boltdesignsystem.com/pattern-lab/?p=components-overview 🤔)
• Displaying the viewport size vs space available
• Addressing accessibility issues flagged

[dcmouyard]

The pattern states seem a little misaligned (mac/Chrome):

I created an issue and PR to fix this: #1060

[stale]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[sghoweri]

Bump! I need to rereview each of the items flagged here but for what it’s worth, I know a number of these have been addressed as of the latest batch of UIKit updates released.

[stale]

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

[stale]

Issue closed after going stale. It can be re-opened if still relevant.