Polyfill for `:focus-visible`
greenkeeper[bot] and robdodson Update concurrently to the latest version 🚀 (#176)

## Version **4.0.0** of **concurrently** was just published.

<table>
  <tr>
    <th align=left>
      Dependency
    </th>
    <td>
      <a target=_blank href=https://github.com/kimmobrunfeldt/concurrently>concurrently</a>
    </td>
  </tr>
  <tr>
      <th align=left>
       Current Version
      </th>
      <td>
        3.6.1
      </td>
    </tr>
  <tr>
    <th align=left>
      Type
    </th>
    <td>
      devDependency
    </td>
  </tr>
</table>



The version **4.0.0** is **not covered** by your **current version range**.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of concurrently.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.


---


<details>
<summary>Release Notes</summary>
<strong>v4.0.0</strong>

<p>More than anything, v4 is just a big refactor to allow changes to be made faster and more reliably.<br>
It does feature some small breaking changes, and maybe even fixes some longstanding bugs.</p>
<h2>Breaking changes</h2>
<ul>
<li><strong>The CLI option <code>--allow-restarts</code> is no more.</strong><br>
Instead, just set <code>--restart-tries</code> to something greater than <code>0</code>.</li>
<li><strong>Input handling is now opt-in via <code>--handle-input</code> flag.</strong> (<a class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="334862875" data-permission-text="Issue title is private" data-url="kimmobrunfeldt/concurrently#147" href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/issues/147">#147</a>)<br>
It does come with some specific input parsing that would make it difficult for you to use it.</li>
<li><strong>Setting prefix to <code>none</code> will now actually not prefix commands' outputs.</strong><br>
Previously, it would prefix with <code>[]</code>.</li>
<li><strong><code>SIGINT</code>s/<kbd>Ctrl</kbd>+<kbd>C</kbd> will now be handled gracefully.</strong> (<a class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="341012242" data-permission-text="Issue title is private" data-url="kimmobrunfeldt/concurrently#150" href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/issues/150">#150</a>)<br>
No more exiting with code <code>1</code> or tweaking <code>--success</code> flag.</li>
</ul>
<h2>No more <code>null</code> exit codes (<a class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="298319293" data-permission-text="Issue title is private" data-url="kimmobrunfeldt/concurrently#133" href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/issues/133">#133</a>)</h2>
<p>That's a pretty bad bug that existed till now. You won't see a log like this anymore:</p>
<pre><code>[1] npm run lint-watch exited with code null
</code></pre>
<p>What you will see going forward is the <strong>actual exit signal</strong>:</p>
<pre><code>[1] npm run lint-watch exited with code SIGTERM
</code></pre>
<h2>concurrently finally gets a shiny <g-emoji class="g-emoji" alias="sparkles" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png"></g-emoji> programmatic API!</h2>
<p>Closes <a class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="218521066" data-permission-text="Issue title is private" data-url="kimmobrunfeldt/concurrently#101" href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/issues/101">#101</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="239304263" data-permission-text="Issue title is private" data-url="kimmobrunfeldt/concurrently#112" href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/pull/112">#112</a>. Maybe even <a class="issue-link js-issue-link" data-error-text="Failed to load issue title" data-id="222040304" data-permission-text="Issue title is private" data-url="kimmobrunfeldt/concurrently#103" href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/issues/103">#103</a>.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">const</span> <span class="pl-c1">concurrently</span> <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">'</span>concurrently<span class="pl-pds">'</span></span>);
<span class="pl-k">await</span> <span class="pl-en">concurrently</span>([
	<span class="pl-s"><span class="pl-pds">'</span>npm:watch-*<span class="pl-pds">'</span></span>,
	{ name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>server<span class="pl-pds">'</span></span>, command<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>nodemon<span class="pl-pds">'</span></span> }
], {
  prefix<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>name<span class="pl-pds">'</span></span>,
  killOthers<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>failure<span class="pl-pds">'</span></span>],
  restartTries<span class="pl-k">:</span> <span class="pl-c1">3</span>
});</pre></div>
<p>Check the docs <a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/blob/v4.0.0/README.md#programmatic-usage">here</a> for some info on how to use it.</p>
</details>

<details>
<summary>Commits</summary>
<p>The new version differs by 28 commits.</p>
<ul>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/3690676886510e37ede19d1ce1494f0064d898b1"><code>3690676</code></a> <code>4.0.0</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/b4e414caff5b55e55c47932d8b8b041b29fae99a"><code>b4e414c</code></a> <code>npm: update and remove some deps</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/4043fc2387893031a83c598a464114c8caa04849"><code>4043fc2</code></a> <code>Exit gracefully on SIGINT (#164)</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/b1daf8dd4670b1f64221dc2fe3feeb3bd904e7aa"><code>b1daf8d</code></a> <code>logger: show no prefix when the format is none</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/58d7d97b99deff73638ecc0959f74721877cd682"><code>58d7d97</code></a> <code>Take options such as prefixLength and outputStream</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/1d0598a3281cd34744187b6bbb5c724a30707f0b"><code>1d0598a</code></a> <code>docs: add programmatic API usage</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/571671bf11bf4baaabc101e3c4cfdc35f692c4d6"><code>571671b</code></a> <code>Add missing export of LogExit</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/7ac9b6eb6187d5ff45bcaaa79e4eacd6993777ad"><code>7ac9b6e</code></a> <code>Remove unused RxJS schedulers</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/caa23b32686636a13b4d55b1f6530dbc1876fd45"><code>caa23b3</code></a> <code>bin: change tested exit code to 1 on Windows (#163)</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/bfd7501032811247e2997898d5203bbb5dafa75b"><code>bfd7501</code></a> <code>ci: run AppVeyor on Node 10</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/adcc0b5494a404d83ca2a922e4dec09a9905a168"><code>adcc0b5</code></a> <code>Merge pull request #157 from kimmobrunfeldt/v4</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/0e60d2d6faa6eeb2cb5de07662244b3171b8b0fc"><code>0e60d2d</code></a> <code>docs: move the why section to the top</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/b1361832e8560756f9d273ba76c144801dc7a794"><code>b136183</code></a> <code>docs: update help section</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/c127d92a0e920769ab885acdbd774a0f47e146b7"><code>c127d92</code></a> <code>Add support for prefix length (#162)</code></li>
<li><a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/commit/daddad1ad329851443cbd812a890f9ce02bab8df"><code>daddad1</code></a> <code>bin: don't check order of lines emitted</code></li>
</ul>
<p>There are 28 commits in total.</p>
<p>See the <a href="https://urls.greenkeeper.io/kimmobrunfeldt/concurrently/compare/ba6f25a6c190b321de86e39c73b38d74ec403f01...3690676886510e37ede19d1ce1494f0064d898b1">full diff</a></p>
</details>

<details>
  <summary>FAQ and help</summary>

  There is a collection of [frequently asked questions](https://greenkeeper.io/faq.html). If those don’t help, you can always [ask the humans behind Greenkeeper](https://github.com/greenkeeperio/greenkeeper/issues/new).
</details>

---


Your [Greenkeeper](https://greenkeeper.io) bot 🌴
Latest commit 366db2b Aug 28, 2018

README.md

Build Status Greenkeeper badge

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Details

Polyfill

Installation

npm install --save focus-visible

We recommend only using versions of the polyfill that have been published to npm, rather than cloning the repo and using the source directly. This helps ensure the version you're using is stable and thoroughly tested.

If you do want to build from source, make sure you clone the latest tag!

Usage

1. Add the script to your page

    ...
    <script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
  </body>
</html>

2. Update your CSS

We suggest that users selectively disable the default focus style by selecting for the case when the polyfill is loaded and .focus-visible is not applied to the element:

/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

If there are elements which should always have a focus ring shown, authors may explicitly add the focus-visible class. If explicitly added, it will not be removed on blur.

How it works

The script uses two heuristics to determine whether the keyboard is being used:

  • a focus event immediately following a keydown event where the key pressed was either Tab, Shift + Tab, or an arrow key.
  • focus moves into an element which requires keyboard interaction, such as a text field
  • TODO: ideally, we also trigger keyboard modality following a keyboard event which activates an element or causes a mutation; this still needs to be implemented.

Dependencies

If you want to use :focus-visible with an older browser you'll need to include an additional polyfill for Element.prototype.classList.

In accordance with the W3C's new polyfill guidance, the :focus-visible polyfill does not bundle other polyfills.

You can use a service like Polyfill.io to download only the polyfills needed by the current browser. Just add the following line to the start of your page:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList"></script>

Backwards compatibility

Until all browsers ship :focus-visible developers will need to use it defensively to avoid accidentally removing focus styles in legacy browsers. This is easy to do with the polyfill.

/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  …
}

As explained by the Paciello Group, developers who don't use the polyfill can still defensively rely on :focus-visible using the following snippet:

/*
  Provide basic, default focus styles.
*/
button:focus {
  …
}

/*
  Remove default focus styles for mouse users ONLY if
  :focus-visible is supported on this platform.
*/
button:focus:not(:focus-visible) {
  …
}

/*
  Optionally: If :focus-visible is supported on this
  platform, provide enhanced focus styles for keyboard
  focus.
*/
button:focus-visible {
  …
}

In the future, when all browsers support :focus-visible, the snippets above will be unnecessary. But until that time it's important to be mindful when you use :focus-visible and to ensure you always have a fallback strategy.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs