I don't use JavaScript, but I realized that with Safari's Show Page Source I can set breakpoints, inspect elements, etc. etc.
But I can't seem to find any "Step Into", or "Step Over" feature? Are those features in there?
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'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.
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 making a webpage that has different areas that can be clicked on to change the contents.
I want to set it up so that when you click on an area, an openWYSIWYG editor appears in the middle of the screen with the rest of the page greyed out.
I have achieved this except for the positioning of the editor. When you click on a section I have a div with 50% opacity cover the page and a textarea appear in the middle. But when I try to attach the editor to the textarea, it loses it's position and falls behind the div not in front of it like the textarea is.
Can anyone suggest a way of centring the openWYSIWYG editor?
You're looking for Modal positioning. Here's one solution:
http://jqueryui.com/demos/dialog/#modal-form
Basically, apply the Jquery Dialog to the div that holds your WYSIWYG. Don't forget a submit button.
Just a quick heads up--I went through quite a bit of headache dealing with WYSIWYG editors for client-facing sites a few months back. It seems that clicking the "paste from WORD" button was a very difficult task to figure out. Word-pasted code can wreak havoc on websites, overrunning text fields in the database. I gave it a try on their demo (which also doesn't support webkit based browsers) and the result wasn't pretty. The only two options I found to solve this were to sanitize code on the back end, or to use CKEditor. I chose the latter because it was so easy. Take a look at CK, it's a great piece of free code.
I am using (a school modified version of) the "Squeak By Example" (SBE) image for a OOP/OOD class. However, my System Browser is missing a few features that appear in SBE. I assume there are some configuration options that can get them back for me, but I can't find them yet.
My questions are:
1) How do I get the buttons back? In the bottom pane there should be a bunch of button (browse, senders, implementors, versions, ..., source). My buttons are missing.
2) How do I get the small workspace area above the buttons to appear? There is supposed to be an area that I can type in, below the top panes, and above the buttons, but it doesn't appear.
Thanks in advance!
Robert
Edit - I did fool around in the Preferences Browser and tried a lot of settings. I managed to make the buttons come back and then later got that small (unknown name) workspace pane back, but I have no idea how. I have tried to systematically turn stuff off again to find out what setting(s) controlled what, but I was unable to determine what controlled either problem. So even though I have it working, I would like some squeak/smalltalk knowledgeable person to let me know how to control these as it might help me learn...
"In the bottom pane there should be a bunch of button (browse, senders, implementors, versions, ..., source). " -- switch on the optionalButtons preference in the preferences browser.
The "area that I can type in, below the top panes, and above the buttons, but it doesn't appear" sounds like the annotation pane - this gives you summary information about the method you're currently viewing, and it's controlled by the annotationPanes preference. Alternatively you may be referring to the Mercury Panel which is used for fast navigation to other classes and methods; this is (of course :-) controlled by the mercuryPanel preference.
If you've been messing around, you may also find that you now have an incorrect system browser selected. Squeak has a choice of browsers which can act as the System Browser. You can choose between them by clicking the menu button on the System Browser and selecting "Choose new default Browser". Open a new browser window to see what effect this has had.
You may also want to try a Pharo image which has everything configured the way you want by default.
Do you have access to the Preferences Browser? It should be in the main system menu. You can alter all sorts of things via this browser, including which buttons appear in teh system browser?