I asked this a while back with absolutely no luck (or answers).
I do not wish for this to happen. I can initialize the entire dialog but the second that I call
theDialog.dialog("open");
All previously selected text on the screen is deselected. Technically, speaking, either the selection object is trashed or the range objects boundaries is collapsed - the effect is the same.
I wish for the dialog to be as unobtrusive as possible. Is it possible to have the dialog not effect the user's selection at all?
Is this possibly an issue with events? Is there a way to have the dialog bypass whatever step it is taking that collapses the selection?
Related
When it comes to accessibility, what is the proper design pattern or technique for appending an inline panel that would have a header, body text, and optional close button?
For context, I've been tasked with creating an accessible multi-select quiz question that appends a correct or incorrect feedback panel under the question after the user presses submit. I think normally this sort of feedback would appear in a modal popup that covers the other content and traps focus, but this particular design needs the feedback panel to appear in the page directly under the submit button, and still allow the user the tab back through the answer options (even though they would be aria-disabled after submitting).
The feedback panel would have a title header, body text, and an optional close button. There would be no close button if the user got it all correct or they ran out of attempts.
Is there a suitable aria-role or known design pattern for this sort of appended panel? And what should I send focus to once the feedback panel appears, the header? The close button?
In case its relevant, for the multiselect answer options I am using native checkboxes with <label>s
Option 1
The first would be to add role="alert" to the appended box (assuming you will only add it once per page as otherwise we would use aria-live).
This would then be announced to screen reader users.
Option 2
Option 2 is that you can just append the box to the page and use focus management. So the box appears and you would move focus to the heading of the box via JavaScript (with tabindex="-1" on the heading for example). This needs to happen from an expected action (so "submit answer" button that you said you have).
I would probably go with option 2 as it is the easiest way to not introduce more accessibility issues by mistake.
There are other ways you can achieve this with aria-live, aria-labelledby etc. etc. but the above two options are the most straight forward.
I have 2 Select Box in my HTML page.
For some reason, I wish to want both the text boxes open at the same time.
This may be for several purposes, like taking screenshots of the both open at the same time.
The problem I face is, when I click on one selectbox, another goes away, when I click on the other, previous goes away.
Is it possible to keep both the selectboxes open at the same time?
I am fine if it requires javascript to do so.
Here are the two boxes, which I wish to keep open, is it possible to block some events or anything?
Thanks
#xiankai: Yes I have considered using a list view already, and then later instructing that this would/could be a combo-box. Here's my work with this modification.
If your select box doesn't have many elements, have you considering using a listbox view instead? Simply add multiple to the your <select> element. Additionally, you can specify the height of the select box with the size attribute.
My issue is that when the page is refreshed, I want the 'select' to be scrolled all the way to the top. However, if the user has scrolled the select box down to view the options (without necessarily even clicking on any of them) prior to the refresh, the 'select' box doesn't return to the top.
I've seen answers where people say to simply use selectedIndex to select the first option in the list, and thus it will automatically scroll to the top, but this is NOT an option. When the page is refreshed, nothing must be selected and thus, the only code I have at the moment is:
document.form1.componentselect.selectedIndex = -1;
Which is effective at clearing out any selections in the 'componentselect', but does not reset the scroll position.
FYI, I am using straight HTML and JS, no JQuery or anything like that. Thanks.
All you need to do is first select the top item (as you said you don't want to do), but then set it to -1!
document.form1.foo.selectedIndex=0;
document.form1.foo.selectedIndex=-1;
While I was looking at this, I also figured out how to have it remember what was selected, in case that becomes an issue:
http://jsfiddle.net/ryleyb/qPJ4S/
I think it's impossible to change the scroll position in traditional selects (select from the tag, no box generated by javascript plugins) because this box is controlled directly by the user's browser and theme, without direct interference by javascript.
I believe the only way to "reset" the display is to force the user to click on the field again, hiding and redisplaying the select tag. But you will need to click to open the box again and it hinders more than helps the user.
I am trying to get a checkbox with a label to function so that when you have text selected in a contenteditable div, clicking on the label will not lose the selection from the div. The label still needs to apply the standard checkbox tick/untick upon clicking it, but keep the focus & selection intack on the div.
Doing a simple focus() on the div won't help as the selection will be gone (and caret is at the beginning). I could of course look into a way for storing the selection object and trying to assign it back after the label click, but isn't there any simpler way of keeping the selection?
(the reason I need to do this with label & checkbox is because I will be using jQuery UI buttons and I will need the the toggle functionality of them)
On a similar note, if you click the checkbox, you usually still keep the selection in the div, but at least on FF4, if you press the checkbox very frequently (<1s), it will lose the selection. Any idea what's going on there? answered below
example: http://jsfiddle.net/niklasvh/gULM9/
It's a Firefox bug marked 490367.
According to the bug description, double-click functionality on input fields will act unusually when there is a contenteditable div on the page.
I noticed the strange behavior while trying to replicate it manually so I guessed it was a bug. I don't know of any workarounds.
I'm making a large and complex application and I need to set tabindexes to help user navigate through the pages. This is a private application so I don't have restriction about (ab)using javascript (jquery).
I currently have these questions.
1) How do you force with javascript (jquery) the browser to move the cursor inside a specific textbox as soon as a page has loaded? I noticed that often browsers don't automatically put the cursor inside the first tabindexed input. I want a surefire way that forces it there no matter what.
2) Some fields that activate ui enanchement (namely jquery ui datepicker) have problems with tabbing (like having to push tab two time to go away from it), is there any way to avoid this?
3) How do you read and set tabindex with jquery? I have some fields that get hidden/shown based on user action and they should be able to "give" their tabindex to other fields if they get hidden, is this a problem, does the browser still consider a tabindex after the page has loaded?
Thank you very muchh
To put focus on a specific textbox, do this (assuming textbox id is #firstBox): $('#firstBox').focus(); See more examples here: How do you automatically set the focus...
Not particularly because the DatePicker is also its own UI, so it has various objects within it that can be focused on (which is what tabbing picks up on).
Actually, now that I've thought about it, if you hide a field (AKA, "hidden") it will not have a tabindex and the other tabs will fall in line with what is defined for the browser (typically top to bottom, left to right order). You shouldn't have to worry about setting the tabindex manually.