-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[url_launcher][web] Link should work when triggered by keyboard #6505
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Thanks for adding this! Small question about attaching the keydown listener to the window, instead of the link element (or the view of the Widget)
packages/url_launcher/url_launcher_web/example/integration_test/link_widget_test.dart
Outdated
Show resolved
Hide resolved
@@ -192,6 +208,27 @@ class LinkViewController extends PlatformViewController { | |||
await SystemChannels.platform_views.invokeMethod<void>('create', args); | |||
} | |||
|
|||
void _onDomKeydown() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this method need to check if the keydown is "enter", "space" or something like that? This'd trigger the link pressing any key, right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't want to assume what keys the framework and/or app are using as a trigger for the link.
As I explained in the PR description, there are 2 conditions that have to be met in order for the link to navigate. The code in _onDomKeydown
is only one part. The other part is the app/framework calling followLink
when they decide that the key should trigger the link. Here's roughly the sequence of events:
- User tabs through the app until the focus reaches the button wrapped by the Link widget.
- (Keep in mind that this tabbing is happening purely in the framework; the browser has no idea what's focused)
- User hits "Enter".
- The framework received the keydown event.
- It decides to trigger the
onPressed
on the button (because the button has focus). - The button's
onPressed
callback leads to a call to the Link'sfollowLink
. followLink
callsLinkViewController.registerHitTest
which sets_hitTestedViewId
to the Link's platform view ID.
- It decides to trigger the
- The
LinkViewController
also receives keydown event.- It checks if
_hitTestedViewId
is already set (indicating that the framework already decided to trigger the link). - If
_hitTestedViewId
is set, it navigates to that Link's URI.
- It checks if
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(This should be part of the documentation of the widget :P)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added as comments to the _onGlobalKeydown
method since that's where this information is relevant.
flutter/packages@6698b2d...90c876d 2024-04-16 49699333+dependabot[bot]@users.noreply.github.com Bump github/codeql-action from 3.24.10 to 3.25.0 (flutter/packages#6545) 2024-04-16 31859944+LongCatIsLooong@users.noreply.github.com [CupertinoIcons] fix broken icons and vertical alignment, bump the version to 1.08 (flutter/packages#6520) 2024-04-16 26625149+0xZOne@users.noreply.github.com [video_player] Calls `onDestroy` instead of `initialize` in onDetachedFromEngine (flutter/packages#6501) 2024-04-15 mikemcguiness@protonmail.com [image_picker] Adopt code excerpts in README (flutter/packages#5523) 2024-04-15 mdebbar@google.com [url_launcher][web] Link should work when triggered by keyboard (flutter/packages#6505) 2024-04-15 engine-flutter-autoroll@skia.org Manual roll Flutter from 53cba24 to 2e748e8 (19 revisions) (flutter/packages#6541) 2024-04-15 stuartmorgan@google.com Update local_auth_android minSdkVersion to 19 (flutter/packages#6537) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages-flutter-autoroll Please CC flutter-ecosystem@google.com,rmistry@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
flutter/packages@6698b2d...90c876d 2024-04-16 49699333+dependabot[bot]@users.noreply.github.com Bump github/codeql-action from 3.24.10 to 3.25.0 (flutter/packages#6545) 2024-04-16 31859944+LongCatIsLooong@users.noreply.github.com [CupertinoIcons] fix broken icons and vertical alignment, bump the version to 1.08 (flutter/packages#6520) 2024-04-16 26625149+0xZOne@users.noreply.github.com [video_player] Calls `onDestroy` instead of `initialize` in onDetachedFromEngine (flutter/packages#6501) 2024-04-15 mikemcguiness@protonmail.com [image_picker] Adopt code excerpts in README (flutter/packages#5523) 2024-04-15 mdebbar@google.com [url_launcher][web] Link should work when triggered by keyboard (flutter/packages#6505) 2024-04-15 engine-flutter-autoroll@skia.org Manual roll Flutter from 53cba24 to 2e748e8 (19 revisions) (flutter/packages#6541) 2024-04-15 stuartmorgan@google.com Update local_auth_android minSdkVersion to 19 (flutter/packages#6537) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages-flutter-autoroll Please CC flutter-ecosystem@google.com,rmistry@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
…ter#6505) ### Background You can think of the `Link` widget (on the web) as two components working together: 1. The `<a>` element created by the `Link` widget. This is essential to make all browser interactions feel natural (e.g. context menu, cmd+click, etc). 2. The children of `Link` widget. These are the widgets visible to the user (e.g. a button or a hyperlink text) and the user can interact with them the same way they would interact with any Flutter widgets (focus, pointer click, etc). In order for the Link widget to navigate to a URI, the two components from above have to indicate their intent of navigation: 1. Some widget has to call `followLink` to indicate that the click successfully landed (i.e. hit tested) on it. E.g. if it's a button, then the `onPressed` callback should lead to a call to the Link's `followLink`. 2. The `<a>` element also has to receive an event to initiate the navigation. ### The PR We used to only handle click events on the `<a>` element, and no handling for keyboard events was present. So when a user tabs their way to the Link, then hits "Enter", the following happens: 1. The focused widget (e.g. button) that received the "Enter" will correctly indicate its intent to navigate by calling `followLink`. 2. The intent from the `<a>` element is lost because we were only handling clicks and not keyboard events. This PR adds handling of keyboard events so that it works similar to clicks. Fixes flutter/flutter#97863
…ter#6505) ### Background You can think of the `Link` widget (on the web) as two components working together: 1. The `<a>` element created by the `Link` widget. This is essential to make all browser interactions feel natural (e.g. context menu, cmd+click, etc). 2. The children of `Link` widget. These are the widgets visible to the user (e.g. a button or a hyperlink text) and the user can interact with them the same way they would interact with any Flutter widgets (focus, pointer click, etc). In order for the Link widget to navigate to a URI, the two components from above have to indicate their intent of navigation: 1. Some widget has to call `followLink` to indicate that the click successfully landed (i.e. hit tested) on it. E.g. if it's a button, then the `onPressed` callback should lead to a call to the Link's `followLink`. 2. The `<a>` element also has to receive an event to initiate the navigation. ### The PR We used to only handle click events on the `<a>` element, and no handling for keyboard events was present. So when a user tabs their way to the Link, then hits "Enter", the following happens: 1. The focused widget (e.g. button) that received the "Enter" will correctly indicate its intent to navigate by calling `followLink`. 2. The intent from the `<a>` element is lost because we were only handling clicks and not keyboard events. This PR adds handling of keyboard events so that it works similar to clicks. Fixes flutter/flutter#97863
Background
You can think of the
Link
widget (on the web) as two components working together:<a>
element created by theLink
widget. This is essential to make all browser interactions feel natural (e.g. context menu, cmd+click, etc).Link
widget. These are the widgets visible to the user (e.g. a button or a hyperlink text) and the user can interact with them the same way they would interact with any Flutter widgets (focus, pointer click, etc).In order for the Link widget to navigate to a URI, the two components from above have to indicate their intent of navigation:
followLink
to indicate that the click successfully landed (i.e. hit tested) on it. E.g. if it's a button, then theonPressed
callback should lead to a call to the Link'sfollowLink
.<a>
element also has to receive an event to initiate the navigation.The PR
We used to only handle click events on the
<a>
element, and no handling for keyboard events was present. So when a user tabs their way to the Link, then hits "Enter", the following happens:followLink
.<a>
element is lost because we were only handling clicks and not keyboard events.This PR adds handling of keyboard events so that it works similar to clicks.
Fixes flutter/flutter#97863