I am using a Foundation dropdown, and inside it I have multiple things I need to interact with, including colpick, adding and removing components, etc. Anytime I do any of these actions, the dropdown closes, as it should since it is a dropdown. Is there a good way to have the dropdown ignore my clicks and only close if I click the close button instead?
Juts use aria-autoclose="false" in the <ul> tag (see section Autoclose in documentation.
<a class="button" data-dropdown="autoCloseExample" aria-controls="autoCloseExample" aria-expanded="false">Link Dropdown »</a>
<ul id="autoCloseExample" class="f-dropdown" data-dropdown-content tabindex="-1" aria-hidden="true" aria-autoclose="false" tabindex="-1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
This foundation forum issue may help you
Related
I'm using the following GetUIKit: https://getuikit.com/
I want to use the UIKit and JS to do the following:
When a button named "Next" is pressed, the active item on an unordered list is changed to the subsequent item and that content appears. I would also like for a second button to appear, "Previous", if the active item is anything other than the first item in the UL.
Here is what I have so far:
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<li>Welcome</li>
<li>Get Involved</li>
<li>Sign-Up</li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Welcome!</li>
<li>Here is how you can get involved!</li>
<li>Fill out the following form to be added to our contact list!</li>
</ul>
<button class="uk-button uk-button-default">Previous</button>
<button class="uk-button uk-button-default">Next</button>
UIKit provides navigation from the subnavs. In other words, I can click on those and it will pull up the corresponding item from the subsequent UL.
My issue is how I do this using a Next and Previous button. Are buttons the best choice? If so, using JS, what is the best way to go about manipulating the HTML/CSS to change what appears based on user's selection of "Next" or "Previous"?
I suggest you to use "Tab" in Uikit, Just use that tabbing name as Next/Prev
<ul uk-tab>
<li class="uk-active"></li>
<li></li>
<li class="uk-disabled"><a></a></li>
</ul>
General accessibility question here. I'm looking for general approach, but will also note that this is in a React app so statefulness is a consideration.
Take the following code example of a list of actions, which open corresponding modals. Ideally, you would be able to tab through the list of actions in sequence - but because the modals have links inside, the tabbing experience is not ideal. Basically, you hit 'action 1' and then tab 6 more times before hitting 'action 2' due to the 5 links contained in the modal.
<li class="list__item">
<!-- modal trigger -->
Action 1
<!-- modal containing links -->
<aside class="item__modal modal" id="modal-interview-1">
<a href="#>Sample 1</a>
<a href="#>Sample 2</a>
<a href="#>Sample 3</a>
<a href="#>Sample 4</a>
<a href="#>Sample 5</a>
</aside>
</li>
<li class="list__item">
<!-- modal trigger -->
Action 2
<!-- modal containing links -->
<aside class="item__modal modal" id="modal-interview-2">
<a href="#>Sample 1</a>
<a href="#>Sample 2</a>
<a href="#>Sample 3</a>
<a href="#>Sample 4</a>
<a href="#>Sample 5</a>
</aside>
</li>
The question on approach what is the best way to handle hiding the anchor tags from the DOM, or at least from tabbing and screen reading, when a tab is disabled? I've tried adding disabled to the anchors, and adding an aria-focusable="false" to the modal when it's inactive... but it's not giving me the desired effect of skipping the links.
Thanks for your help with this issue.
aria-focusable="false" is only for screen readers and not well supported, which is why you are struggling with that.
You have a couple of robust options:-
Use display: none on the item__modal modal and then when you add the modal--active override it to display: block (or whatever, flex etc.) - display: none on a parent element is robust and will always make it's children unfocusable. This will always work and is the best option.
Set a tabindex="-1" on each link (sadly you can't add it to the parent as it can still get overridden on some screen readers) and change it to tabindex="0" when the modal opens.
<aside class="item__modal modal modal--active" id="modal-interview-1">
Sample 1
Sample 2
Sample 3
Sample 4
Sample 5
</aside>
This will work consistently across all browsers.
It isn't just the tab key
The reason the above are the only robust options is because screen reader users rarely navigate by the tab key.
For example a NVDA user will use 1-6 to navigate by heading levels (H1 - H6) and K to navigate by links to get a feel for the page.
final option (not recommended)
You could intercept the tab key presses and manage focus, but you would need to then add aria-hidden="true" to each of the links for the same reason (and change it to aria-hidden="false" when the modal is active.
This last option does at least afford you the option of using opacity: 0 to hide the items etc. if you really need to.
I'm a big fan of the inert attribute. It's currently still in draft (I've heard that it's available in Chrome behind a flag). You can polyfill the attribute
In essence, you'd set inert as the element is hidden and all technologies would act as though the links aren't there. There's a really good demo on the polyfill page that will better illustrate the idea. I think it would solve your issue.
After opening popup, want to disable the background in jquery reveal modal. Please look at the following fiddle. In this fiddle it is working, but it has taking the whole screen. I want to set it as inside the particular div.
$(function () {
$(document).foundation();
$('ul.f-dropdown li a').on('click', function (event) {
console.log('Dropdown clicked', event.target);
$('.reveal-modal').foundation('dropdown', 'closeall');
});
});
.generation .reveal-modal {
background-color: red;
}
.generation{
width:700px;
height:400px;
background:lightgreen;
}
Click Me For A Wonky Modal
<div class='generation'>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Wonky Dropdown Dialog</h2>
Has Dropdown
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>This is a link
</li>
<li>This is another
</li>
<li>Yet another
</li>
</ul> <a class="close-reveal-modal">×</a>
</div>
</div><!-- / .generation -->
<hr/>
Click Me For A Working Modal
<div id="myWorkingModal" class="reveal-modal" data-reveal>
<h2>Working Dropdown Dialog</h2>
Has Dropdown
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>This is a link
</li>
<li>This is another
</li>
<li>Yet another
</li>
</ul> <a class="close-reveal-modal">×</a>
</div>
Please check this fiddle and help me for do this.
I don't believe a modal dialog is the appropriate element to use in this situation. A modal dialog is normally used to grab the user's attention and have them perform a global action, such as a confirmation message for deleting something. I'm not sure what you are trying to accomplish with your modal, but I would suggest going for more of a simple show/hide section. This way, it can be placed within the context of your content block. Foundation's modals are always going to be positioned relative to the viewport, not to a specific container.
Check out this article on how modals and overlays are best used: https://www.nngroup.com/articles/overuse-of-overlays/
I am using a bootstrap dropdown, I want to focus on the dropdown so I can use keyboard to navigate over the list. What is the way to do it using jquery?
I tried to use $('#myULid').focus() and this is not working.
I am able to open the dropdown, but not focus on it.
<button id="time_btn" type="button"
class="btn btn-reverse dropdown-toggle"
data-toggle="dropdown">
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in items" ><a><span>test</span></a></li>
</ul>
just add
<ul tabindex='1'>
....
</ul>
then add the .focus() method
There is an excellent article "Accessible Dropdown Menus" all about the various ways to do this at http://terrillthompson.com/blog/202
It includes examples of various methods. One of the simplest can be seen at http://staff.washington.edu/tft/tests/menus/dropperdown/index.html. It is a pure CSS solution (no JavaScript) that was billed on it's invention as "the world's most accessible dropdown menu.".
However other more advanced methods are demoed as well. I hope it provides everything you need.
I am using bootstrap version 2.0
I have the following html structure -
Now when I click on the Filter by Team the dropdown shows properly. Now when I click on the link, I should be taken to the page. But the links do not work. I mean, when I click on the dropdown elements, they should take me to a url, which they are href'ed to, this does not happen.
<li style="margin-left: 12px;">
<div class="dropdown" style="margin-top: 5px;">
<a class="dropdown-toggle" style="margin-left: -2px;" data-toggle="dropdown" href="#">
Filter by Team
</a>
<ul class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenu">
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/8/">funvilla</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/6/">Dev Team</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/5/">Design Team</a>
</li>
<li class="divider"></li>
</ul>
</div>
</li>
The fiddle can be found here - http://jsfiddle.net/ktgrw/
The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
Here's the updated fiddle with the correct bootstrap version and the attribute removed.
Also the disabled class is used on the toggle link to prevent the opening of the dropdown, you should remove it from your links since it's not serving any real purpose.
The links are working perfectly fine. When we use relative links like href="/task/list/orgteam/5/" we need to be sure that we are running this page on a website where these links exist.
To add to clarity, I added a link to google as the last list item in this new fiddle (click here to view) and because it uses absolute url href="http://www.google.com", it works just fine.
I faced same problem with bootstrap framework and at the end got the solution (worked for me).
Import all your required javascripts, mainly jquery.js .
The problem is that you have the data-toggle attribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
I had the same problem too but after removing the data-toggle attribute, my <a> links are working just fine.