Skip to content
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

Closed
afercia opened this issue Aug 7, 2017 · 4 comments
Closed

Keyboard traps on some blocks when keeping the Tab key pressed #2277

afercia opened this issue Aug 7, 2017 · 4 comments
Labels
[Type] Bug An existing feature does not function as intended
Milestone

Comments

@afercia
Copy link
Contributor

afercia commented Aug 7, 2017

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

@afercia afercia added the [Type] Bug An existing feature does not function as intended label Aug 7, 2017
@afercia afercia changed the title Keyboard traps on some blocks safarwhen keeping the Tab key pressed Keyboard traps on some blocks when keeping the Tab key pressed Aug 7, 2017
@afercia
Copy link
Contributor Author

afercia commented Aug 7, 2017

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.

@karmatosed karmatosed added this to the Merge Proposal milestone Jan 25, 2018
@ZebulanStanphill
Copy link
Member

Can you still reproduce this in Gutenberg 2.6?

@afercia
Copy link
Contributor Author

afercia commented Apr 12, 2018

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 🙁

@afercia afercia closed this as completed Apr 12, 2018
@afercia
Copy link
Contributor Author

afercia commented Apr 12, 2018

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.
I initially thought it was happening because the emoji in the demo content is a SVG but it happens with all images. Some simple content like the following, triggers the IE11 behavior:

<!-- wp:paragraph -->
<p>Image: <img alt="" src=".../my-jpg.jpg" /></p>
<!-- /wp:paragraph -->

This could be an issue with images nested within paragraphs.

ceyhun pushed a commit that referenced this issue Jun 18, 2020
ceyhun added a commit that referenced this issue Jun 23, 2020
* 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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

3 participants