search

10up / component-library

A library of barebones front-end components built with WordPress and accessibility in mind.
https://baseline.10up.com/
MIT License
59 stars 12 forks source link

Losing :focus when using links inside tabs #18

Closed nicholasio closed 3 years ago

nicholasio commented 3 years ago

Describe the bug If tabpanel(s) include links, :focus disappears or goes to inactive tab and is not trapped inside of the active tab when browsing with tab key.

To Reproduce Steps to reproduce the behavior:

  1. Add links to tabs of the demo index.html 
    
<div class="tab-content" id="js-tab1" role="tabpanel">
<h2>Tab 1 Content</h2>
<p><a href="#1">Link-1</a> ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div><!-- //.tab-content -->

Tab 2 Content

Link-2 tincidunt tempor risus gravida tincidunt.

``` 2. Open in browser 3. Browse with tab key 4. After focusing "Link-1" press tab again 5. Focus now goes to "Link-2" but it's not clear to user that tab has changed. **Expected behavior** User could tab-browse all links inside of a tab, and then focus moves to next .tab-item (where you change tab). **Desktop (please complete the following information):** - OS: [Mac OS Catalina] - Browser [Atleast all webkit browsers] **Mobile (please complete the following information):** - Not an issue on mobile device, atleast when using touchscreen
Firestorm980 commented 3 years ago

@nicholasio @jeffpaul I had an old PR here so I can take this one on, its a pretty simple CSS change.

nicholasio commented 3 years ago

@nicholasio @jeffpaul I had an old PR here so I can take this one on, its a pretty simple CSS change.

Thanks!

Firestorm980 commented 3 years ago

@jeffpaul @nicholasio PR opened above, ready for a review.

nicholasio commented 3 years ago

The fix has been merged. Thanks for the contribution @Firestorm980