If you have a jQuery dialog window such as this, and lets say you have a vertical scrollbar (E.g to much text where container has a specific height).
In IE you can then use arrows up and down alongside page up and down
however in chrome / firefox you can't they just scroll the outside page.
Is there anyway to make the behave the same?
This is more of an usability or accessibility issue with the modal dialog box.The best approach is to trap focus of the modal dialog i.e. tabbing should not move focus out of dialog box. And also put a tabindex=0 on ui-dialog-content so that div must get focus on tabbing and then you can use up and down arrow key to navigate content of modal dialog.
Related
I am working on react based application for mobile screen readers. Use case is that for a dialog with menu items, I have to keep one button to dismiss the dialog, which will be on top of the dialog. I have to set it's tabIndex to 0 to make it accessible, which results in dismiss button being the first focusable item.
Expectation is that after screen reader lands focus on first menu item, the dismiss button should be accessible. How to approach this problem?
I have tried the following:
<Dialog open={this.state.menuOpen} className="hide-default-dialog-container"
content={<div className="actionsheet-view-bg" onClick={() => {
this.setState({menuOpen: !this.state.menuOpen})
}}> {this.getDismissButtonForActionSheet()}
<div className="actionsheet-view-container"> {this.getActionSheetItems()} </div>
</div>}
/>
You have four options here:-
Option 1. Move the close button to the end of the dialog next to any save / update buttons.
The 'x' in the top right of dialog boxes is expected, but there is no reason why you can't add a close button at the bottom of your dialog instead, placed after any save / update buttons.
So in the footer of your dialog have
<button>Save</button> <button>Cancel</button>
You could still maintain the 'x' in the top right but use aria-hidden="true" on it without a tabindex.
Option 2. Change the button to be after the content in the DOM but use absolute positioning to place it visually
You could move the close button after the content (in the DOM) and then use CSS to position it in the top right of the dialog.
This is a bit of a grey area on whether it would constitute a logical tab order but I think it is still accessible enough to be a good pass.
Option 3. Manage the focus programatically.
When the dialog opens you could just programatically focus the first item. Just make sure you trap focus within your dialog so the close button can be reached.
Option 4. Do nothing
This is the best option
There is nothing wrong with the close button being the first focusable item (in fact it may be preferential to allow users who accidentally open the dialog to close it quickly).
Screen reader users are used to exploring dialogs and so it won't impact them if the first focusable item is the close button. It may even be reassuring to know that you have provided an accessible close button (as many developers forget about keyboard users and make buttons inaccessible to close dialogs).
Semantics, Escape and Focus Management.
To further increase the accessibility change your close div into a button as that way you don't have to worry about adding tabindex as it is semantically correct. (I have assumed the close button is a div as you said you added a tabindex="0" - if it is already a button then the tabindex is not needed)
Secondly make sure the dialog can be closed using the Escape key as that is expected behaviour.
Finally ensure focus remains confined to the modal (not just via the tab key, you need to add aria-hidden="true" to all the content outside of the dialog while it is open as screen reader users navigate with more than just the tab key, in fact it is a secondary way of navigating, screen reader users navigate by headings 1-6, links, forms, buttons etc.).
This may require structuring your page to make it easier
For example:-
<header aria-hidden="false"></header>
<main aria-hidden="false"></main>
<footer aria-hidden="false"></footer>
<dialog aria-hidden="true"></dialog>
would turn into the following when the dialog is open (and reverted when the dialog is closed).
<header aria-hidden="true"></header>
<main aria-hidden="true"></main>
<footer aria-hidden="true"></footer>
<dialog aria-hidden="false"></dialog>
I need some method to scroll Fancybox popup down or scroll to element which is in the popup (when the poopup opened obviosly)
I red the documenmtation buut did not find the way.
Many thanks.
There is no such built-in method and you can simply use plain JavaScript (or jQuery) to scroll your element wherever you want. Maybe you can simply trigger focus on your element and the browser will do the rest.
On click of an input field, a projected popup window opens (have used z-index).
Now when i press TAB, i want the focus to automatically move from background screen to the popped up window.
Is it possible to achieve this flow of TAB navigation through built in properties or styling ?
NOTE 1: I tried setting focus to the outer div of the popup programatically.
So that the focus is moved from background to popup.
But it fails in IE11 and IE10 because, the cursor remains in one element and the focus remains in another element when navigation passes through an empty field. I DONOT WANT HELP FROM COMMUNITY MEMBERS TO DEBUG THIS CODE.
NOTE 2: I won't be able to set the tabindex for the popup window elements statically. Because in that case, the TAB moves to those elements even when the popup window is not visible.
I have a jquery mobile popup, which has a collapsible set within it, and the popup has overflow-y = auto.
SCENARIO A
When I open the popup (which builds content in real-time (when the open-popup button is pressed)), then I open one of the collapsibles within, then click anywhere within the popup, the popup content automatically scrolls.
SCENARIO B
If I then close the popup (which includes an .empty() to clear out that dynamically built content), and then repeat scenario A, the problem does not occur.
SCENARIO C
If I open the popup, but do NOT open any of the collapsibles, I can click anywhere without the problem occurring.
I created a fiddle, but it Does Not replicate the problem.
Any ideas?
EDIT
SCENARIO D
If I do not declare the content divs to be data-role='collapsible-set/collapsible', but rather just drop the content into normal divs, then I do not have the strange scroll artifacts.
I am using JQuery dialog to display dialog box on my page. When i click on button JQuery Dialog pops up but it enables browsers scrollbars too. My default page does not show scrollbars it shows only when JQuery dialog opens. Do i need to set any dialog property to disable web page resizing when showing dialog in order to avoid showing scrollbars when JQuery Dialog opens?
Sounds like your dialog is bigger than the browser window.
Does it matter that scrollbars appear?
You could use the CCS3 property
html {overflow-y: scroll;}
To always show the scrollbar so the page doesn't jump about.