Update dialog example page and examples

[rudigier]

This PR updates the Dialog chapter to better reflect current accessibility guidance and native-first implementation practices.

It adds a native example, refines the modal and non-modal examples, and clarifies when to use native dialogs versus custom ARIA-based implementations.

What changed

• updated the Dialog documentation and decision guidance
• added a native modal dialog proof of concept
• improved the modal and non-modal examples for accessibility and behavior consistency
• refreshed supporting screenshots and example assets

[netlify]

✅ Deploy Preview for accessibility-developer-guide ready!

Name	Link
🔨 Latest commit	02437c2
🔍 Latest deploy log	https://app.netlify.com/projects/accessibility-developer-guide/deploys/6a10c20be003c50008778899
😎 Deploy Preview	https://deploy-preview-480--accessibility-developer-guide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[RA11y1]

here I have the same question as in #437 , is there a way to do row headers with markdown? Otherwise I can switch it to an html table.

[rudigier]

Chnaged. thank you!

[backflip]

Question: What is the reason for keeping any client-side JavaScript and not use the native dialog? I would be heavily in favor of deleting custom solutions.

[rudigier]

@backflip You mean using invoker commands instead? Good point but it's not for all browsers ready: https://caniuse.com/wf-invoker-commands

[RA11y1]

The modal dialog functions well for NVDA on FF and Chrome. I want to check with @ReginaReusser on JAWS as well.

The non-modal dialog still captures the virtual cursor, NVDA has to switch to focus navigation using the tab key in order to leave the opened dialog.

Will resume at a later point when we were able to test with JAWS and the custom modal. Thx so far @rudigier !

[RA11y1]

Suggested change

<span class="adg-visually-hidden"> (dialog)</span>

[RA11y1]

The aria-haspopup="dialog" already leads to an announcement by the SR that a dialog will be opened. Therefore the visually hidden span is not needed.

As a side note (longer than I intended... ): visually hidden text is announced extra when using NVDA + FF. In this case I will first get the output "Button Terms and conditions" and when navigating forward one step with the arrow key I will get the second output "Button (dialog)". With around 16% of screen reader users using FF this might be worth taking a closer look.

[RA11y1]

Here as well, NVDA + FF will lead to two separate outputs for the visible and the visually hidden text when navigating with the virtual cursor. An alternative would be to use aria-label, this might have other downsides though (e.g. the aria-label text is not found by browser search, will have to check if and when that would be a problem).

[backflip]

@backflip You mean using invoker commands instead? Good point but it's not for all browsers ready: https://caniuse.com/wf-invoker-commands

@rudigier, we can still use JavaScript to open and close. But everything else can be completely removed unless I'm missing something. Example: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement#examples

[backflip]

@backflip You mean using invoker commands instead? Good point but it's not for all browsers ready: https://caniuse.com/wf-invoker-commands

@rudigier, we can still use JavaScript to open and close. But everything else can be completely removed unless I'm missing something. Example: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement#examples

@rudigier, I think the most future-proof approach would be invoker commands with a polyfill. So no custom JavaScript for opening/closing, just the polyfill which can be reduced at some point in the future.

[rudigier]

@backflip
What I changed:

• Reworked the dialog examples and docs around native , with Invoker Commands (command / commandfor) for open/close where the platform supports it, plus the invokers-polyfill script only for browsers that don’t yet.
• Removed custom open/close JS from the modal and dialog+popover examples; the old script-based modal lives on as custom-modal-dialog (legacy) for reference only.
• Non-modal still has a small script for .show() / toggle and aria-expanded, because Invoker Commands don’t cover .show() yet; close buttons use invokers.
• Renamed native-dialog → dialog-popover, and expanded the main README with a native vs custom matrix and guidance for modal, non-modal, and popover variants.

@RA11y1 Removed some visible-hidden item, improved markup and added new examples to test :)