Accessibility Fix: Add tooltips to import, export, and modal close buttons #667

aurooba · 2023-10-07T20:47:54Z

What is this PR doing?

This PR adds tooltips to the import, export, and modal close buttons.

What problem is it solving?

While they already have aria-label visually users still need the tooltips so they can understand what these icon buttons do without interacting with them first.

How is the problem addressed?

A title attribute has been added to each button element that has the same text as the aria-label helper text.

Testing Instructions

Run the playground
Hover on the import or export icons in the header, and see the tooltip appear with the helper text.

Screenshot

aurooba · 2023-10-07T20:48:55Z

Note: these should really be translation ready. Is there something already included within Playground that we can wrap this in, some kind of i18n function?

dmsnell

thanks for the insight, @aurooba

I've got a question about duplicating the aria-label value when the title exists, but otherwise this seems like a good change we can merge quickly.

unfortunately there's no system in place yet here for translation strings, unless I'm mistaken.

dmsnell · 2023-10-07T21:58:45Z

packages/playground/website/src/components/export-button/index.tsx

 	return (
 		<button
 			id="export-playground--btn"
 			className={css.btn}
-			aria-label="Download Playground export as ZIP file"
+			aria-label={exportButtonAriaLabel}
+			title={exportButtonAriaLabel}


with the title set is the aria-label necessary? I was led to believe that it becomes redundant at that point, and only matters if the aria-label value is different than the title, in which case its value is preferred.

Yes! Although screen-readers will read the title if it's there (in some cases only), they prefer aria-label and users can set preferences where only aria-label is read. So it's considered a better practice to include both. Here's some more information: https://www.a11yproject.com/posts/title-attributes/

alexstine · 2023-10-08T07:12:37Z

Actually, the title attribute is treated differently in every screen reader even in today's time. Some screen readers will only read it under very specific conditions, some will ignore, and others will read duplicate information with the aria-label and title. I think this will likely cause an accessibility regression so let's find another solution here.

Thanks.

alexstine

While we're here, some labeling notes.

alexstine · 2023-10-08T07:15:44Z

packages/playground/website/src/components/export-button/index.tsx

@@ -9,11 +9,15 @@ export default function ExportButton() {
 	if (!playground) {
 		return null;
 	}
+
+	const exportButtonAriaLabel = 'Download Playground export as ZIP file';


Save verbosity?

Suggested change

const exportButtonAriaLabel = 'Download Playground export as ZIP file';

const exportButtonAriaLabel = 'Download configuration .zip file';

I would suggest a further change, Export configuration .zip file

alexstine · 2023-10-08T07:17:55Z

packages/playground/website/src/components/import-button/index.tsx

@@ -8,6 +8,7 @@ export default function ImportButton() {
 	const [isOpen, setOpen] = useState(false);
 	const openModal = () => setOpen(true);
 	const closeModal = () => setOpen(false);
+	const importButtonAriaLabel = 'Open Playground import window';


This text is redundant.

Suggested change

const importButtonAriaLabel = 'Open Playground import window';

const importButtonAriaLabel = 'Import configuration';

alexstine · 2023-10-08T07:19:11Z

packages/playground/website/src/components/modal/index.tsx

 export default function Modal(props: ModalProps) {
+	const closeBtnAriaLabel = 'Close import window';


Since the modal provides current context, can shorten to just Close.

Suggested change

const closeBtnAriaLabel = 'Close import window';

const closeBtnAriaLabel = 'Close';

aurooba · 2023-10-08T14:06:00Z

@alexstine Good call on changing the labels, I didn't want to express any opinions there but I agree that the actual language could be updated, and I agree with your suggestions.

Regarding the title and aria-label issue, thanks for the additional insight! My own experiments and research are obviously a little more limited compared to your experience so that's really helpful!

Should we skip using title and use a javascript library for the tooltip that uses the aria-label? Because it really does need a tooltip for sighted users, I found figuring out the icons without helper text very frustrating and had to inspect the code for the aria-label 😅.

For reference, in the Block Editor, the tooltip component uses the @ariakit/react Tooltip component

Co-authored-by: aurooba <aurooba@auroobamakes.com Co-authored-by: alexstine <alex.stine@yourtechadvisors.com>

This reverts commit 35e98e0.

alexstine · 2023-10-08T18:56:55Z

@aurooba Why not use the one from Gutenberg WordPress components?

https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/tooltip

adamziel · 2023-10-09T12:57:11Z

This is lovely @aurooba, thank you so much!

It really does need a tooltip for sighted users

Yeah, the button could be much clearer about its purpose. Let's take a step back and think of what a clearer button would look like.

Maybe let's replacing these icons with textual buttons like import and export or save and restore? The layout won't look good on mobile, but maybe hiding the buttons on mobile devices would be fine? Uploading a Playground zip bundle instance from an iPhone seems highly unlikely.

## What is this PR doing? Puts additional actions in a single, accessible dropdown menu instead of jamming more ambiguous icons in the "toolbar". Closes #667

aurooba added 3 commits October 7, 2023 14:38

add tooltips to import, export, and modal close buttons

cd3d32d

use a const for the title and aria-labels for each button

91593c2

formatting fix for readability

7e9043b

dmsnell reviewed Oct 7, 2023

View reviewed changes

aurooba requested a review from dmsnell October 7, 2023 23:37

alexstine reviewed Oct 8, 2023

View reviewed changes

aurooba and others added 2 commits October 8, 2023 08:12

Refactor button label language

35e98e0

Co-authored-by: aurooba <aurooba@auroobamakes.com Co-authored-by: alexstine <alex.stine@yourtechadvisors.com>

Revert "Refactor button label language"

ae57ddc

This reverts commit 35e98e0.

adamziel added the Accessibility label Oct 9, 2023

adamziel mentioned this pull request Nov 14, 2023

[UX] Dropdown menu instead of multiple unlabeled buttons #743

Merged

adamziel closed this in #743 Nov 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accessibility Fix: Add tooltips to import, export, and modal close buttons #667

Accessibility Fix: Add tooltips to import, export, and modal close buttons #667

aurooba commented Oct 7, 2023 •

edited

aurooba commented Oct 7, 2023

dmsnell left a comment

dmsnell Oct 7, 2023

aurooba Oct 7, 2023

alexstine commented Oct 8, 2023

alexstine left a comment

alexstine Oct 8, 2023

aurooba Oct 8, 2023

alexstine Oct 8, 2023

aurooba Oct 8, 2023

alexstine Oct 8, 2023

aurooba Oct 8, 2023

aurooba commented Oct 8, 2023 •

edited

alexstine commented Oct 8, 2023

adamziel commented Oct 9, 2023

	const exportButtonAriaLabel = 'Download Playground export as ZIP file';
	const exportButtonAriaLabel = 'Download configuration .zip file';

	const importButtonAriaLabel = 'Open Playground import window';
	const importButtonAriaLabel = 'Import configuration';

		export default function Modal(props: ModalProps) {
		const closeBtnAriaLabel = 'Close import window';

	const closeBtnAriaLabel = 'Close import window';
	const closeBtnAriaLabel = 'Close';

Accessibility Fix: Add tooltips to import, export, and modal close buttons #667

Accessibility Fix: Add tooltips to import, export, and modal close buttons #667

Conversation

aurooba commented Oct 7, 2023 • edited

What is this PR doing?

What problem is it solving?

How is the problem addressed?

Testing Instructions

Screenshot

aurooba commented Oct 7, 2023

dmsnell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexstine commented Oct 8, 2023

alexstine left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aurooba commented Oct 8, 2023 • edited

alexstine commented Oct 8, 2023

adamziel commented Oct 9, 2023

aurooba commented Oct 7, 2023 •

edited

aurooba commented Oct 8, 2023 •

edited