Menu icon Foundation
orbit slider removes span from bullet

Hi

I am using the orbit slider in Foundation 6.4.1.  My use case is a simple panel where the user can click a styled button (bullet) to reveal information in a parent panel:

This was working fine but the text inside the bullet was using H4, which is not valid HTML.  I changed this to <span> but then this broke the element, because the text inside the span was being reassigned to the next bullet:

 

I checked the source (foundation.orbit.js) and I found that there is code to take the last span and assign it to the current bullet.  I can see why this is happening, because the idea is that the 'current slide' <span class='show-for-sr'> moves between elements and is relevant to screen readers, but it causes confusing behaviour as above.

My suggestion would be to make it clear in the documentation that the 'current slide' span is required for screen readers because it causes confusion if users rely on spans for display elements in bullets as above.

Matt

 

 

Orbitbulletspan

Hi

I am using the orbit slider in Foundation 6.4.1.  My use case is a simple panel where the user can click a styled button (bullet) to reveal information in a parent panel:

This was working fine but the text inside the bullet was using H4, which is not valid HTML.  I changed this to <span> but then this broke the element, because the text inside the span was being reassigned to the next bullet:

 

I checked the source (foundation.orbit.js) and I found that there is code to take the last span and assign it to the current bullet.  I can see why this is happening, because the idea is that the 'current slide' <span class='show-for-sr'> moves between elements and is relevant to screen readers, but it causes confusing behaviour as above.

My suggestion would be to make it clear in the documentation that the 'current slide' span is required for screen readers because it causes confusion if users rely on spans for display elements in bullets as above.

Matt

 

 

Jim Birch about 1 year ago

Thanks for posting this Matt.  I solved by changing the span's to div's.