Working with Mathias on this

• Fix order of CSS imported in from the rules we used from Bootstrap and the modern.ie header
• Improve CSS used by the header
• Remove reduced bootstrap.css from the repo
• Remove any declarations left over that are never used (always overridden or same as one that is inherited)
• Remove units from 0 lengths that still have them
• Remove any duplicate declarations
• Add any fallbacks or vendor prefixes that could be useful
• Refactor any declarations that we continuously set
• Look into CSS Lint and similar tools to see if we’re missing anything
• Look for any CSS rendering bottlenecks

I like the consistency with modern.IE's new header. But I think we should leave off "See IE Status" since it's self referential.

• status is not visible on mobile
• category text nor icon can be accessed
• filters are hidden
• menu is hidden

We should be able to copy the modern.ie menu for mobile. The rest may be more tricky.
perhaps we can show the feature headings on two lines to show the status/category?

I think in fixing some of the issues with the back history we've broken click-to-expand a feature. Now, when I click a feature, it expands and then a second later (presumably when the URL is updated) it causes scrollTo. This is jarring.

I think we should only do the scrollTo (a) during onload and (b) when clicking the back button.

As a related issue, when the scrollTo happens (whether from clicking a feature or by navigating to a routed url), I'm seeing the left color border disappearing:

The website in mobile renders pretty slow. ngRepeat takes time to insert the 140+ features in the DOM. We should insert them in batches so the UI thread has time to render them.

In skinnier viewports where the MS logo is hidden, the click area for the twitter anchor element is behind the beta banner. Makes it impossible to click.

Two solutions:

• Add pointer events to make the transparent area possible to click through (only works in IE11+ and other browsers)
• Increase padding/margin of the twitter logo for now until the beta banner is removed.

We have 35+ small images. We should be using a sprite to redunce the number of server calls.
We could use something like https://github.com/Ensighten/grunt-spritesmith and replace the images to css-backgrounds

The HTML was taken from Modern.ie, so that site has a copy paste error and needs updating too.

If I type something into the filter box I would like to be able to get back to the unfiltered view by clicking on the "home" link in the title bar rather than having to click into the edit box and delete the contents.

Looking at normalizeBrowserStatus, it looks like we don't have a mapping from behind a flag. We should at least map this to in development.

We use WAI-ARIA landmark roles and attributes in the index.html template but they’re missing in some of the others, such as features.html

Some of the existing ARIA can also be improved.

• The feature sections don’t include ARIA. Should use role="tab list" and associated attributes. [complete]
• The filter drop downs don’t include ARIA. Not sure if these should be button and listbox, or menubar or something else (investigating)
• Apparently the Live Region doesn’t work, and should only be on the feature count, not the entire feature area too. We should also add aria-atomic. [complete]
• We should add a skip link for keyboard users and screen readers. Only Jaws 15 supports native skip link functionality via main (which we don't use anyway as we only have 1 article.
• We can remove role="form" as it is duplicating well supported native semantics [complete]
• The tags added by the filter only have the term as their label. This doesn't indicate to a screen reader that clicking it will remove that term. We should update the label seen by SR (or ignore this if we remove the tags) [complete. via title attribute]
• The menubar doesn't work well with the keyboard and screen readers

Accessibility audit results:

• Collapse button in accordion doesn't have a label. Should be solved with the aria work.
• dropdown, dropdown-toggle, dropdown-menu and the checkboxes have onclick handlers but are not focusable. Likely why the keyboard navigation with Screen Readers doesn't work
• A bunch of elements don’t have strong enough contrast between foreground and background. We can’t fix this for the most part without changing the design. Elements are:
  • "Platform status" text
  • "beta" text (will go away with final)
  • "features found" and result count
  • The filter drop down labels
  • The item labels in the drop downs (these are "disabled" so I don't think we can solve these without making them look enabled)
• A number of elements are focusable but obscured:
  • the "platform status" element. This is an artefact of how the original modern.ie menu was built. Should go away with the new menu anyway
  • A few of the spec links and browser icon links. Probably related to how some of the items have odd overlapping text/links. This needs to be fixed for that anyway.

I’ll update this as we find more issues.

Steps:

Not sure of the exact steps right now, but if you disable some of the interop options then sort by status it gives a random order. Switching between other sorting options and back to "status" will give a different order.

The current deploy.cmd takes a few minutes to finish the deployment process. We can probably do better. One thing to keep in mind is this issue that might break the whole process:
gruntjs/grunt-contrib-imagemin#183

Some ideas:

• Check for bower and grunt before installing them
• Download the dependencies directly in DEPLOYMENT_TARGET so we don't have to remove and copy

Steps:

Keep pressing tab

Expected:

to focus only visible elements

Actual:

Focuses links in the feature drop downs, making them visible. Only the part with the links (spec links etc), not the whole section.

The accordions and drop downs (in the filters branch) can be accessed via the tab key, but there is no way to expand them (I suppose via the enter key?) This needs to be added.

Maybe something like https://github.com/prerender/prerender?

We don’t use 95% of bootstrap.css according to the Chrome audit tools. We can save around 1,200 rule sets and about 4k lines of CSS if we remove it. Should speed up parsing, page weight etc quite a bit.

Disadvantage would be less default styles for new content we add, but we don’t use many of the built in classes in the current code, and we have a bunch of overrides for the ones we do use.

Steps:

1. Click on filter field
2. type a term and press enter

Expected

In Chrome/Safari/Firefox/Presto-Opera the focus remains in the filter field so you can enter a new tag without clicking inside the field again

Actual:

In IE (tested IE11 so far) the filter field loses focus.

See the request from the working group and my response.

We have most of the things on the WG list of deliverables but there are a couple missing like proximity events.

Almost all the directives we are using have a templateUrl. We could add a new task to grunt that will inline those into the template property in the build task saving a few requests to the server.

We are not using any cache header at this moment. We should use it with the static content

Promises are one of those features that have received a lot of buzz, and are included in many JavaScript frameworks. It would be good to include on Status.

• Can I Use entry
• ES6 Spec

@dstorey has managed to reduce the size of the individual images and the sprite a lot. I've tried to use the option pngquant of grunt-contrib-imagemin and reduced the size of the sprite to about 10KB but sometimes the process fails.
The associated issue is gruntjs/grunt-contrib-imagemin#189

Right now we are minifying all the images. Maybe we can just reduce the sprite file? @dstorey, are we using any other images outside the sprite?

Work with Bryan on connection points between Modern.IE, status, IE MSDN Dev Center, Test Drive, Blog, etc.

The shapes page (http://status.modern.ie/shapes) links to the wrong bug for WebKit. The correct master bug: wkbug.com/98664

Steps:

Click add button

Expected:

Nothing

Actual:

A blank tag is added

The last item bumps into the footer in the dev branch with the new sticky footer. The margin is displayed in Chrome, Safari, but not IE, Firefox or Presto Opera

We set the filter field and button as inline-block. Inline blocks render the white space (well one character’s worth) between elements. In production we remove any whitespace in the HTML, so the space goes away.

Two Solutions:

• add margin (potentially different spacing in production and live)
• change to float, flexbox or other

Steps:

Select IE from browser drop down
Select prefixed from status

Expected:

Show features prefixed in IE

Actual:

0 results

Same for any other browser or any other status except all or shipped.

https://twitter.com/tomprogers/status/451911417646837761

When loading the page, the last status drop down wraps to a second line, before jumping back up to the correct location.

Not a big deal, but it is distracting and looks bad. It would be great if we can fix this.

Depending on the resolutions, the filters might be out of the blue area. This is happening at 750px with Chrome:

When the viewport is reduced the footer breaks onto a new line and pushes the black background up. Creates a strange white line, and not all text is visible. On the thinnest media query no text is visible.

The fixed height of the features when expanded doesn't account for features with more content (e.g. longer descriptions). Need to find a workaround for essentially CSS transitioning from 50px to "auto", which isn't supported by the standard today.

After merging in changes for #3 the paperclip icon (uses .standard in old version) is missing.

When adding a tag the filter area grows larger due to a 4px margin on the bottom of tags. The margin is needed to stop the second line of tags from butting against the first line.

We need to add a matching bottom margin to the filter input to stop this jump.

It would be nice to include some platform integration where it makes sense.

I’m mainly thinking of Live Tile support for Windows, preferably with a feed of the the latest features that are added of have their status change. If we do this we may as well add an RSS feed of the same data.

Before v1 release we should add a readme that explains the steps to set up the environment and run the code, etc.

There have been some complains about the back navigation not behaving as expected when browsing several features.
We should investigate this.

For some reason Safari makes the total features text drop down to a second line. All other browsers correctly float it to the right on the same line.

Adding display: inline-block; fixes the issue.

Investigating why we're showing our status value for Safari...

Currently if one wants to link to what features are in development they can't, as the deep linking only works for individual features.

You notice this a lot on twitter where people mention in development, but have to link just to the base URL.

We may want to be able to link to the other filters like browser, etc. too.

Express 4.0 is out, our code is really simple so migrating to the latest version shouldn't take too long and we will see some of the warnings when running the server disappear.

It would be better if we had some form of automated testing to reduce the risk of breaking things.

User feedback to address:

• Not clear that browser drop down means "features with shipped status in this browser"
• Multiple filters seems too heavy weight, one text filter is probably sufficient and saves UI space
• Use clearer terms (e.g. "Implementation Status" rather than just "Status")
• Can't filter on mobile

I will mock up some possible alternatives.

Maybe we should create a task in the build process that will check the validity of the links in our JSON data.
Pros:

• We are sure our links are working
  Cons:
• Validation can take a while to check all the links even if paralleled (maybe it could be a separate task that is not build?)

@jacobrossi, @dstorey thoughts?