Integration with focus-lock solution #162
Comments
|
Hey! Unfortunately Im out for the next week on vacation. Maybe @alice can
take a look if she is free this week. Otherwise I can look into it when I
get back.
Thanks for opening the issue!
…On Wed, Jul 18, 2018, 3:06 AM Thibaut ***@***.***> wrote:
Hello,
First of all, great work on the polyfill!
I encountered an inconsistency when using a focus locking
<https://github.com/theKashey/react-focus-lock> solution. (If you're not
familiar with it, it's a helper that contains the focus in one div, useful
for modals or focused tasks).
The issue I have is that the class .focus-visible is not put to the
element when the focus-lock loops the focus back to the first element (or
last in case of reverse-tabbing).
[image: focus-visible-issue]
<https://user-images.githubusercontent.com/1416801/42874891-8d333716-8a82-11e8-9c22-edbfca6cb1ac.gif>
You can see that when the focus loops around, the :-moz-focusring pseudo
class is applied (text is red) but the class .focus-visible is not
applied (the button is not yellow).
Codesandbox demo <https://codesandbox.io/s/30mopyk7wm>
Any idea on how to fix that?
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#162>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABBFDbJuoFj1Ei_a88J__DvAONL_KrPEks5uHwidgaJpZM4VUUBX>
.
|
|
Looks like this is related to programmatic focus - cf #88 (comment) This is why we originally had the "keyboard throttle" in the implementation - perhaps it's time to reintroduce that. |
|
I think this should be fixed on master. In the current version, we always leave keyboard mode 'on' unless you take an action with a mouse. So if focus was proceeded by a keypress, it should still be in keyboard mode and should still apply Let me see if I can cut a release today. I was updating a vulnerable npm package anyway so may as well :) |
|
I tested your sandbox demo using the latest release (4.1.5) and it seems to work. I double checked that it did not work in 4.1.4 so I think this change in the latest release is the source of the fix. Closing as fixed but please comment if it still seems busted and we can investigate! |
|
Great, it seems to work fine. Thanks! |
robdodson
pushed a commit
that referenced
this issue
Aug 28, 2018
## 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="https://github.com/kimmobrunfeldt/concurrently/issues/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="https://github.com/kimmobrunfeldt/concurrently/issues/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="https://github.com/kimmobrunfeldt/concurrently/issues/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="https://github.com/kimmobrunfeldt/concurrently/issues/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="https://github.com/kimmobrunfeldt/concurrently/issues/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="https://github.com/kimmobrunfeldt/concurrently/issues/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 🌴
![https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png">✨</g-emoji](https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png">✨</g-emoji){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello,
First of all, great work on the polyfill!
I encountered an inconsistency when using a focus locking solution. (If you're not familiar with it, it's a helper that contains the focus in one div, useful for modals or focused tasks).
The issue I have is that the class
.focus-visibleis not put to the element when the focus-lock loops the focus back to the first element (or last in case of reverse-tabbing).You can see that when the focus loops around, the
:-moz-focusringpseudo class is applied (text is red) but the class.focus-visibleis not applied (the button is not yellow).Codesandbox demo
Any idea on how to fix that?
The text was updated successfully, but these errors were encountered: