From 935d29e2f59728b2b56b9b219ad0654368cdffc4 Mon Sep 17 00:00:00 2001 From: Albina <51043550+albinazs@users.noreply.github.com> Date: Mon, 17 Apr 2023 10:59:55 +0200 Subject: [PATCH] Accessibility checker outlines feature (#10176) Co-authored-by: Thibaud Colas --- CHANGELOG.txt | 1 + client/src/includes/userbar.ts | 68 ++++++++++++++++++- docs/releases/5.0.md | 12 +++- .../templates/wagtailadmin/userbar/base.html | 1 + .../userbar/item_accessibility.html | 3 + 5 files changed, 81 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 0b370200ed..a8940ef37e 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -14,6 +14,7 @@ Changelog * Implement new simplified userbar designs (Albina Starykova) * Add more Axe rules to the accessibility checker (Albina Starykova) * Sort accessibility checker results by position on the page (Albina Starykova) + * Highlight elements with errors in accessibility checker (Albina Starykova) * Add usage view for pages (Sage Abdullah) * Copy page form now updates the slug field dynamically with a slugified value on blur (Loveth Omokaro) * Ensure selected collection is kept when navigating from documents or images listings to add multiple views & upon upload (Aman Pandey, Bojan Mihelac) diff --git a/client/src/includes/userbar.ts b/client/src/includes/userbar.ts index aff5515462..b58545bb63 100644 --- a/client/src/includes/userbar.ts +++ b/client/src/includes/userbar.ts @@ -384,8 +384,17 @@ export class Userbar extends HTMLElement { this.shadowRoot.querySelector( '#w-a11y-result-selector-template', ); + const a11yOutlineTemplate = + this.shadowRoot.querySelector( + '#w-a11y-result-outline-template', + ); - if (!accessibilityResultsBox || !a11yRowTemplate || !a11ySelectorTemplate) { + if ( + !accessibilityResultsBox || + !a11yRowTemplate || + !a11ySelectorTemplate || + !a11yOutlineTemplate + ) { return; } @@ -455,10 +464,65 @@ export class Userbar extends HTMLElement { currentA11ySelector.addEventListener('click', () => { const inaccessibleElement = document.querySelector(selectorName); - if (!inaccessibleElement) return; + const a11yOutlineContainer = + this.shadowRoot?.querySelector( + '[data-a11y-result-outline-container]', + ); + if (a11yOutlineContainer?.firstElementChild) { + a11yOutlineContainer.removeChild( + a11yOutlineContainer.firstElementChild, + ); + } + a11yOutlineContainer?.appendChild( + a11yOutlineTemplate.content.cloneNode(true), + ); + const currentA11yOutline = + this.shadowRoot?.querySelector( + '[data-a11y-result-outline]', + ); + if ( + !this.shadowRoot || + !inaccessibleElement || + !currentA11yOutline || + !a11yOutlineContainer + ) + return; + + const styleA11yOutline = () => { + const rect = inaccessibleElement.getBoundingClientRect(); + currentA11yOutline.style.cssText = ` + top: ${ + rect.height < 5 + ? `${rect.top + window.scrollY - 2.5}px` + : `${rect.top + window.scrollY}px` + }; + left: ${ + rect.width < 5 + ? `${rect.left + window.scrollX - 2.5}px` + : `${rect.left + window.scrollX}px` + }; + width: ${Math.max(rect.width, 5)}px; + height: ${Math.max(rect.height, 5)}px; + position: absolute; + z-index: 129; + outline: 1px solid #CD4444; + box-shadow: 0px 0px 12px 1px #FF0000; + `; + }; + + styleA11yOutline(); + + window.addEventListener('resize', styleA11yOutline); + inaccessibleElement.style.scrollMargin = '6.25rem'; inaccessibleElement.scrollIntoView(); inaccessibleElement.focus(); + + accessibilityResultsBox.addEventListener('hide', () => { + currentA11yOutline.style.cssText = ''; + + window.removeEventListener('resize', styleA11yOutline); + }); }); }); }); diff --git a/docs/releases/5.0.md b/docs/releases/5.0.md index 802016e116..20b2eefeb0 100644 --- a/docs/releases/5.0.md +++ b/docs/releases/5.0.md @@ -41,14 +41,22 @@ For more details, see our new [icons documentation](icons). This has been made possible thanks to a multi-year refactoring effort to migrate all icons to SVG. Thank you to all contributors who participated in this effort: Coen van der Kamp, LB (Ben) Johnston, Dan Braghis, Daniel Kirkham, Sage Abdullah, Thibaud Colas, Scott Cranfill, Storm Heg, Steve Steinwand, Jérôme Lebleu, Abayomi Victory. +### Accessibility checker improvements + +The accessibility checker has been updated with: + + * 5 more Axe rules enabled by default + * Sorting of checker results according to their position on the page + * Highlight styles to more easily identify elements with errors + +Those improvements were implemented by Albina Starykova as part of an [Outreachy internship](https://wagtail.org/blog/introducing-wagtails-new-accessibility-checker/), with support from mentors Thibaud Colas, Sage Abdullah, and Joshua Munn. + ### Other features * Add `WAGTAILIMAGES_EXTENSIONS` setting to restrict image uploads to specific file types (Aman Pandey, Ananjan-R) * Update user list column level to `Access level` to be easier to understand (Vallabh Tiwari) * Migrate `.button-longrunning` behaviour to a Stimulus controller with support for custom label element & duration (Loveth Omokaro) * Implement new simplified userbar designs (Albina Starykova) - * Add more Axe rules to the accessibility checker (Albina Starykova) - * Sort accessibility checker results by position on the page (Albina Starykova) * Add usage view for pages (Sage Abdullah) * Copy page form now updates the slug field dynamically with a slugified value on blur (Loveth Omokaro) * Ensure selected collection is kept when navigating from documents or images listings to add multiple views & upon upload (Aman Pandey, Bojan Mihelac) diff --git a/wagtail/admin/templates/wagtailadmin/userbar/base.html b/wagtail/admin/templates/wagtailadmin/userbar/base.html index 2d6a3f7dd8..d617c46a4e 100644 --- a/wagtail/admin/templates/wagtailadmin/userbar/base.html +++ b/wagtail/admin/templates/wagtailadmin/userbar/base.html @@ -36,6 +36,7 @@ +
diff --git a/wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html b/wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html index db9b6224be..f8973036fc 100644 --- a/wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html +++ b/wagtail/admin/templates/wagtailadmin/userbar/item_accessibility.html @@ -29,5 +29,8 @@ + {% enddialog %} {% endblock %}