Related
I have a modal that consists of tab layout to enter some form data. The form is a list of radiogroups that can be quite long.
For a user to get back to the tab, currently they have to shift+tab all the way back through the radio buttons to get back to the tab.
I know escape should close the modal. What is the expected keyboard navigation to return to a tab from a tab panel, so the user doesn’t have to shift tab through all of the radio buttons?
There is no predefined standard keyboard shortcut to go back to a tab control from inside its content.
IN a native app, you can go to next/previous tab with Ctrl+Tab/Ctrl+Shift+Tab or Ctrl+PageDown/Up, or sometimes Ctrl+number.
However, on the web, these shortcuts are of course already taken to control the tabs of the browser itself. You won't be able to intercept them for your own use, and even if you could, it would be a terribly bad idea because you would prevent the user from changing browser tab.
If your modal dialog is so big and so long, maybe you can think about modifying the behavior of the escape key.
On first press, you go back on the tab control, and if you area already on the tab control then it closes the dialog.
The user whould have then to press escape twice to close the dialog completely. This is a change from standard escape behavior, but it's maybe more acceptable than defining a completely new keyboard shortcut that no one will use because it's unknown or they didn't get the information at proper moment or didn't remember about it.
More generally, it's maybe the sign that your UI design is too complicated and that you should simplify it or organize it differently.
What about splitting into different dialogs (e.g. one per tab) ? Making groups that you can expand/collapse ? etc.
A big part of accessibility is also about making things simple. If it's too complicated to do it accessibly, maybe you should simplify.
There is no such keyboard shortcut defined for this action in web applications. If you take a look at the "keyboard interaction" section of the W3's Authoring Practices document on "Tabs":
For the tab list:
Tab:
When focus moves into the tab list, places focus on the active tab element.
When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable.
When focus is on a tab element in a horizontal tab list:
Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
When focus is on a tab in a tablist with either horizontal or vertical orientation:
Space or Enter: Activates the tab if it was not activated automatically on focus.
Home (Optional): Moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
Shift + F10: If the tab has an associated popup menu, opens the menu.
Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted, e.g., the deleted tab was the right-most tab in a left-to-right horizontal tab list, sets focus on and optionally activates the tab that preceded the deleted tab. If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list, the application moves focus to another element that provides a logical work flow. As an alternative to Delete, or in addition to supporting Delete, the delete function is available in a context menu.
Notably absent is any shortcut for the operation you are envisioning. You may look to QuentinC's answer for some alternative solutions from more of a UX perspective.
I have the following conemu GuiMacro's defined
<F9> - Tab(3)
<F10> - Tab(2)
When I press the keys, I see the previous/next tab being highlighted in the tab bar, but the highlighted tab is not being activated - i.e. keyboard input remains in the current tab. I want F10 & F9 to work like CtrlTab and CtrlShiftTab - i.e. the contents of the new tab should be shown and it should receive keyboard input. How would I do that?
May be the Tab() GuiMacro function does what it's supposed to. Looks like there is a distinction between Tab and Console in ConEmu. To do what I want you need to switch console, not tab.
There is a simple workaround. Simply map F9 and F10 to the Switch next console and Switch previous console User hotkeys.
I'm on Chrome Version 41.0.2272.101 m (newest), and this update is messed up. They put it, when you have inspector open, that any DOM change will flash with purple on the changed element (like in Firefox), but now I cannot inspect any hovered object (also like in FF, which is why I don't like to use it when doing front end developing).
I'm talking about js triggered events, like superfish for instance. Before, I could hover the menu, and cover the menu with the inspector, and the menu would stay opened, and I could go in the inspector see what pseudoelements are created, change the paddings and such directly, and see the change. Now, when I hover the menu, and right click to inspect it, the menu closes, and I cannot inspect it!
I tried dragging the inspector over, but nothing helped. This new 'feature' is annoying as hell. Is there a way to inspect js triggered events, without putting break points on elements (which works, but is kinda pain in the ass)?
Hover over the element with your mouse and press F8 (this will only work in Chrome) to pause the script execution. The hover state will remain in visible to you. If you're on a Mac, you may have to open system preferences and check off "Use all F1,F2,etc" check box (Or simply use fn + F8).
Sometimes it only works if you are in the Sources tab of the inspector.
*Yes, you should be in the source tab and MOST IMPORTANT is you should close all the opened tabs in the Sources tab before you press F8(win) or Fn+F8(mac). *
Depending on the menu element type, I ran into this issue with drop-down input menus. The reason it's disappearing when I inspect it, is because a blur or focusout event is always triggered on the element when I click anywhere outside the element.
One way I was able to inspect the element is to prevent these events from being triggered is by removing their event listeners:
Inspect the input element on Chrome
Go to the Event Listeners tab and remove the blur or focusout event
Once the event listeners are removed, you can open the menu and inspect it without disappearing
In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:
then find & check the "Emulate a focused page" option.
Update: as noted in comments, this option is now in another place. See this answer.
On Mac, you can press cmd+\ to pause the script after having opened the dropdown. You can then use shift+cmd+c to inspect elements.
Adding to "In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:" above;
In Chrome 86 and above you can find "Emulate a focused page" option here:
DevTools >> Elements >> "Kebab" menu (3 vertical dots by the settings cog) >> More tools >> Rendering.
Alternately: With Devtools open: Hit CTRL/CMD+SHIFT+P to open the command menu HUD, enter "emulate a fo" to narrow the search results and enter (or click) to toggle the setting.
Now, when I hover the menu, and right click to inspect it, the menu
closes, and I cannot inspect it!
I faced the same issue and what I used was Expand recursively option on chrome dev tools:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:
In Firefox
In Inspector, right click on a node that contains the dropdown, select:
Break on... > Subtree modification
This will pause execution the moment dropdown is... well... dropped down.
Only way that would work for me was doing setTimeout(() => { debugger }, 3000) in the console and opening the dropdown while timeout was running.
Pressing pause button in dev tools UI or F8 key to pause script execution would both close the menu.
I just used emulate a focused page and it worked like a charm
go to settings
go to more tools
find Rendering
find "emulate a focused page" and click the radio button
voala now you can inspect your select element
You can set an interval that writes out the content of a given element in the JS console every second. Drop this in the console and open the dropdown.
setInterval(() =>
console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)
None of the above referred remedies worked for me.
As our drop down (React based) will close on any single click (right or left)
So we found out the below workaround:
In Chrome Open developer tools
first click on the drop-down in collapsed state & let it expand with options
then under the element section, right-click on the div node (make sure not to left click before right clicking), which contains details of the drop-down items
Then select option 'Expand Recursively'
Then required details were shown
I think you can use the CSS Editor in Chrome to apply a state, for instance, the state of 'hover'.
In the Developer Tools, you select an element. On the right hand you have a square with an arrow over it. Click that and you can choose a state. For instance, pick hovered and you'll see both your window and your CSS update as if the element is being hovered right now.
On Windows, press F12 first, at the page with the menu, then point your mouse to the element menu (the menu will drop down), then press CTRL + Shift + C. Now you can inspect all the elements.
in my case i do following steps
Open developer tool or inspect page
click three dot button at top right
click on More tools -> Rendering
then check on Emulate a focused page option.
I have a tabbar in my trigger.io app and currently have the setactive parameter set on the function element for each tab, so when selecting a tab it highlights the tab. While this works as expected I noticed if I go back using the back button on android or a built in soft button in app
( history.back() )
The highlight is lost. Now I understand why it would get lost as its only explicitly told to highlight when tapped but I was wondering if there is a way to programmatically trigger the highlight or active state so when I navigate between tabs and use the back button it will keep the highlighted state properly for each tab section?
Easiest would probably to add an event listener to update the button state with:
forge.event.backPressed.addListener(callback, error)
Also see: https://trigger.io/docs/current/api/core/event.html
Short version: new tabs in Chrome prevent old tabs from being used, fixing that means that opened tabs with PDFs in them get reused before a human can examine the PDFs.
Long version:
Originally it worked like this:
open new Chrome window to main page of the app (tab #1)
2.[do process A and then] click the button and a new tab (tab #2) opens with PDF A in it.
Go back to tab #1 [do process B and then] click the button and a new tab (tab #3) opens with PDF B in it.
Go back to tab #1 [do process C and then] click the button and a new tab (tab #4) opens and Word document C document gets downloaded.
Go back to tab #1 [do process D and then] click the button and a new tab (tab #5) opens and Word document D document gets downloaded.
All tabs stay open and PDFs can be viewed. Not perfect, but workable.
But then things changed. I pulled frequently used stuff out, put them in methods in another file so all of the various tests could use them, which seemed like a good idea. But that seems to have caused problems with losing focus on the original window. (I may be wrong) now I'm stuck with:
open new Chrome window to main page of the app (tab #1)
[do process A and then] click the button and a new tab (tab #2) opens with PDF A in it.
Stay in tab #2 [do process B and then] click the button and a new tab (tab #3) opens with PDF B in it. PDF A is now lost
Stay in tab #3 [do process C and then] click the button and a new tab (tab #4) opens and Word document C document gets downloaded. PDF B is now lost
Stay in tab #4 [do process D and then] click the button and a new tab (tab #5) opens and Word document D document gets downloaded.
This was caused by using "b.windows.last.use"
So I tried using "b.windows.first.use"
But that fails, because focus isn't going back to tab #1, and watir can't find the object in the modal that it needs to click.
(in `assert_ok': Element is not clickable at point (737.5, -373) (Selenium::WebDriver::Error::UnknownError))
So far as I can tell, I would be fine if I could do any one of the following
get PDFs to download. I cannot. This page seemed promising, but the code didn't work and I couldn't fix it.
get watir to go back to the first page, "for realsies", and find the buttons it needs
perhaps open a new tab for every section of the test (I'm going to look into this one, but I'm not overly hopeful)
Any ideas?
I updated Watir and Ruby both within the last two months. I'm using Chrome on OSX. Moving to Windows or IE are not viable options.
Here is a section of the code. No, I'm not a programmer first and foremost.
Thanks.
currenturl = "stackoverflow.placeholder.com/works"
# print Inventory Report .PDF (document 1)
b.goto currenturl
b.div(:id, 'page').a(:text, 'Inventory Report').click
sleep 1
b.div(:id, 'printInventoryReportModal').a(:text, 'A4').click
b.link(:id => "submitBTNprint-inventory-report").fire_event "onclick"
# print General List .PDF (document 2)
b.goto [main page URL]
b.div(:id, 'page').a(:text, 'General List').click
sleep 1
b.div(:id, 'printGeneralInventoryListModal').a(:text, 'A4').click
b.link(:id => "submitBTNprint-general-list").fire_event "onclick"
# print General List .DOC (document 3)
b.goto [main page URL]
b.div(:id, 'page').a(:text, 'General List').click
sleep 1
b.div(:id, 'printGeneralInventoryListModal').a(:text, '.DOC').click
b.div(:id, 'printGeneralInventoryListModal').a(:text, 'A4').click
b.link(:id => "submitBTNprint-general-list").fire_event "onclick"
It seems mostly that the browser.window function is not working the way you expect, or you are not using it properly. Since your question currently contains very little in terms of examples of how you are trying to change windows (tabs) it's very difficult to tell what you might be doing wrong.
To start with I would use IRB to do some exploring and troubleshooting
Get into IRB, then use
require 'watir-webdriver'
b = Watir::Browser.new :chrome
Now manually navigate the browser window that opens and get it into the state where you have multiple tabs open
Now try something like this in IRB to see if you can get it to spit out window titles
b.windows.each {|window| puts window.title}
If the titles are different, then you should be able to use that to set which window you want to use. If they are not different you will need to look at other attributes to see if there is an easy way to identify which window you want. (or maybe just use :index)
Try below code,
sleep (2)
#browser.driver.switch_to.window(#browser.driver.window_handles[put_your_index])
#browser.window(:title,"Please put your title here").use do
end
#browser.button.when_present.click
when you want to want to switch back to your actual window, use the
same code as above and change the window index accordingly.
For an example, if parent window index is 0 and then child window index would be 1