What is causing this accordion navigation to lose the focus of the browser focus?
What is causing this accordion navigation to lose the focus of the browser focus?
<div class="panel panel-default">
<div class="panel-heading">
<button aria-controls="collapseTwo" aria-selected="false" data-target="#collapseTwo" data-toggle="collapse">Display</button>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<ul>
<li class="iso-btn" data-filter=".desktop">
<a href="#">Desktop</a>
</li>
<li class="iso-btn" data-filter=".mobile">
<a href="#">Mobile</a>
</li>
</ul>
</div>
</div>
</div>
In Chrome, if I insert buttons with CSS removed, focus is displayed clearly on each button. I went through the elimination process with my CSS, but I must be missing something - the tab on the tab should have the default browser focus.
Any ideas what I am doing wrong? HTML structure? Bootstrap? CSS?
source to share
Accordion buttons should use the attribute aria-expanded
instead aria-selected
as shown. The use is aria-selected
invalid on cast buttons and the false state can confuse the browser if it is not part of the selected list. For example, a tab in a single-selection control will usually land on the selected item in the list box and ignore unselected items.
See the discussion on ARIA statearia-selected
for a discussion of user agent focus and other details, and on accordions in the ARIA Authoring Practices document .
Please note that you should also use the appropriate heading title in the panel header for easier navigation.
source to share