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.

Sign up for GitHub

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
Merged

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

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f83f4dd
updated skipto to fix shortcut key bug for non-english keyboard layouts
jongund Mar 27, 2024
b5f2b0c
disables shortcut key for skipto when focus is on a text input
jongund Apr 3, 2024
cb05d80
updated skipto.js to fix focus on hover issue with chrome when the me…
jongund Apr 19, 2024
f63141c
updated hover styling
jongund Apr 23, 2024
c8f061b
remove hover styling when pointer leaves menu
jongund Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 163 additions & 70 deletions content/shared/js/skipto.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* ========================================================================
* Version: 5.2.1
* Copyright (c) 2022, 2023 Jon Gunderson; Licensed BSD
* Version: 5.3.2
* 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:
Expand All @@ -9,7 +9,8 @@
* 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.
*
* Documenation: https://skipto-landmarks-headings.github.io/page-script-5
* 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)

* Documentation: https://skipto-landmarks-headings.github.io/page-script-5
* Code: https://github.com/skipto-landmarks-headings/page-script-5
* Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
* ======================================================================== */
Expand Down Expand Up @@ -122,16 +123,19 @@ $skipToId.popup {
transition: top 0.35s ease;
}

$skipToId button .text {
$skipToId button .skipto-text {
padding: 6px 8px 6px 8px;
display: inline-block;
}

$skipToId button img {
height: 24px;
padding: 2px 4px 2px 4px;
$skipToId button .skipto-small {
padding: 6px 8px 6px 8px;
display: none;
}

$skipToId button .skipto-medium {
padding: 6px 8px 6px 8px;
display: none;
background-color: #e8e9ea;
}

$skipToId,
Expand Down Expand Up @@ -165,18 +169,54 @@ $skipToId button {
z-index: $zIndex !important;
}

@media screen and (max-width: $mediaBreakPointpx) {
$skipToId button img {
display: block;
@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 button {
border-color: #e8e9ea;
$skipToId:not(.popup) button .skipto-text,
$skipToId:not(.popup) button .skipto-small {
transition: top 0.35s ease;
display: none;
}

$skipToId button .text {
$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 {
Expand Down Expand Up @@ -329,37 +369,31 @@ $skipToId button:hover {
background-color: $menuBackgroundColor;
color: $menuTextColor;
outline: none;
}

$skipToId button:focus,
$skipToId button:hover {
border-width: 0px 2px 2px 2px;
border-color: $focusBorderColor;
}

$skipToId button:focus .text,
$skipToId button:hover .text {
padding: 6px 7px 5px 7px;
}

$skipToId button:focus img,
$skipToId button:hover img {
padding: 2px 3px 4px 3px;
$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;
border-style: solid;
border-color: $focusBorderColor;
background-color: $menuitemFocusBackgroundColor;
color: $menuitemFocusTextColor;
outline: none;
}

$skipToId [role="menuitem"]:focus .level,
$skipToId [role="menuitem"]:focus .label {
$skipToId [role="menuitem"].hover,
$skipToId [role="menuitem"].hover .level,
$skipToId [role="menuitem"].hover .label {
background-color: $menuitemFocusBackgroundColor;
color: $menuitemFocusTextColor;
}
Expand Down Expand Up @@ -499,7 +533,8 @@ $skipToId [role="menuitem"]:focus .label {
updateStyle('$fontSize', config.fontSize, theme.fontSize, defaultTheme.fontSize);

updateStyle('$positionLeft', config.positionLeft, theme.positionLeft, defaultTheme.positionLeft);
updateStyle('$mediaBreakPoint', config.mediaBreakPoint, theme.mediaBreakPoint, defaultTheme.mediaBreakPoint);
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);
Expand Down Expand Up @@ -1851,14 +1886,19 @@ $skipToId [role="menuitem"]:focus .label {
this.containerNode.appendChild(this.buttonNode);

this.buttonTextNode = document.createElement('span');
this.buttonTextNode.classList.add('text');
this.buttonTextNode.classList.add('skipto-text');
this.buttonTextNode.textContent = buttonVisibleLabel;
this.buttonNode.appendChild(this.buttonTextNode);

const imageNode = document.createElement('img');
imageNode.src = "data:image/png;base64,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";
imageNode.setAttribute('alt', '');
this.buttonNode.appendChild(imageNode);
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

Expand Down Expand Up @@ -1906,6 +1946,8 @@ $skipToId [role="menuitem"]:focus .label {

attachNode.insertBefore(this.containerNode, attachNode.firstElementChild);

this.focusMenuitem = null;

return this.containerNode;

}
Expand Down Expand Up @@ -2019,8 +2061,8 @@ $skipToId [role="menuitem"]:focus .label {
/*
* @method updateMenuitems
*
* @desc Updates the menu information with the current manu items
* used for menu navgation commands
* @desc Updates the menu information with the current menu items
* used for menu navigation commands
*/
updateMenuitems () {
let menuitemNodes = this.menuNode.querySelectorAll('[role=menuitem');
Expand Down Expand Up @@ -2063,7 +2105,7 @@ $skipToId [role="menuitem"]:focus .label {
menuitemNode.addEventListener('keydown', this.handleMenuitemKeydown.bind(this));
menuitemNode.addEventListener('click', this.handleMenuitemClick.bind(this));
menuitemNode.addEventListener('pointerenter', this.handleMenuitemPointerenter.bind(this));

menuitemNode.addEventListener('pointerleave', this.handleMenuitemPointerleave.bind(this));
groupNode.appendChild(menuitemNode);

// add heading level and label
Expand Down Expand Up @@ -2172,7 +2214,10 @@ $skipToId [role="menuitem"]:focus .label {
*/
setFocusToMenuitem(menuitem) {
if (menuitem) {
this.removeHoverClass();
menuitem.classList.add('hover');
menuitem.focus();
this.focusMenuitem = menuitem;
}
}

Expand Down Expand Up @@ -2341,7 +2386,18 @@ $skipToId [role="menuitem"]:focus .label {
isOpen() {
return this.buttonNode.getAttribute('aria-expanded') === 'true';
}


/*
* @method removeHoverClass
*
* @desc Removes hover class for menuitems
*/
removeHoverClass() {
this.menuitemNodes.forEach( node => {
node.classList.remove('hover');
});
}

// Menu event handlers

handleFocusin() {
Expand Down Expand Up @@ -2396,34 +2452,51 @@ $skipToId [role="menuitem"]:focus .label {
}

handleDocumentKeydown (event) {
let key = event.key,
flag = false;

let altPressed =
this.usesAltKey &&
event.altKey &&
!event.ctrlKey &&
!event.shiftKey &&
!event.metaKey;

let optionPressed =
this.usesOptionKey &&
event.altKey &&
!event.ctrlKey &&
!event.shiftKey &&
!event.metaKey;

if (
(optionPressed && this.config.optionShortcut === key) ||
(altPressed && this.config.altShortcut === key)
) {
this.openPopup();
this.setFocusToFirstMenuitem();
flag = true;
}
if (flag) {
event.stopPropagation();
event.preventDefault();
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) ||
((optionPressed || altPressed) && (48 === event.keyCode))
) {
this.openPopup();
this.setFocusToFirstMenuitem();
event.stopPropagation();
event.preventDefault();
}
}
}

Expand Down Expand Up @@ -2519,7 +2592,13 @@ $skipToId [role="menuitem"]:focus .label {

handleMenuitemPointerenter(event) {
let tgt = event.currentTarget;
tgt.focus();
this.removeHoverClass();
tgt.classList.add('hover');
}

handleMenuitemPointerleave(event) {
let tgt = event.currentTarget;
tgt.classList.remove('hover');
}

handleBackgroundPointerdown(event) {
Expand Down Expand Up @@ -2566,6 +2645,7 @@ $skipToId [role="menuitem"]:focus .label {

// Button labels and messages
buttonLabel: 'Skip To Content',
smallButtonLabel: 'SkipTo',
altLabel: 'Alt',
optionLabel: 'Option',
buttonShortcut: ' ($modifier+$key)',
Expand Down Expand Up @@ -2597,7 +2677,8 @@ $skipToId [role="menuitem"]:focus .label {
fontFamily: '',
fontSize: '',
positionLeft: '',
mediaBreakPoint: '',
smallBreakPoint: '',
mediumBreakPoint: '',
menuTextColor: '',
menuBackgroundColor: '',
menuitemFocusTextColor: '',
Expand All @@ -2612,7 +2693,8 @@ $skipToId [role="menuitem"]:focus .label {
fontFamily: 'inherit',
fontSize: 'inherit',
positionLeft: '46%',
mediaBreakPoint: '540',
smallBreakPoint: '576',
mediumBreakPoint: '992',
menuTextColor: '#1a1a1a',
menuBackgroundColor: '#dcdcdc',
menuitemFocusTextColor: '#eeeeee',
Expand Down Expand Up @@ -2686,6 +2768,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%'
}
},

Expand Down
Loading