When I put a focusable element in the shadow DOM, OSX Safari doesn't include it in the tab sequence (unlike all other browsers). The button is visible, clickable but not accessible for keyboard users. Is this a known bug? Is there a way to handle it besides making the component tabbable and forwarding focus (which seems kind of gross)?
Here's what a minimal example looks like in Safari's console
<div class="host">
Shadow Content (Open)
<button>Click me</button>
</div>
I created this example by calling .attachShadow({"mode": "open"}) on div.host then setting its .shadowRoot.innerHTML to "<button>Click me</button>"
I'm having this issue in components I created. I tested the example above in Chrome and the button is included in the tab sequence as expected.
Safari doesn't enable tab navigation by default, it must be enabled via preferences.
Tab highlights the next text field or pop-up menu. Tab also highlights
buttons and other controls if “All controls” is selected in the
Shortcuts pane of the Keyboard pane of System Preferences.
Option-Tab highlights the same items as Tab plus all other clickable
items.
To swap the behavior of Tab and Option-Tab, turn on “Press Tab to
highlight each item on a webpage” in the Advanced pane of Safari
preferences.
https://support.apple.com/guide/safari/keyboard-and-other-shortcuts-cpsh003/mac
When I click Option-Q on an identifier to display the Quick-Documentation Popup instead of it showing up in a small dialog directly above the identifier it is showing in a large separate panel to the left.
This is suboptimal because the content is not where I wanted to look for it and because the new panel overlays the entire right side of the editor panel (and its contents).
Is there a Preferences setting for getting this to be a popup again?
Aha! There's a configuration menu that can be accessed by Right clicking on the top bar of the tool window. The first option Open as Popup is the one I wanted:
What is the simplest way to create Opera addon with such functionality: user selects text on the page (eg. menu), clicks right button and sees:
?
You should use the Context Menu extension APIs.
I use Selenium to test some web-product in my company.
Product has button, which open dialog to choose color. I think it's created using 'extJS' (I'm not so sure).
But then i click to any part of that button, using Webdriver, it's always just set current selected color, but newer opened dialog window to select color.
I found similar button on some random site, which has similiar behavior.
Link to site with button on developer.yahoo.com
So in source of the page you can see, that there is no specific element for right part of button, with down-oriented arrow.
So xPath
//*[#id='color-picker-button']
describe button in all,right part and left part.
But every child element of this describe only left part of this button, so right part with arrow has no any specific xPath to click in my WebDriver text.
I also tried things like
driver.action.move_to(element, coordinate_right, coordinate_down).perform
but it has no effect for me.
So in general my question is :
How to open color selector window on that Yahoo page
Use the SendKeys() method and send the "down arrow" key to the control (C#):
element.SendKeys(Keys.ArrowDown);
That should open it right up.
I've been using Chrome and am going back and forth between switching to Safari or staying with Chrome. My one small issue with Safari though is that the web inspector always shows up in a new window every time I toggle it. I press Command-Option-I and it opens in a new window and when I press Command-Option-I again it does not go away. I love the way the web inspector functions in Chrome and am wondering if there's a way to run the same way in Safari.
Any thoughts are greatly appreciated. Thanks!
I have had the issue for a long time. Here is the solution.
Right-click on a web page and select inspect element.
The console window appears in Fullscreen. Minimize the window like any Safari web page and it should a window like below.
Just above the 'Elements' tab, you should be able to see 2 icons. Clicking the icon on the left, opens the Console in right side of the browser and clicking the icon on the right, opens the Console in bottom of the browser
Hope this helps.
None of the methods upon are working for me (Safari 9.1), if you want to make the docking buttons of the inspector showing up:
open Terminal
type defaults read com.apple.Safari "__WebInspectorPageGroupLevel1__.WebKit2InspectorStartsAttached"
Once you checked if it returns 0,
do:
defaults write com.apple.Safari "__WebInspectorPageGroupLevel1__.WebKit2InspectorStartsAttached" 1
It's a bug in the Safari codebase.
Here is the bugreport and they're working on it (source)!
You could press the leftmost button at the Inspector's status bar and Inspector will dock.
UPDATE: Now, the button is on the right. When Inspector is in a separate window, the two small buttons in its upper right corner make it move to the 1) bottom of the Safari window 2) right side of the Safari window.
The only method that seemed to work for me was to resize the browser to a big enough size that it was big enough to contain the smallest size of an individual Inspect window. This for me, was widening the browser to at least around 65% percent width of the screen, and then you can "Inspect Element" and the default would be that the Inspect window would be at the bottom of the browser, and the browser with the Inspect window in it is resizable to any size now. Hope this helps some people.
Follow these steps to fix safari issue
Go to Develop --> User Agent --> Safari --> Select iphone --> then click on right side top symbol...
Select it and do inspect then you can see the button on left side top corner.
Now set to default setting by redoing the first point.
Please follow the step
Try clicking as shown:
I hope you get as shown:
I noticed when you have an open tab like the start page, the web inspector will pop up in a separate window. Also, there are no icons in the web inspector to attach it to the bottom or side. If you have a webpage open and do the same thing in the same window, that tab will have the web inspector attached to the bottom of the page (or whatever your attachment selection was prior).