Re: [EXTERNAL] Re: Toast messages with links

There's a can of worms in dealing with something like this which you want to move focus to when it appears. When it closes, either by the user pressing a close button or by it autoclosing after a timeout, you nearly always want to put focus back where it was.

The 'thing' may be positioned in the DOM at the end of the page or according to its visible position on the page or next to where focus was when it appeared. But in all cases, you will have to programmatically move focus when it disappears (and the browser may move focus to the body anyway if you remove this thing from the DOM).

If it persists without auto closing and the user doesn't close it then this positioning has an impact on subsequent reading order and focus order which may no longer be logical.

If it auto closes then you have a big headache because if, for example, the user didn't do anything while it was open except maybe read it, then it closed, you would want focus to be back where it was. But if the user moved somewhere else on the page before it closed you definitely wouldn't want to drag them back to where they were some time ago. So the combination of autofocus and autoclose is a big no no.

Mark
________________________________
From: Patrick H. Lauke <redux@splintered.co.uk>
Sent: Wednesday 14 June 2023 11:33
To: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: [EXTERNAL] Re: Toast messages with links

On 14/06/2023 10:33, Jan Enning wrote:
> I'm working on toast messages.
> They pop-up on the screen when background tasks are done etc.
> They have aria-live=polite, so far so good.
>
> But inside the toast content there are links. Those will be read out by
> the SR. The only thing is the focus does not go to the toasts as the
> user is filling in a form field while the toast pops-up. Making clicking
> the links with a SR impossible.
>
> So my recommendation would be "No links / buttons / interactive
> elements" inside toast content.
> Would that be a good assumption?

"Pure" toasts just provide a short notification, without any action
expected to be taken by the user. In those cases, using aria-live is
appropriate ... it will announce the message, but leave the user's focus
where it is.

If the expectation is that the user will want/need to action anything
inside there, it's best not to treat them as classic toasts, but to
actually move focus to them (and making sure they don't randomly
disappear from under the user's focus).

P
--
Patrick H. Lauke

https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.splintered.co.uk%2F&data=05%7C01%7CMark.Magennis%40skillsoft.com%7C320ca6531c7d475b4ba908db6cc2e4e3%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638223356557806199%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Ur0gWfwim883Bh9%2FHBx0y%2Bu61o2gf1p2d8Q0tGNRPa0%3D&reserved=0<https://www.splintered.co.uk/> | https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fpatrickhlauke&data=05%7C01%7CMark.Magennis%40skillsoft.com%7C320ca6531c7d475b4ba908db6cc2e4e3%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638223356557806199%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=XCuAXBxaxK%2FcRd7xuKngqqBc9fLkTvrBr4Ji5mpi9mI%3D&reserved=0<https://github.com/patrickhlauke>
https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fflickr.com%2Fphotos%2Fredux%2F&data=05%7C01%7CMark.Magennis%40skillsoft.com%7C320ca6531c7d475b4ba908db6cc2e4e3%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638223356557806199%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=L0s70OLqn6l4z%2B%2Fmk58uwvIOft7%2FuJqwIDDBPuiZaX0%3D&reserved=0<https://flickr.com/photos/redux/> | https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.deviantart.com%2Fredux&data=05%7C01%7CMark.Magennis%40skillsoft.com%7C320ca6531c7d475b4ba908db6cc2e4e3%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638223356557806199%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=6VknN%2B2AY%2BPfC0OB65M%2BDVQeiHZZ2sbuezPZyDZU7VA%3D&reserved=0<https://www.deviantart.com/redux>
https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fmastodon.social%2F%40patrick_h_lauke&data=05%7C01%7CMark.Magennis%40skillsoft.com%7C320ca6531c7d475b4ba908db6cc2e4e3%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638223356557806199%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=18ZqRmpa%2FPBuNFLmb0KTTntwFwTD2JVBWjn3qdTCMbI%3D&reserved=0<https://mastodon.social/@patrick_h_lauke> | skype: patrick_h_lauke