I've made a couple small Safari extensions. For one of them, I would like to collect a set of user-entered strings (e.g., URLs or URL patterns) using a textarea in the settings screen. The only setting types offered in the documentation are one line text, check box, slider, select lists, and radio buttons. I could use a one line text field as an ugly workaround, but I'm hoping there's a better option. I've googled for hints and looked through Safari extensions in GitHub, but haven't found an example of anyone doing this yet.
Does anyone have an example of how to use a textarea for a Safari extensions setting? Is there an undocumented feature I've not been able to find? Or is there a way to trigger a custom popup window from the settings?
Thanks for any tips.
No, there is no way to build a more complex UI inside the settings dialog. What extensions typically do is add a button (checkbox, even if it's not quite the correct element) in the settings page which then launches a separate Safari page which contains the full settings UI, written in HTML.
For an example of this, install uBlock and take a look at how it launches its setting UI.
Related
While doing accessibility sanity checks, I like to ensure to provide appropriate guidance for developers to correct anything that is reported as problematic or incorrect.
In this case, their implementation of a tooltip was incorrect. So I set to use MDN's documentation (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role) as a reference.
But before simply sharing that, I tested MDN's code example with VoiceOver myself, and I discovered something curious:
List elements (<ul> in MDN's example) are not actually read by the screen reader. I tested with VoiceOver on Chrome and Firefox, and they both read the tooltip content as expected.
Does anyone know if this is a Safari bug, or if there is anything to ensure to do in the markup to ensure the tooltip content is read?
Here is a link to test: https://htmlpreview.github.io/?https://github.com/jansensan/test-a11y-tooltip/blob/main/public/index.html
Here is the code: https://github.com/jansensan/test-a11y-tooltip/blob/main/public/index.html
Edit: To clarify, I currently tested this on macOS Ventura with Safari, Firefox, and Chrome. The issue of VoiceOver not reading the content happens on Safari (weirdly enough). It skips the list altogether (I added paragraphs , <p> before and after the list to see what it would read).
There are two different situations here.
Descriptions only need to be read as a flat string
According to ARIA’s Text Equivalent Computation, exposure of the referenced structure is not required:
The purpose of the computation is to create a perceivable label or description for alternative presentations, in the form of a flat string of space separated textual tokens.
So this concerns the text read when focus is on the input—provided the user activated announcement of descriptions in their settings.
Reading the tooltips content by moving reading cursor onto it
If the reading cursor is moved onto the tooltip widget itself, the whole contents must be read, including structure. It would be surprising if Safari didn’t do that. If it doesn’t, it’s a bug.
Tooltips must stay open on hover
Both tooltip examples have one issue, though: They fail WCAG Success Criterion 1.4.13 Content on Hover or Focus, because they close when trying to move the mouse pointer on them.
Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
It’s a reflex of mouse users to hover content they are reading, independent of screen reader use.
I want to have a popup/dialogbox with an "OK" button on it that will close the dialogbox...after someone performs a task on a Domino webform. I know I used overlays in xpages before, but the current application I am maintaining was built with traditional Domino forms (lots of pass-thru HTML) and my initial attempt to build an overlay effect did not work.
I have tried using javascript code of:
var window = window.open(url, windowName, [windowFeatures]);
...but this has not been successful. No errors in debug, yet my url page does not pop up. I am hoping someone might be able to provide a snippet of what you use so I can see where I am going wrong.
The url parameter I am passing is correct, as I used an alert to show me what was going in there, but I am doing something basic wrong.
If I can answer any questions for you I can do that as well.
Thank you
The only way I know to display a dialog box in a classic Domino web application is to do just like you would on any HTML-based webpage. Either you create your own popup functionality, or you use one of the many plugins available.
When I work with classic Domino web applications, I have often added Bootstrap to it, to make things look a bit better. Then I can use either the native Bootstrap dialog boxes, or a plug-in called Bootbox.js. But there are many other ones.
Is there an AppBar button style that means "Open in Web Browser"?
This seems like a pretty common scenario, so maybe there's already a Microsoft style for it. Otherwise I guess I'll have to roll my own.
In lieu of a perfect match, I think the best is new window:
I think it conveys what you are wanting to say here.
It's U+E17C in Segoe UI Symbol.
You can also find it in Common/StandardStyles.xaml as NewWindowAppBarButtonStyle
The Modern UI Icons library has several icons that could be used. It contains a generic browser icon, as well as one for Chrome and IE.
I discovered this in a helpful Tim Heuer blog post about using font icons in Windows 8.1.
Can I listen to hotkeys with safari extension?
I want to respond to Cmd+SomeKey with action done by extension, but I've read intro on apple developer and there is nothing about hotkeys.
You can add custom buttons to the Safari toolbar, create bars of your own, add contextual menu items, display content in bars or tabs, and inject scripts and style sheets into webpages.
No single word about hotkeys, and google doesn't find any article about that. So is it possible at all? If it is possible, where can I get additional info?
It can be done -- someone helped me to set it up for my browser window resizer extension. You need to have an injected script that checks for a specific keypress/combo then send a message back to your toolbar or global page. Here's an example on github of an inject script to monitor for specific keypresses (alt-1 to alt-0) and here's an example of doing something with the message lines 92-108 & 131 of this toolbar page.
I am wondering is there any way we can test the font size/color of a webpage in IE6+. I think it is not possible by checking the css class, as some other style may overwrite the styles of the class which has been assinged to that text.
Actually I want to know the browser assigned font-size to the text of the page, as we can do it in firebug on firefox.
Any help would be appreciated.
Of course you can. If you turn on developer tools - it's in every IE6.
Not sure but I think you can try the only famous web developer toolbar for IE:
Internet Explorer Web Developer Toolbar