mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

Remove incorrect aria-haspopup from dropdown toggles (#28299)

Browse Source 
`aria-haspopup` use requires the use of an ARIA `menu`, `listbox`, `tree`, `grid` or `dialog` (see https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup)

in our use (as generic disclosure widgets), it's incorrect and sets up the wrong assumption/behavior from assistive technologies.

in future, we likely want to change our dropdowns to essentially be like a `dialog` - move focus to it when opened, possibly make it modal so focus is maintained inside it and the rest of the page
is hidden/inert.

but for now, removing the incorrect attribute is probably the quickest, most immediate fix.
This commit is contained in:
Patrick H. Lauke
2019-02-19 09:25:37 +00:00
committed by XhmikosR
parent 68a8af4a36
commit 4b00aa6c4e
16 changed files with 92 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/tests/visual/tab.html
View File

@@ -25,7 +25,7 @@
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
<a class="dropdown-item" data-toggle="tab" href="#fat" role="tab">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
@@ -62,7 +62,7 @@
<a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown2">
<a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
@@ -99,7 +99,7 @@
<a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" href="#" id="dropdown3" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown3">
<a class="dropdown-item" data-toggle="tab" href="#fat3" role="tab">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
@@ -136,7 +136,7 @@
<a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" href="#" id="dropdown4" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown4">
<a class="dropdown-item" data-toggle="tab" href="#fat4" role="tab">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
@@ -168,7 +168,7 @@
<a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a>
<a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown5">
<a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a>
<a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a>