Infrastructure: Update skipto.js to fix shortcut key bug for non-english keyboard layouts #2975
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,6 +1,6 @@ | ||||||
| /* ======================================================================== | ||||||
| * Version: 5.3.1 | ||||||
| * Copyright (c) 2022, 2023, 2024 Jon Gunderson; Licensed BSD | ||||||
| * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD | ||||||
| * All rights reserved. | ||||||
| * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: | ||||||
|
|
@@ -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 | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| * Code: https://github.com/skipto-landmarks-headings/page-script-5 | ||||||
| * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues | ||||||
|
|
@@ -122,16 +123,19 @@ $skipToId.popup { | |||||
| transition: top 0.35s ease; | ||||||
| } | ||||||
|
|
||||||
| $skipToId button .skipto-text { | ||||||
| padding: 6px 8px 6px 8px; | ||||||
| display: inline-block; | ||||||
| } | ||||||
|
|
||||||
| $skipToId button .skipto-small { | ||||||
| padding: 6px 8px 6px 8px; | ||||||
| display: none; | ||||||
| } | ||||||
|
|
||||||
| $skipToId button .skipto-medium { | ||||||
| padding: 6px 8px 6px 8px; | ||||||
| display: none; | ||||||
| } | ||||||
|
|
||||||
| $skipToId, | ||||||
|
|
@@ -165,18 +169,54 @@ $skipToId button { | |||||
| z-index: $zIndex !important; | ||||||
| } | ||||||
|
|
||||||
| @media screen and (max-width: $smallBreakPointpx) { | ||||||
| $skipToId:not(.popup) button .skipto-small { | ||||||
| transition: top 0.35s ease; | ||||||
| display: inline-block; | ||||||
| } | ||||||
|
|
||||||
| $skipToId:not(.popup) button .skipto-text, | ||||||
| $skipToId:not(.popup) button .skipto-medium { | ||||||
| transition: top 0.35s ease; | ||||||
| display: none; | ||||||
| } | ||||||
|
|
||||||
| $skipToId:not(.popup).focus button .skipto-text { | ||||||
| transition: top 0.35s ease; | ||||||
| display: inline-block; | ||||||
| } | ||||||
|
|
||||||
| $skipToId:not(.popup).focus button .skipto-small, | ||||||
| $skipToId:not(.popup).focus button .skipto-medium { | ||||||
| transition: top 0.35s ease; | ||||||
| display: none; | ||||||
| } | ||||||
|
|
||||||
| } | ||||||
|
|
||||||
| @media screen and (min-width: $smallBreakPointpx) and (max-width: $mediumBreakPointpx) { | ||||||
| $skipToId:not(.popup) button .skipto-medium { | ||||||
| transition: top 0.35s ease; | ||||||
| display: inline-block; | ||||||
| } | ||||||
|
|
||||||
| $skipToId:not(.popup) button .skipto-text, | ||||||
| $skipToId:not(.popup) button .skipto-small { | ||||||
| transition: top 0.35s ease; | ||||||
| display: none; | ||||||
| } | ||||||
|
|
||||||
| $skipToId:not(.popup).focus button .skipto-text { | ||||||
| transition: top 0.35s ease; | ||||||
| display: inline-block; | ||||||
| } | ||||||
|
|
||||||
| $skipToId:not(.popup).focus button .skipto-small, | ||||||
| $skipToId:not(.popup).focus button .skipto-medium { | ||||||
| transition: top 0.35s ease; | ||||||
| display: none; | ||||||
| } | ||||||
|
|
||||||
| } | ||||||
|
|
||||||
| $skipToId.fixed { | ||||||
|
|
@@ -329,25 +369,20 @@ $skipToId button:hover { | |||||
| background-color: $menuBackgroundColor; | ||||||
| color: $menuTextColor; | ||||||
| outline: none; | ||||||
| border-width: 0px 2px 2px 2px; | ||||||
| border-color: $focusBorderColor; | ||||||
| } | ||||||
|
|
||||||
|
|
||||||
| $skipToId button:focus .skipto-text, | ||||||
| $skipToId button:hover .skipto-text, | ||||||
| $skipToId button:focus .skipto-small, | ||||||
| $skipToId button:hover .skipto-small, | ||||||
| $skipToId button:focus .skipto-medium, | ||||||
| $skipToId button:hover .skipto-medium { | ||||||
| padding: 6px 7px 5px 7px; | ||||||
| } | ||||||
|
|
||||||
| $skipToId [role="menuitem"]:focus { | ||||||
| padding: 1px; | ||||||
| border-width: 2px; | ||||||
|
|
@@ -499,7 +534,8 @@ $skipToId [role="menuitem"]:focus .label { | |||||
| updateStyle('$fontSize', config.fontSize, theme.fontSize, defaultTheme.fontSize); | ||||||
|
|
||||||
| updateStyle('$positionLeft', config.positionLeft, theme.positionLeft, defaultTheme.positionLeft); | ||||||
| updateStyle('$smallBreakPoint', config.smallBreakPoint, theme.smallBreakPoint, defaultTheme.smallBreakPoint); | ||||||
| updateStyle('$mediumBreakPoint', config.mediumBreakPoint, theme.mediumBreakPoint, defaultTheme.mediumBreakPoint); | ||||||
|
|
||||||
| updateStyle('$menuTextColor', config.menuTextColor, theme.menuTextColor, defaultTheme.menuTextColor); | ||||||
| updateStyle('$menuBackgroundColor', config.menuBackgroundColor, theme.menuBackgroundColor, defaultTheme.menuBackgroundColor); | ||||||
|
|
@@ -1851,14 +1887,19 @@ $skipToId [role="menuitem"]:focus .label { | |||||
| this.containerNode.appendChild(this.buttonNode); | ||||||
|
|
||||||
| this.buttonTextNode = document.createElement('span'); | ||||||
| this.buttonTextNode.classList.add('skipto-text'); | ||||||
| this.buttonTextNode.textContent = buttonVisibleLabel; | ||||||
| this.buttonNode.appendChild(this.buttonTextNode); | ||||||
|
|
||||||
| const smallButtonNode = document.createElement('span'); | ||||||
| smallButtonNode.classList.add('skipto-small'); | ||||||
| smallButtonNode.textContent = config.smallButtonLabel; | ||||||
| this.buttonNode.appendChild(smallButtonNode); | ||||||
|
|
||||||
| const mediumButtonNode = document.createElement('span'); | ||||||
| mediumButtonNode.classList.add('skipto-medium'); | ||||||
| mediumButtonNode.textContent = config.buttonLabel; | ||||||
| this.buttonNode.appendChild(mediumButtonNode); | ||||||
|
|
||||||
| // Create menu container | ||||||
|
|
||||||
|
|
@@ -2396,34 +2437,51 @@ $skipToId [role="menuitem"]:focus .label { | |||||
| } | ||||||
|
|
||||||
| handleDocumentKeydown (event) { | ||||||
|
|
||||||
| const enabledInputTypes = [ | ||||||
| 'button', | ||||||
| 'checkbox', | ||||||
| 'color', | ||||||
| 'file', | ||||||
| 'image', | ||||||
| 'radio', | ||||||
| 'range', | ||||||
| 'reset', | ||||||
| 'submit' | ||||||
| ]; | ||||||
|
|
||||||
| const target = event.target; | ||||||
| const tagName = target.tagName ? target.tagName.toLowerCase() : ''; | ||||||
| const type = tagName === 'input' ? target.type.toLowerCase() : ''; | ||||||
|
|
||||||
| if ((tagName !== 'textarea') && | ||||||
| ((tagName !== 'input') || | ||||||
| ((tagName === 'input') && enabledInputTypes.includes(type)) | ||||||
| )) { | ||||||
|
|
||||||
| const altPressed = | ||||||
| this.usesAltKey && | ||||||
| event.altKey && | ||||||
| !event.ctrlKey && | ||||||
| !event.shiftKey && | ||||||
| !event.metaKey; | ||||||
|
|
||||||
| const optionPressed = | ||||||
| this.usesOptionKey && | ||||||
| event.altKey && | ||||||
| !event.ctrlKey && | ||||||
| !event.shiftKey && | ||||||
| !event.metaKey; | ||||||
|
|
||||||
| if ((optionPressed && this.config.optionShortcut === event.key) || | ||||||
| (altPressed && this.config.altShortcut === event.key) || | ||||||
|
There was a problem hiding this comment.
Suggested change
Minor nit that may not matter if this was a stylistic choice coming from the formatter in the source repository. |
||||||
| ((optionPressed || altPressed) && (48 === event.keyCode)) | ||||||
| ) { | ||||||
| this.openPopup(); | ||||||
| this.setFocusToFirstMenuitem(); | ||||||
| event.stopPropagation(); | ||||||
| event.preventDefault(); | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
|
|
@@ -2566,6 +2624,7 @@ $skipToId [role="menuitem"]:focus .label { | |||||
|
|
||||||
| // Button labels and messages | ||||||
| buttonLabel: 'Skip To Content', | ||||||
| smallButtonLabel: 'SkipTo', | ||||||
| altLabel: 'Alt', | ||||||
| optionLabel: 'Option', | ||||||
| buttonShortcut: ' ($modifier+$key)', | ||||||
|
|
@@ -2597,7 +2656,8 @@ $skipToId [role="menuitem"]:focus .label { | |||||
| fontFamily: '', | ||||||
| fontSize: '', | ||||||
| positionLeft: '', | ||||||
| smallBreakPoint: '', | ||||||
| mediumBreakPoint: '', | ||||||
| menuTextColor: '', | ||||||
| menuBackgroundColor: '', | ||||||
| menuitemFocusTextColor: '', | ||||||
|
|
@@ -2612,7 +2672,8 @@ $skipToId [role="menuitem"]:focus .label { | |||||
| fontFamily: 'inherit', | ||||||
| fontSize: 'inherit', | ||||||
| positionLeft: '46%', | ||||||
| smallBreakPoint: '576', | ||||||
| mediumBreakPoint: '992', | ||||||
| menuTextColor: '#1a1a1a', | ||||||
| menuBackgroundColor: '#dcdcdc', | ||||||
| menuitemFocusTextColor: '#eeeeee', | ||||||
|
|
@@ -2686,6 +2747,17 @@ $skipToId [role="menuitem"]:focus .label { | |||||
| focusBorderColor: '#dd3444', | ||||||
| buttonTextColor: '#fff', | ||||||
| buttonBackgroundColor: '#036', | ||||||
| }, | ||||||
| 'openweba11y': { | ||||||
| hostnameSelector: 'openweba11y.com', | ||||||
| buttonTextColor: '#13294B', | ||||||
| buttonBackgroundColor: '#dddddd', | ||||||
| focusBorderColor: '#C5050C', | ||||||
| menuTextColor: '#13294B', | ||||||
| menuBackgroundColor: '#dddddd', | ||||||
| menuitemFocusTextColor: '#dddddd', | ||||||
| menuitemFocusBackgroundColor: '#13294B', | ||||||
| fontSize: '90%' | ||||||
| } | ||||||
| }, | ||||||
|
|
||||||
|
|
||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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)