Impress.Js properly use Tab - javascript

Right now Tab is disabled in Impress.js and just moves to the next slide.
Even if I delete that code and let it behave normally and focus on links it kinda crashes impress.js
Has anyone found a solution to this?
Thank you!

(I maintain a current fork of impress.js, as bartaz has not worked on it for years now, so I'm familiar with the keybindings code as well.)
The answer is that making Tab move to the next slide is the solution, not the problem :-)
More specifically, the problem is that in a browser, the tab key will jump to the "next" link or form field. If the link is outside the current slide, the browser will scroll to wherever the link is, completely breaking the presentation flow. So impress.js needs to disable the tab key.
Instead of disabling it, bartaz then just tied it to the next() function. If you don't want the Tab key to move to the next slide, you can of course remove that code, but you would still have to call event.preventDefault() to avoid the browser from receiving the Tab key.
In my fork of impress.js, I improved the support for using form fields, so that for example if the cursor is in a text input field, and you press left arrow, the presentation will not move to the next slide, rather it will move the cursor in your text field, as normal. But even in this case I've preserved the functionality of the Tab field: it will move to the next slide rather than next form field (or link).
It would be possible, but hard to try to figure out whether the next form field is still on the same slide or not, and then try to decide whether moving to that form field is the right thing to do.
UPDATE: This is the impress.js issue where Tab key is discussed.

Related

How to handle focus and define ARIA roles

In the 1001st implementation of carousel I would like to "properly" handle the focus.
A few quick questions related to UI/UX of this component:
the arrows and the page navigation can accept focus if the TAB key is used. Should I keep the focus on the arrow button after a click event? Is it possible to do it wo calling element.focus() method - like pure HTML/CSS solution?
the page navigation area is suppose to handle the arrow keys inputs - the same question for it: Should I keep the focus once a page navigation button is pressed? Is it doable wo element.focus()? What should be ARIA role for this component?
the design requires 4px height navigation buttons - really hard to click on mobile. In order to make them useable, a div is added as a child of a navigation button so the height of click zone is extended to +20px. Is there better way to extend the "hot zone"?
how can I exclude the additional divs so as not to contribute to area of focus rectangle
Regarding focus, you ask if the focus can be kept on the buttons without using focus(). Absolutely. In fact, when you click on a button, the focus will not move unless you specifically move it or if the element you clicked on gets hidden. So if your desire is to leave the focus on the button, then you don't have to do anything.
That's the preferred behavior - leave the focus on the button. If I'm exploring the carousel slides and I'm a keyboard user, I will navigate/tab to the "next" button and press enter. I'll review the slide and if it's not what I want, I'll press enter again (assuming my focus remained on the "next" button) to see the next slide. If you force the focus to move away from the button and to the carousel content, then I have to navigate back to the "next" button before I can view the next slide. It can be annoying to have to keep navigating back to the element I just selected.
I don't understand your third or fourth questions.
Have you looked at the two W3.org references regarding carousels?
https://www.w3.org/TR/wai-aria-practices/#carousel
https://www.w3.org/WAI/tutorials/carousels/

Performance issues when focusing inputs in modals?

So, I've probably stumbled upon the strangest bug/feature I've ever seen. I've developed a website which helps you read foreign books. See this book (or any book on the website, it doesn't matter): https://anylang.net/en/books/de/heaven-has-no-favorites/read.
Try to quickly move your mouse hovering on words/sentences, maybe click on something etc. Everything should work pretty smooth.
On mouseover a word quickly becomes orange, on click the translation quickly appears etc.
Now click on the login button:
The first input should become focused.
Then close the modal and try the first step again. Everything becomes very laggy. The lags won't disappear no matter what you do, except:
Click on the page number:
Lags disappear. Completely.
The same result (lags) can be achieved by:
Clicking on a word inside a translation tooltip
It has a contenteditable attribute, so the behaviour is exactly the same as in the first case.
Click anywhere outside the tooltip, closing it and causing the lags.
Lags still disappear if you click on a page number (or, probably, any input[type="text"] on the page (but not in modals))
Some things to consider:
The effect doesn't disappear if you lose focuse in a modal and then close it.
The same effect can be achieved by focusing in a modal and then manually removing a modal from dom. So javascript is not the problem.
If you don't remove a modal from dom but apply "display: none" to it instead, everything is ok, no lags.
My guess is that the browser gives higher priority to elements where input[type="text"] is focused and doesn't respect it when an element with the input is removed from dom. Any other ideas? This thing really boggles my mind.
If you do a performance profile of your site while going through this process, you'll see that your memory allocation continues to climb as you interact with the page. You'll also notice that the more text you hover over the worse the lag eventually becomes.
This is indicative of a memory leak in your code - possibly caused by event listeners that aren't being cleaned up properly.
Without an in-depth review of your code it's unlikely anyone here is going to be able to pinpoint where the exact problem is, but hopefully I've pointed you in the right direction!

Scroll to Focused Field Cordova

My Issue
I am currently in the process of writing an application for iOS using Cordova. I have a page with a form on it like so:
When the user taps on a field, the keyboard appears as expected on iOS. However, to prevent my app from moving off the screen, I have enabled the following setting:
// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);
Unfortunately, this prevents a few things that are causing me issues:
When a field is focused, the screen does not scroll to that field so sometimes, the field appears behind the keyboard.
Even if I did have a solution to the above, for the elements that are at the bottom of the screen, I will not be able to scroll down far enough to bring them into view above the keyboard.
My Question(s)
Solution 1
Is there any way, in Cordova, to auto scroll to the focused field without moving the whole app off the screen?
If it is possible, then how can I handle fields that are close to the bottom and cannot be scrolled up any further into view?
Obviously, the first point can be achieved using JavaScript/jQuery and some clever logic with the keyboard_height, position() and scrollTop(). But, this then creates the issue with the second point about the input fields behind the keyboard...
Solution 2
If I apply the following code, it will fix the issue highlighted above, but it will create another issue (explained below):
// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);
Is there anyway to fix my header (the 'Edit Profile' bit), to the top of the screen to ensure that part is always visible?
Use https://www.npmjs.com/package/cordova-plugin-keyboard#keyboardshrinkview and its Keyboard.shrinkView method.

Is there any way to detect a shift-click or control-click when a user clicks the browser action button?

This is a bit of an odd question, but basically, I'm trying to display different pop-up menus to a user depending on how they click my browser action button (the icon to the right of the Omnibar). One way that I thought of doing this is by detecting whether the user is clicking it normally or holding shift as they click it. Is this possible?
If there is no way of doing this, I would appreciate any suggestions as to how to display different menus to the user with a single browser action button. I would rather not make the user select from two options in the actual pop-up window - a single button press would be preferable.
Thanks
Edit: I'm thinking the best way to do this may be to check for the Shift key being pressed using Javascript as soon as the pop-up window is displayed, then display a menu according to that. I'm going to try that and report back.
I've tried for 2 hours, but didn't find a solution, too.
I think it's not possible to capture the click event, which opened the popup.

Pressing both mouse buttons in Opera

In Opera, on some sites, pressing both mouse buttons simultaneously leads you to some other page,
for example, to the separate comments page, when watching a Youtube video.
Or to the sitemap on some other websites.
May be it is related to Mouse chording ? or is it something different ?
How to control this event (disable it or change the destination page) ?
This is one of Opera's shortcuts for quick back/forward navigation. Holding left button and clicking right takes you forward, holding right and clicking left takes you back.
Opera also uses some heuristics to try to guess what the best 'next' link is if a user tries to go 'forward' but there is no page in the navigation history to go forward to. To control this, you can for example use a rel=next LINK tag to point to the next page. This is most convenient if you have, say, an article split across several pages. On the first page you could put
<link rel="next" href="secondPageOfArticle.htm">
To indicate to the browsers (and search engines) what the next part of the article is.

Categories