Help to understand how DismissButton works for screen-readers

[marceloadsj]

Hello everyone.

1st of all, thanks a lot for your hard work on this library. I'm always using it on my personal projects, and recently I suggested it to my team and we started using it at the company I work on. :)

Can you, please, help me understand exactly how DismissButton works from a screen-reader point of view?

I tried to add this component and use some screen reader softwares, but I was never able to "reach" this button (not sure if I was doing something wrong tho).

So, how exactly the users interact with this button? Via tabs/keyboard arrows and it became focused?
When it is read by the screen reader software?
Shall I used it on my Dialogs, even when they have a close button? (implementation based on https://react-spectrum.adobe.com/react-aria/useDialog.html)

Thanks in advance. :)

[marceloadsj]

Quick update: I was trying different screen readers.

With this one (https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) I managed to navigate phrase by phrase using Control+Command+Keyboard Arrows.

Then using this example https://react-spectrum.adobe.com/react-aria/useOverlayTrigger.html#example I managed to focus on the DismissButton.

So, my understanding now is like: If we provide a clear close button (let's suppose, on a dialog, close to a "confirmation" button), the DismissButton wouldn't be required.
But if a component really does not have a close button (like a popover or context menu), screen reader users will benefit from DismissButton, even because the focus is trapped inside that particular menu.
For non-screen readers, the menu would be visually dismissible with ESC/Click Outside/Click again on the button that triggered it (if it works as a toggle).

Am I understanding correct? 😅

[reidbarber]

Your understanding is correct! I think this code block in React Spectrum's Dialog sums it up nicely:

react-spectrum/packages/@react-spectrum/dialog/src/Dialog.tsx

Lines 74 to 79 in 21cb067

	// If rendered in a popover or tray there won't be a visible dismiss button,
	// so we render a hidden one for screen readers.
	let dismissButton: JSX.Element;
	if (type === 'popover' || type === 'tray') {
	dismissButton = <DismissButton onDismiss={onDismiss} />;
	}

[marceloadsj]

Great!

Hidden visually and from access with normal tab based navigation, but still accessible to screen readers.