Skip to content

Commit

Permalink
Merge branch 'release/8.10.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@marteinn
marteinn committed Mar 11, 2023
2 parents f0552d8 + e9517bb commit 93994dd
Show file tree
Hide file tree
Showing 51 changed files with 5,983 additions and 5,790 deletions.
31 changes: 31 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
### Removed

## [8.10.0] - 2023-03-11

### Added
- Add Wagtail 4.2 support (@marteinn)

### Changed
- Upgrade next to 13.2.4 (@marteinn)

### Fixed
- Make sure .env.local are not used in docker (@rinti)
- Upgrade python-dotenv to 1.0.0
- Upgrade sentry_sdk to 1.16.0
- Upgrade django to 4.1.7
- Upgrade djangorestframework-stubs to 1.9.0
- Upgrade djangp-stubs to 1.15.0
- Upgrade djangorestframework-stubs to 1.9.1
- Upgrade @swc/core to 1.3.39
- Upgrade @sentry/nextjs to 7.42.0
- Upgrade eslint to 8.36.0
- Upgrade prettier to 2.8.4
- Upgrade @types/react to 18.0.28
- Upgrade storybook to 6.5.16
- Upgrade storybook-addon-next to 1.7.3
- Upgrade eslint-config-prettier to 8.7.0
- Upgrade i18next
- Upgrade eslint-config-next to 13.2.4
- Upgrade frontend testing libraries

### Removed
- Drop AWS S3 storage (@marteinn)

## [8.9.2] - 2023-02-16

### Fixed
Expand Down
3 changes: 0 additions & 3 deletions Company-Project/docker/config/python.example.env
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_BUCKET_NAME=
VS_CODE_REMOTE_DEBUG=False
DEBUG_TOOLBAR=True
255 changes: 4 additions & 251 deletions Company-Project/frontend/components/WagtailUserbar/WagtailUserbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,257 +1,10 @@
import React, { useEffect } from 'react';
import React from 'react';
import PropTypes from 'prop-types';

const WagtailUserbar = ({ html }) => {
useEffect(() => {
// This code is copy pasted from
// https://github.com/wagtail/wagtail/blob/19ad01ddd5d051230318a2bbfa890ac5290f295a/client/src/entrypoints/admin/userbar.js
const userbar = document.querySelector('[data-wagtail-userbar]');
const trigger = userbar.querySelector('[data-wagtail-userbar-trigger]');
const list = userbar.querySelector('[role=menu]');
const listItems = list.querySelectorAll('li');
const isActiveClass = 'is-active';

// querySelector for all items that can be focused
// tabIndex has been removed for roving tabindex compatibility
// source: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
const focusableItemSelector = `a[href],
button:not([disabled]),
input:not([disabled])`;

// eslint-disable-next-line @typescript-eslint/no-use-before-define
trigger.addEventListener('click', toggleUserbar, false);

// make sure userbar is hidden when navigating back
// eslint-disable-next-line @typescript-eslint/no-use-before-define
window.addEventListener('pageshow', hideUserbar, false);

// Handle keyboard events on the trigger
// eslint-disable-next-line @typescript-eslint/no-use-before-define
userbar.addEventListener('keydown', handleTriggerKeyDown);
// eslint-disable-next-line @typescript-eslint/no-use-before-define
list.addEventListener('focusout', handleFocusChange);

// eslint-disable-next-line @typescript-eslint/no-use-before-define
resetItemsTabIndex(); // On initialisation, all menu items should be disabled for roving tab index

function showUserbar(shouldFocus) {
userbar.classList.add(isActiveClass);
trigger.setAttribute('aria-expanded', 'true');
// eslint-disable-next-line @typescript-eslint/no-use-before-define
list.addEventListener('click', sandboxClick, false);
// eslint-disable-next-line @typescript-eslint/no-use-before-define
window.addEventListener('click', clickOutside, false);

// Start handling keyboard input now that the userbar is open.
// eslint-disable-next-line @typescript-eslint/no-use-before-define
userbar.addEventListener('keydown', handleUserbarItemsKeyDown, false);

// The userbar has role=menu which means that the first link should be focused on popup
// For weird reasons shifting focus only works after some amount of delay
// Which is why we are forced to use setTimeout
if (shouldFocus) {
// Find the first focusable element (if any) and focus it
if (list.querySelector(focusableItemSelector)) {
setTimeout(() => {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
setFocusToFirstItem();
}, 300); // Less than 300ms doesn't seem to work
}
}
}

function hideUserbar() {
userbar.classList.remove(isActiveClass);
trigger.setAttribute('aria-expanded', 'false');
// eslint-disable-next-line @typescript-eslint/no-use-before-define
list.addEventListener('click', sandboxClick, false);
// eslint-disable-next-line @typescript-eslint/no-use-before-define
window.removeEventListener('click', clickOutside, false);

// Cease handling keyboard input now that the userbar is closed.
// eslint-disable-next-line @typescript-eslint/no-use-before-define
userbar.removeEventListener('keydown', handleUserbarItemsKeyDown, false);
}

function toggleUserbar(e2) {
e2.stopPropagation();
if (userbar.classList.contains(isActiveClass)) {
hideUserbar();
} else {
showUserbar(true);
}
}

function isFocusOnItems() {
return (
document.activeElement &&
!!document.activeElement.closest('.wagtail-userbar-items')
);
}

/** Reset all focusable menu items to `tabIndex = -1` */
function resetItemsTabIndex() {
listItems.forEach((listItem) => {
// eslint-disable-next-line no-param-reassign
listItem.firstElementChild.tabIndex = -1;
});
}

/** Focus element using a roving tab index */
function focusElement(el) {
resetItemsTabIndex();
// eslint-disable-next-line no-param-reassign
el.tabIndex = 0;
setTimeout(() => {
el.focus();
}, 100); // Workaround, changing focus only works after a timeout
}

function setFocusToTrigger() {
setTimeout(() => trigger.focus(), 300);
resetItemsTabIndex();
}

function setFocusToFirstItem() {
if (listItems.length > 0) {
focusElement(listItems[0].firstElementChild);
}
}

function setFocusToLastItem() {
if (listItems.length > 0) {
focusElement(listItems[listItems.length - 1].firstElementChild);
}
}

function setFocusToNextItem() {
listItems.forEach((element, idx) => {
// Check which item is currently focused
if (element.firstElementChild === document.activeElement) {
if (idx + 1 < listItems.length) {
focusElement(listItems[idx + 1].firstElementChild);
} else {
// Loop around
setFocusToFirstItem();
}
}
});
}

function setFocusToPreviousItem() {
listItems.forEach((element, idx) => {
// Check which item is currently focused
if (element.firstElementChild === document.activeElement) {
if (idx > 0) {
focusElement(listItems[idx - 1].firstElementChild);
} else {
setFocusToLastItem();
}
}
});
}

/**
This handler is responsible for keyboard input when items inside the userbar are focused.
It should only listen when the userbar is open.
It is responsible for:
- Shifting focus using the arrow / home / end keys.
- Closing the menu when 'Escape' is pressed.
*/
function handleUserbarItemsKeyDown(event) {
// Only handle keyboard input if the userbar is open
if (trigger.getAttribute('aria-expanded') === 'true') {
if (event.key === 'Escape') {
hideUserbar();
setFocusToTrigger();
return false;
}

// List items are in focus, move focus if needed
if (isFocusOnItems()) {
switch (event.key) {
case 'ArrowDown':
event.preventDefault();
setFocusToNextItem();
return false;
case 'ArrowUp':
event.preventDefault();
setFocusToPreviousItem();
return false;
case 'Home':
event.preventDefault();
setFocusToFirstItem();
return false;
case 'End':
event.preventDefault();
setFocusToLastItem();
return false;
default:
break;
}
}
}
return true;
}

function handleFocusChange(event) {
// Is the focus is still in the menu? If so, don't to anything
if (
event.relatedTarget == null ||
(event.relatedTarget &&
event.relatedTarget.closest('.wagtail-userbar-items'))
) {
return;
}
// List items not in focus - the menu should close
resetItemsTabIndex();
hideUserbar();
}

/**
This handler is responsible for opening the userbar with the arrow keys
if it's focused and not open yet. It should always be listening.
*/
function handleTriggerKeyDown(event) {
// Check if the userbar is focused (but not open yet) and should be opened by keyboard input
if (
trigger === document.activeElement &&
trigger.getAttribute('aria-expanded') === 'false'
) {
switch (event.key) {
case 'ArrowUp':
event.preventDefault();
showUserbar(false);

// Workaround for focus bug
// Needs extra delay to account for the userbar open animation. Otherwise won't focus properly.
setTimeout(() => setFocusToLastItem(), 300);
break;
case 'ArrowDown':
event.preventDefault();
showUserbar(false);

// Workaround for focus bug
// Needs extra delay to account for the userbar open animation. Otherwise won't focus properly.
setTimeout(() => setFocusToFirstItem(), 300);
break;
default:
break;
}
}
}

function sandboxClick(e2) {
e2.stopPropagation();
}

function clickOutside() {
hideUserbar();
}
});

return <div dangerouslySetInnerHTML={{ __html: html }} />;
return (
<div suppressHydrationWarning={true} dangerouslySetInnerHTML={{ __html: html }}/>
);
};

WagtailUserbar.propTypes = {
Expand Down
Loading

0 comments on commit 93994dd

Please sign in to comment.