-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Keyboard traps on some blocks when keeping the Tab key pressed #2277
Comments
I think this depends also on how each browser handles tabbing. Can always reproduce on macOS latest Chrome, ranndomly on Safari, doesn't happen on Firefox. |
Can you still reproduce this in Gutenberg 2.6? |
I've tested on all browsers I can test with (also on Windows) and couldn't reproduce any longer. Only IE11, tabbing in the demo content, gets stuck on the last block: the one that uses the "wave" emoji 👋 That's probably unrelated so yeah I think this can be closed. @SuperGeniusZeb thanks for testing. One issue less 🙁 |
Note: I guess the problem with IE 11 and the "wave" image in the last paragraph is because IE11 considers images in a contenteditable element as contenteditable themselves: it focuses the images, applies the resize handlers and there's no way to tab away.
This could be an issue with images nested within paragraphs. |
* Update gutenberg submodule ref * Re-enable list spaces test * Update gutenberg submodule ref * Display radial gradient in block which supporting gradients (#2266) * Update Aztec to version 1.19.2 * Commit hermes locally so we can build gutenberg using jitpack without installing all dependencies * Remove hermes headers * Update gutenberg ref before merge * yarn version to 1.29.0 * Fix release note formatting * Update to official version of Aztec * Merge pull request #2322 from wordpress-mobile/issue/update_aztec_to_1.19.2 Update to official version of Aztec 1.19.2 * Update podfile.lock file. * Fix link insertion at start of lists. * Update github actions/cache to v2 * Only run gallery e2e tests * Update version to 1.28.2 * Update bundles. * Try different jest config * Add 1.28.2 release note * Try different jest config * Add logs * Update GB reference. * Revert "Add logs" This reverts commit 823d9bd. * Add log * Revert "Add log" This reverts commit f684dc3. * Add package-lock.json changes after npm install * Force exit jest after all tests have completed running * Update bundles * Update podfile.lock * Remove Keyboard.dismiss when deleting block (#2327) * Update ref * Update ref to point to master * Update GB reference. * Adjust how we're oulling theme elements from the bundle * Update GB reference. * Update bundles. * Update list spaces test to not be canary test * Update gutenberg submodule ref * Update bundles * Update bundle * Fix: Button crash (#2332) * Update GB reference. * Update gb reference * Update bundle files * Update gutenberg ref * Resolve Podfile.lock conflict * Update .gitignore * Update bridge build * Update podfile. * Fix link error in react-native-bridge/package.json * Fix react-native entry in @wordpress/react-native-bridge package.json * Update gutenberg ref * Remove unused commands and update clean commands * Add RNGetRandomValuesPackage to WPAndroid glue code * Update working directory for npm related bridge commands * Add contributing file. * Decrease sleep time for android recording process * Disable npm cache for android and ios runners * Re-enable npm cache but use exact key for restore * Use underscores with code of conduct file * Update package-lock.json by re-adding react-native-editor to bust npm cache * Remove nvm step from iOS runner * Update bundle * Decrease sleep time for android recording process * Ignore and log android screen recording errors * Update GB reference. * Remove unused imports * Update release notes and update gutenberg reference * Recreate bundle * Remove unnecessary patch files * Try setting max worker to 2 to avoid error 137 on circle CI * Update GB reference. * update ref * Update version to 1.29.1 * Update gutenberg submodule ref * Update GB reference. * Update bundles. * Allow unsupported blocks to be edited on mobile (#2063) Unsupported blocks can now be edited through a web view which utilizes the Gutenberg web editor. This is only available on development builds Co-authored-by: Eduardo Toledo <[email protected]> Co-authored-by: Marko Savic <[email protected]> Co-authored-by: Paul Von Schrottky <[email protected]> * Update GB reference. * Update GB reference. * Update GB reference. * Sort the release notes in the correct order. * Update GB reference. * Add release checklist * Update GB reference. * Update the VS code search settings to that seaching is easier * Update version number * Update Aztec-iOS instructions to reference ReleaseProcess.md file wordpress-mobile/AztecEditor-iOS#1294 * Update bundles * Added reference to release checklist template to template * Remove info about bumping the version when not releasing * Update release notes. * Setup handshake mechanism for gutenberg bridge * Simplify handshake * Updated commands in README.md * Adjust call for replaying events to call super to avoid the custom logic on the instance * Revert unneeded changes and remove mocked event * Update GB reference. * Update bundles. * Bump the version of the gutenberg that contains the fix * Update to the latest version of the gutenberg submodule. * Update gutenberg regerence * Update bundle * Update bridges methods to receive HTML content information metrics. * Rename content info variables. * Link wordcount package. * Update to exclude the whole `bundle` folder * Only exclude the App.js and App.js.map build files. * Use Kotlin in react-native-gutenberg-bridge * Use Xcode version 11.4.1 when running e2e tests * Update package-lock.json * Android implementation of the bridge. * Add queue for deferred events * Split and rename media upload message interfaces * Implement a deferred event emitter * Update release notes. * Show all available information. * Fix type gutenber => gutenberg * Remove the gutenberg core build files since they should be ignored by default. * Display block count information. * Update GB reference. * Adjust threading and method for queue * Revert gutenberg change * Trigger getting content and info * Update RELEASE-NOTES * Send non-critical messages safely from deferred event emitter * Bump gutenberg version * Bump gutenberg version * Rerun bundle * Refactor decoding step to an extension for ContentInfo * Update format for content info. * Move Gutenberg WebView related files to rn-gutenberg-bridge folder * Update Android assets symlink to new assets folder * Update GB reference. * Adjust notification name to use existing extensions * Update GB reference. * Update GB reference. * Update GB reference. * Update bundles to support content structure on HTML request. * Rename yarn_install to npm_install * Radial gradient infrastructure (#2277) * Fix react-native-bridge podspec * Update to the latest gutenberg * Simplify react-native-editor sass-transformer * Fix react-native-bridge import * Delete already deleted Media.java from react-native-bridge * Fix lint erros * Adjust optionality * Fix duplicate kotlin_module error * Rename interfaces in demo app * Add release note * Update package-lock.json * The RN dep lives in the devDependencies section * The gb-mobile root is now two more folders app since the bridge code got two folders inside the gutenberg/packages folder. * Fix gutenberg-web-single-block symlink for unsupported blocks * react-native-recyclerview is not used anymore * Remove react-native-editor/bin folder * Remove mentions of yarn, build is via npm now * Use npm ci for reproducible builds * [Fix] Columns block renders more than two columns in a row when launching in landscape mode (#2407) * fix columnsInRow on init and some performance improvements * update ref: rename getColumnWidth to contentStyle * update ref to master * Revert "Use npm ci for reproducible builds" This reverts commit 6f7b9e5. * Use latest node lts and npm versions * Update react-native-bridge gradle script's path to root Also added a check to insure that this kind of mistake gets caught quickly in the future since otherwise it only reveals itself at runtime. * Update bundleUpToDateCheck task to handle monorepo changes * Check .scss files for changes * Ignore changes to bundle directory and its subdirectories when doing up-to-date check * Only check package.json for dependency changes * Fix formatting * Remove feature branch trigger from Travis CI * Resolve merge issue in design doc * Resolve merge issue in link-control/index.js * Resolve merge issue in navigation-link/editor.scss * Remove renamed angle-picker folder * Update react-native-aztec README * Remove react-native-aztec LICENSE file in favor of the repo's own license * Update react-native-bridge README * Delete GitHub issue and PR templates from react-native-editor * Remove react-native-editor CONTRIBUTING file in favor of the repo's own one * Remove react-native-editor LICENSE file in favor of the repo's own license * Update react-native-editor README * Remove top-level react-native script * Update babel-jest to version 25.3.0 * Print message during execution instead of configuration * Give more descriptive name to mobile gutenberg path variable * Update packages/react-native-editor/README.md Co-authored-by: Greg Ziółkowski <[email protected]> * Update packages/react-native-editor/README.md Co-authored-by: Greg Ziółkowski <[email protected]> * Update .editorconfig to use spaces in files for Android * Delete both node_modules folder when cleaning * Extract file object construction out of loop * Declare node modules folders at single location * Add .npmrc files in react-native-* packages Co-authored-by: Matt Chowning <[email protected]> Co-authored-by: Luke Walczak <[email protected]> Co-authored-by: Sergio Estevao <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]> Co-authored-by: Chip Snyder <[email protected]> Co-authored-by: Chip <[email protected]> Co-authored-by: Dratwas <[email protected]> Co-authored-by: etoledom <[email protected]> Co-authored-by: Eduardo Toledo <[email protected]> Co-authored-by: Marko Savic <[email protected]> Co-authored-by: Paul Von Schrottky <[email protected]> Co-authored-by: Enej Bajgoric <[email protected]> Co-authored-by: Cameron Voell <[email protected]> Co-authored-by: Matthew Kevins <[email protected]> Co-authored-by: Stefanos Togkoulidis <[email protected]> Co-authored-by: Matthew Kevins <[email protected]> Co-authored-by: Greg Ziółkowski <[email protected]>
Keeping the Tab key pressed is a common way to quickly navigate through focusable elements in a page when using only the keyboard. That's a native behavior and should work in any web application.
However, when keeping the Tab key pressed, there's a weird effect on some blocks where tabbing enters in a sort of "loop", I guess because of timings and the non-native focus management Gutenberg does.
This is particularly noticeable on the cover image block and in the image block, but I have been able to reproduce it randomly on other blocks too, for example the paragraph block.
To better illustrate the issue, I've made a short video (25 seconds) of what happens on current master: https://cloudup.com/c8n7UoQGBaZ
The text was updated successfully, but these errors were encountered: