add autofocus to fix a11y issue with dialog

[DBowen33]

Add autofocus=true to first TextButton in dialog so that focus automatically goes to an interactive element when dialog is opened.

Before: https://screencast.googleplex.com/cast/NTYxNTczMTk2MDk3MTI2NHxlMjAyOTMzZi1lNw
After: https://screencast.googleplex.com/cast/NTk1NzMxNjYxNTYwMjE3NnxlYWNlM2Q1MC1jYw

fixes b/338656477

NOTE: This would be a good candidate to update the documentation for Dialogs and TextButtons to encourage the user to add autofocus=true on at least one button so that focus automatically goes to an interactive element instead of the actual Dialog element.

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• I followed the breaking change policy and added Data Driven Fixes where supported.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[chunhtai]

The correct behavior is to focus on the first item in screen order when a new page or dialog is pushed, which is the "This is a typical dialog".

I am not sure if this is possible for web though.

[chunhtai]

cc @yjbanov I think this should be the default behavior, but I remembered you mention web engine had trouble detecting a new page is pushed

[DBowen33]

The correct behavior is to focus on the first item in screen order when a new page or dialog is pushed, which is the "This is a typical dialog".

I am not sure if this is possible for web though.

In most cases, yes this is the correct behavior. According to APG, the initial focus can be variable depending on the circumstance of the dialog and what makes most sense for the user. Since this is a simple dialog that conveys information to a user, focus should be set on the first focusable element of "Ok"

An example can be seen at this link:
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/

Once at the page click on the "Add Delivery Address" button and once the dialog is open, click "Add" at the bottom. Notice that initial focus is set on the OK button, which is the last focusable element. This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.

Due to the variability in interactive elements that can be in a dialog, initial focus is variable and it sounds like it's really up to the developer to know which initial focus use case is best.

However, I believe in this case in particular for the dialog testing, initial focus should be put on the "Ok" button.

[chunhtai]

thanks for explanation, I am ok with using auto focus to get around the current behavior.

However, the current behavior is not ideal, looks like it doesn't focus anything. Looking at the semantics tree from the browser devtool, it seems like it is not generating a dialog div. This is something we should look into cc @yjbanov, but not necessary in this pr.

[chunhtai]

filed #153791

[chunhtai]

LGTM