I am using iphone 6+ and with the voice over (accessibility) option on. I have my exit modal open on a link click and I set my keyboard focus on the modal (with js). This all works fine. However, the voice over focus is not switched to my modal, it is still on the trigger link.
How do I get the voice over focus to the modal?
Here is the modal code
<div class="modal-container" id="{{ modalModel.modalId }}">
<div class="modal-mask" data-ng-click="onMaskClick($event)">
</div>
<div class="modal-body" tabindex="-1" role="dialog" aria-label="{{ modalModel.modalTitle }}">
<div class="modal-body-container">
<h4 class="modal-title heading-4">{{ modalModel.modalTitle }}</h4>
<button type="button" class="modal-close" data-ng-click="closeModal($event)">
<span class="btn-text">close</span>
<span class="icon chrome-blue-x-round"></span>
</button>
<div class="modal-contents">
<div class="modal-contents-wrapper" data-ng-transclude></div>
xxxxxx xxxx
</div>
</div>
</div>
</div>
The modal-body class element has focus when the modal pops up. I am using iOS 9.
I was able to focus the voice over cursor in the modal by putting the keyboard focus on the close button when the modal opens.
It appears if the keyboard focus is not on an element which the keyboard can focus on naturally, then the voice over cursor will not move inside of the modal. Since the close button is a button, this worked
<button type="button" class="modal-close" data-ng-click="closeModal($event)">
<span class="btn-text">close</span>
<span class="icon chrome-blue-x-round"></span>
</button>
You must focus on a focusable item. If you want to set it on something normally not focusable add tabindex=0. There are a couple other quick tricks to make VO read the entire modal. Add aria-labelledby="id_of_title" aria-describedby="id_of_content" don't use the hash '#'.
Related
I have a modal and I don't want voiceover to read the content behind it. Setting aria-modal=true should've been enough but then I saw that VoiceOver does not support this behaviour out of the box like better screen readers like NVDA and JAWS.
https://a11ysupport.io/tech/aria/aria-modal_attribute#support-table-2
And it says that authors can implement this functionality on their own for VoiceOver. I have successfully trapped the keyboard focus inside the modal (using the tab key) with JS but voiceover is going behind the content when I use the arrow keys. How can I achieve this? My modal is structured like this:-
<div
role="dialog"
aria-modal="true"
aria-labelledby="title"
aria-describedby="description"
tabindex="-1"
>
<div class="sticky-header">
<h2 id="title" class="title">
This is a heading
</h2>
</div>
<div class="modal-content">
<p id="description">
This is a paragraph.
</p>
</div>
<div class="sticky-footer">
<button
type="button"
>
Cancel
</button>
<a href="#">
Proceed
</a>
</div>
</div>
am not a good UI export but its a bit suggestion
please try these attributes I hope you'll get better solution.
My solution is:
role="alertdialog" aria-modal="true"
I had this issue as well. With voice over the user can "click" outside and swipe out of the dialog. I believe this is a issue with VoiceOver, and I could not find any solution on the web. It's not the best solution but what I ended up with was to add a boolean to the open/close dialog event. Then use the boolean with aria-hidden
<div [attr.aria-hidden]="IsMenuOpen">content behind menu</div>
<button (click)="openMenu(); isMenuOpen = !isMenuOpen" ></button>
I have a dummy Bootstrap modal with a very simple JS alert meant to be triggered when the submit button is clicked. The code is live here and this is what it looks like:
<div class="modal fade" id="contact" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" name="contact-form">
<div class="modal-header">
<h4>test</h4>
</div>
<div class="modal-body"><p>This is body</p></div>
<div class="modal-footer">
<button type="submit" id="submit" class="btn btn-primary btn-lg" onclick="alert('something');">Send</button>
</div>
</form>
</div>
</div>
If you visit the site, you can trigger the modal by clicking on the contact link in the top navigation menu. The modal looks like this:
As you can see, there's just one field and a submit button. The button's onclick() event is set to alert the word "something" on the screen. This works fine except that when you close the alert, the page refreshes with a "?" appended to the URL. How do I prevent this refresh and where does the question mark come from?
At first I thought that it happens because the button has property type set to submit, so I'd recommend to remove this property completely, and the trailing question mark would probably not appear anymore. But it does.
What really needs to be done is event default action has to be prevented. To do that, return false right there in the onclick event callback function:
<button onclick="alert('something'); return false;">...</button>
This way you, well, return false, and this is perceived as if you want to prevent further execution of the click event, effectively submit operation.
I open a modal, then on click of a div within the modal I want to close that modal and open another one. But when I do this it closes the first modal and only shows the background of the second modal with the body not displayed.
My HTML is:
<div id="test-modal" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<div id="option"><p>Click here to show the next modal</p></div>
</div>
</div>
<div id="test-modal2" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<p>modal show after a hide doesn't work?</p>
</div>
</div>
and my jquery is:
$('.option').click(function() {
$('#test-modal').modal('hide');
$('#test-modal2').modal('show');
});
This can help:
Remove hide class from modals divs
You use .option in your selector, but in html you use id="option", so change them
Working version
My Stupid mistake the jquery works. I accidently didnt close off the first modal properly which is why the animation wouldnt finish and cause the second modal to not load. I simply put the secondary modal on top of the first modal to test and it worked.
Please try using this data-dismiss attribute on close button.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
I have a checkbox on the bottom of my page. When the user clicks it, I want a popup to show up. Everything works except the toggling of the checkbox. When I click the checkbox using the code below the pop up appears but the box does not check. Any idea why?
The jQuery:
$('#confirm-final').on('show.bs.modal', function (e) {
$(this).find('.danger').attr('href', $(e.relatedTarget).data('href'));
});
The checkbox:
<label class="checkbox-inline"><asp:CheckBox ID="chkFinalSubmission" runat="server" data-toggle="modal" data-target="#confirm-final"/>Final Submission</label>
The popup:
<div class="modal fade" id="confirm-final" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Final Submission
</div>
<div class="modal-body">
If you check final submission and submit this ad note, <strong>you will not be able to change it anymore.</strong> It will be permanently stuck in readonly mode.
</div>
<div class="modal-footer">
<asp:Button ID="btnConfirmFinal" runat="server" Text="Got it" class="btn btn-default" data-dismiss="modal"/>
</div>
</div>
</div>
As for the why, the event that is fired to open a modal contains e.preventDefault(), which cancels any event that might have occurred by clicking the modal-invoking element. If it's a link, the href doesn't get followed but the modal opens instead. If it's a checkbox, the actual check is cancelled. This is built-in behavior, and you can't prevent it.
How to solve it:
In Bootstrap 3 you have access to the relatedTarget property of the event that fired the modal. Since your function already uses relatedTarget I'm assuming you use Bootstrap 3 indeed. You could just add the following rule to your existing jquery function:
$(e.relatedTarget).prop('checked', !$(e.relatedTarget).prop('checked'));
(This sets the checkbox to the inverse of the already existing 'checked' state, aka it toggles it on and off everytime you click).
Also, are you sure the rest of your code works? You refer to $(e.relatedTarget).data('href') but your checkbox has no data-href. Did you mean data('target') instead?
I have a simple div tag, that contains a button. When ever user clicks on this button it simply shows an alert.
<div id="myDiv">
<input type="button" id="btn" value="Click Me" />
</div>
and I also have a empty twitter bootstrap modal.
<div class="modal hide" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body"></div>
</div>
I have a second button, when ever the user clicks on it, it opens the bootstrap modal. I want to show "myDiv" in bootstrap modal when ever the user clicks on the second button. I want "myDiv" to be present in when ever modal opens and also I want to be present in my HTML document. So that I can always access it with out creating second button in modal.
Any idea how can I do that ?
I think this is what you were going for so basically on the modal show we append that button to the modal body.
$("#myDiv") .appendTo(".modal-body");
but we aren't done because after modal close we need to get it back in the body so we do:
$('#myModal').on('hide.bs.modal', function (e) {
$("#myDiv") .prependTo("body");
})
Here is a working fiddle:
http://jsfiddle.net/zcb3h/2/
I hope this is what you were looking for.