I'm implementing adjustments for accessibility on a project and I need to make it possible to navigate through the page using only the keyboard. I am experiencing a problem with modals using the vuetify's v-dialog component. When I try to change the focus of the page to the content within the modal for screen readers to announce to the user. I've tried manually focus with JavascrÃpt document.getElementById('id').focus() and with Vue $refs like this.$refs.dialog.focus() but no success. No error appears in the console, it just doesn't focus on the contents of the modal.
I noticed that vuetify add the role="document" property to modal div but I don't know if that is the cause:
How can I focus content within modal?
You got to wait for the dialog box transition to complete and then detect that transition completion in JavaScript followed by focussing the first element in the dialog.
For this, what you need to do is detect the end of our triggered CSS transition and focus back the first element inside the dialog, like so:
dialog.addEventListener('transitionend', (e) => {
dialog.querySelector('input').focus(); // Assuming that there is an input field. If you wanna focus a non-input field then add tabindex=0 for that element and then focus it
});
where dialog is the v-dialog Dom element
Related
I am using React Native Pager View and trying to create a registration form. Each child view in Pager View contains another TextInput. When I scroll to another page, the keyboard tries to disappear for a second and appears again because my TextInput autoFocus property is set to true but I need a way to keep the keyboard always open whenever I scroll to the next page. I couldn't be able to find any solution.
I'm using ContentTools in a Bootstrap modal. When I select some text and click the hyperlink tool, the dialog to enter the link pops up, but immediately gives focus to an element in the background (in this case, the modal close button, but when I remove it, it focuses on the first input in the form, etc). This makes it impossible to type in the dialog to create a link.
Any pointers? Not a JS wiz, but from a peek at the ContentTools source, it seems to set up an event handler to grab the click event and give focus to the dialog's input, and I'm assuming that's getting borked somewhere...
Here's a screenshot
For anyone who finds this later, the issue was that Bootstrap's modals maintain focus and re-capture it anytime it is given to an element in the background. Since ContentTools appends itself to the end of the DOM (after my modal), it is in the "background" as far as bootstrap is concerned. Buttons in ContentTools work because they register as click events, but anytime you try to click in an input, it gains focus, and Bootstrap returns focus to the modal.
My solution was to modify the ContentTools source to instead append itself to the end of my modal <div>, and now it's entirely contained within the modal--Bootstrap has no focus issues.
I created an autocomplete component and when I use it in modal, the dropdown closes on clicking scrollbar(onBlur event of input gets fired) but when I use the same component outside of modal, scrolling with scrollbar works fine.
I am not able to find the cause of the issue. So please help!!
This is the code-sandbox link
(To reproduce the issue first use scrolling with scrollbar on main page, then open add item modal and use second input field in it which is same autocomplete component).
I have a page where if user click anywhere outside form or try to close the tab a dialog box/popup should come like your changes will be discard or do you want to move.
I can do this from window.onbeforeunload event but the problem is that i need to use a customized pretty dialog box instead of default one if any alternate approach is there.
If we use any modal dialog box but i don't know which event to call on that dialog also tried window.onload but it not fulfill my problem as i need to ask the viewer before moving to other page.
Ionic/cordova/angular/ios application:
I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it's open and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes the modal) the ng-click registers again.
I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?
-- UPDATE (Testing in Chrome w/inspector)
It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.
Click events are cut off for my notification overlay until the modal and/or popup are dismissed.
When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:
<div class="click-block click-block-hide"></div>
looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.
No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.
Any thoughts?
Can you explain the layout a bit better? Is the ionicModal sitting on top of the message? Or are they side by side?
If the modal is sitting above the message, then it is a matter of z-index. You need to make sure that the z-index for the class that is being used isn't overriding the z-index of 99999.
I figured it out, at least how to hack around it.
$ionicModal and $ionicPopup add a class to the body element <body class='popup-open modal-open'>. I didn't look into how, but it is blocking clicks to my notification.
So I added an interval to the angular-notify notification to remove the modal-open and popup-open classes from $ionicBody.
var notificationInterval;
notificationInterval = $interval(function() {
$ionicBody.removeClass('modal-open');
$ionicBody.removeClass('popup-open');
// console.log("removing those body classes while the notification is up.");
}, 1000)
For notification dismissal, I added to the $scope.$close function
$interval.cancel(notificationInterval)