Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Infrastructure: Update skipto.js to fix shortcut key bug for non-english keyboard layouts #2975

Merged
merged 5 commits into from
May 22, 2024

Conversation

jongund
Copy link
Contributor

@jongund jongund commented Mar 27, 2024

See issue in skipto.js repository:
[https://github.com/skipto-landmarks-headings/page-script-5/issues/11]

SkipTo Issue 13: Disable shortcuts when in a input or textarea


WAI Preview Link (Last built on Tue, 23 Apr 2024 18:47:22 GMT).

@jongund jongund requested a review from mcking65 March 27, 2024 19:40
@mcking65 mcking65 changed the title Updated skipto.js to fix shortcut key bug for non-english keyboard layouts Infrastructure: Update skipto.js to fix shortcut key bug for non-english keyboard layouts Apr 2, 2024
@jongund
Copy link
Contributor Author

jongund commented Apr 3, 2024

I have updated the pull request with SkipTo.js version 5.3.1 which disables the shortcut key when focus is on text input element.

For code changes see the handleDocumentKeydown event handler on lines 626-673:
https://github.com/skipto-landmarks-headings/page-script-5/blob/main/src/skiptoMenuButton.js

Test page:
https://skipto-landmarks-headings.github.io/page-script-5/test-input-controls.html

@jongund jongund requested a review from howard-e April 3, 2024 17:38
@jongund
Copy link
Contributor Author

jongund commented Apr 3, 2024

@howard-e
I have provided some information in the previous message for viewing and testing the code changes for disabling the shortcut when focus is on a text input element.

Copy link
Contributor

@howard-e howard-e left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jongund thanks for the continued improvements to the script, as well as the detailed information on what's changed and how to test! I was able to verify the discussed change works as expected across both Windows and MacOS for several browsers.

I've left non-blocking feedback inline and a question that could be discussed separately.

!event.metaKey;

if ((optionPressed && this.config.optionShortcut === event.key) ||
(altPressed && this.config.altShortcut === event.key) ||
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
(altPressed && this.config.altShortcut === event.key) ||
(altPressed && this.config.altShortcut === event.key) ||

Minor nit that may not matter if this was a stylistic choice coming from the formatter in the source repository.

@@ -9,6 +9,7 @@
* Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* CDN: https://skipto-landmarks-headings.github.io/page-script-5/dist/skipto.min.js
* Documenation: https://skipto-landmarks-headings.github.io/page-script-5
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Documenation: https://skipto-landmarks-headings.github.io/page-script-5
* Documentation: https://skipto-landmarks-headings.github.io/page-script-5

@@ -9,6 +9,7 @@
* Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* CDN: https://skipto-landmarks-headings.github.io/page-script-5/dist/skipto.min.js
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving to the minified version of this script in the future could be great to reduce load.

Although subsequent reviews for updates in this repository would now only be functional and maybe require reviewing changes after the fact in the source repository, when necessary. I wonder how others may feel about that for this script?

(this feedback is not suggesting any further changes to this PR)

@mcking65
Copy link
Contributor

mcking65 commented Apr 7, 2024

@jongund

When I open the menu, either by tabbing to it or with the shortcut key, most of the time the focus is on the third item in the menu instead of the first. This is apparently not a new bug; it happens in prod too. This is a pretty significant regression. I think it should be fixed as part of this update.

@mcking65
Copy link
Contributor

mcking65 commented Apr 7, 2024

@jongund

I have a suspicion that the behavior I described in my previous comment has something to do with the position of the mouse before I press the shortcut key. BTW, I observed this in Chrome. This is because the menu was opening and focusing on the 3rd item consistently. Then, to work around a GitHub issue, I moved my mouse. Then when I came back to APG, the menu was opening with the first item focused.

I am wondering if placing the mouse in the position on the screen where the 3rd menu item will appear and then opening the menu triggers focus to be placed on the third item instead of the first?

@jongund
Copy link
Contributor Author

jongund commented Apr 19, 2024

@howard-e
Thank you for the code review I fixed the spacing and spelling issue for documentation.

@jongund
Copy link
Contributor Author

jongund commented Apr 19, 2024

@mcking65
I fixed the issue with focus moving to the menu item the mouse is hovering on in chrome by removing a pointerover event handler. I check our other menu examples and they are not using this event, so our existing examples should be good.

@a11ydoer a11ydoer self-requested a review April 23, 2024 18:10
Copy link
Contributor

@a11ydoer a11ydoer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to use the shortcut key option+0 for both the English keyboard and the non-English keyboard. The shortcut key worked as expected.

@mcking65 mcking65 merged commit 504391a into main May 22, 2024
7 checks passed
@mcking65 mcking65 deleted the update/skipto branch May 22, 2024 18:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants