Dynamic Lightbox Classic

Component Madness 2024

Age Verification in Breakdance

We’ve release 3 components which you could user to verify users before showing sensitive content. While it is pretty easy to this in Breakdance and could be done in 20mins, some users may struggle with logic and making small code to check and set cookie.

Variation	Verfication type	Video	Link to solution
1	Year input	Link	LINK TO COMPONENT
2	Date input (day, month and year inputs)	Link	LINK TO COMPONENT
3	Button (Yes/No)	Link	LINK TO COMPONENT

Setup instructions

Breakdance popup template setup

Please navigate: WP Admin > Breakdance > Popups

In top left corner click add new popup.

Click on newly created popup settings. Now we need to set where it applies. In this demo we’ll apply it Everywhere to lock whole site access before visitor verifies age. Mostly this is what you want, but you may want exclude login pages, or apply to certain page. So this may depend on yours particular case.

After doing this, we need to make our popup design.

Breakdance age verification configuration

To recap, we’ve created popup, added Location rule. Now we need to open created popup, and style it. We need to style it to cover whole screen, and disable closing options because only if user verified age popup should close.

Age Verification – Year setup (VIDEO)

Open code block and you will code at the top like this. You only need to edit these values to own needs. Code below these lines is functionality code which you should leave as it is.

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INVALID_AGE_MESSAGE = "Please enter a valid age.";
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

Variable	Desc
COOKIE_DURATION_IN_DAYS	Sets how long should cookie last in days.
REQUIRED_AGE	Sets how old user should be to pass verification in years.
INVALID_AGE_MESSAGE	Message which appears when user tries invalid value inside input field which could not be translated to age.
INSUFFICENT_AGE_MESSAGE	Message which appears when user is younger than required age settings

Age Verification – Date setup (VIDEO)

Open code block and you will code at the top like this. You only need to edit these values to own needs. Code below these lines is functionality code which you should leave as it is.

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INVALID_AGE_MESSAGE = "Please enter a valid age.";
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

Variable	Desc
COOKIE_DURATION_IN_DAYS	Sets how long should cookie last in days.
REQUIRED_AGE	Sets how old user should be to pass verification in years.
INVALID_AGE_MESSAGE	Message which appears when user tries invalid value inside input field which could not be translated to age.
INSUFFICENT_AGE_MESSAGE	Message which appears when user is younger than required age settings

Age Verification – Yes/No setup (VIDEO)

Open code block and you will code at the top like this. You only need to edit these values to own needs. Code below these lines is functionality code which you should leave as it is.

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

Variable	Desc
COOKIE_DURATION_IN_DAYS	Sets how long should cookie last in days.
REQUIRED_AGE	Sets how old user should be to pass verification in years.
INSUFFICENT_AGE_MESSAGE	Message which appears when user is younger than required age settings

Testing tips

While you are playing with this you should know how to remove cookie. Because you may want multiple times to test, and because your login also relies on cookie so if you remove all of them you will be logged out each time.

Method 1: Please just use browser dev tools it is easy. You could open them with right click + inspect. When they open find Storage tab and click on it. There you will see Cookie section, click on it and find “age_verification_passed_hsx” cookie. Right click on that cookie and it will delete just that cookie.

After doing this reload browser tab to see changes.

Method 2: Another way is to open browser console and drop this small code:

document.cookie = "age_verification_passed_hsx=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
window.location.reload();

Client vs Server side protection

These examples demonstrates client side popup implementation. As these are not the some big security measures and easiest way to cheat this is entering just wrong age. Because this alone is not some rocket science protection so keep in mind that technical user could just go to inspector tools and remove this lock. But we think it is easier for 99% visitor to enter wrong age and bypass this than going to developer tools.

Slightly stronger protection would be setting up this as templates, but you may need also hide header and footer templates. Also we advise you to turn off caching fully if you are using server side approach as caching will break template logic because verified user could cache page which will bypass PHP conditions completely.

Do it on your own (server side setup)

If you opt for this below we are giving below setup instructions how you could do it like described below (NOTE: we don’t provide support for this as it will be tons of tickets related to cache problems as user would still want to cache, and page caching should be fully off)

Template type	Content	Priority	Location	Condition
Header	Blank	2000	Everywhere	Custom PHP – (1)
Template	Component code	2000	Everywhere	Custom PHP – (1)
Footer	Blank	2000	Everywhere	Custom PHP – (1)

Custom PHP condition code (1)

return !isset($_COOKIE['age_verification_passed_hsx']);

Make new custom template, set location to Everywhere. For condition we’re going to check cookie by custom PHP so add that condition and click Open PHP Editor.

In PHP Editor paste code that we’ve provided.

For priority there isn’t some magical number, it should be greater than any other templates so we’ve used 2000. Only important note here it should be higher than any other template. In Template paste just component code which will set cookie.

For Header/Footer we may also want to hide them as they could have some data which should not be shown to user so create just Header, Footer with no content and do the same settings for them. This will just load empty Header/Footer for non-verified users.

Legal disclaimer

This solution let’s you set age and cookie duration. It is pretty simple solution which is seen on many sites. But before implementing keep in mind to obey laws and rules of the countries where sites needs to operate. We provide this solution as it is. If you are not sure is this verification enough, we kindly advise you to check and consult around these compliance things with legal experts.

Lean. Clean. Machine.

Headspin UI Copilot v1.3

Brandy template documentation

How to get started real quick with Headspin

Slider Framework

The Slider Framework is a wrapper code for the Breakdance Builder that allows users to easily create and customize responsive sliders using the Swiper.js library. It integrates seamlessly, offering extensive options for layout, navigation, and effects, event for making highly customizable slider creation simple and flexible even for non-developers.

For developers we are providing code examples how you could use full Swiper.js API and connect it to Slider element.

Getting Started

Slider framework architecture

It is important to understand following terms:

Carousel
Main Slider (master)
Components
Thumbnail slider (slave)
Connected Sliders (slave)

1. Carousel

Special div which is uses as reference for all of the components. If you put components outside this div, they won’t work. Please check structure and locate element named 0. carousel this is where all magic happens.

2. Main Slider

Inside Carousel we could have multiple sliders in some configuration. Only one can act as master and other are slave sliders. This is important because master has bi-directional event connection to slave sliders, and slave sliders have uni-directional connection to Main slider. This slider has data-swiper=”main”custom attribute. If you have more than one slider with this attribute, the first slider in DOM will become master. All custom components needs to be inside Carousel and they will show progress data, and controls for the Main Slider.

If you add slave sliders, you should keep in mind that they should have same number of the slides as the Main or controls will correspond just to Main slider data and other slave sliders could show irrelevant content.

3. Components

Components are special block which are acting as custom controls for Main Slider. Some of them include functions like:

Prev/Next navigation
Play/Pause controls for autoplay
Bullet navigation
Fractional pagination
Active teleport
or could be combined in hybrid when placed in another div like fraction + bullet

4. Thumbnail slider

This slider functions as a slave slider. The content within this slider cannot be manually controlled; instead, it automatically extracts segments of content from the main slide. By setting data-swiper-thumbnail=”true” the content will be transferred into a thumbnail. The fallback option is a complete copy of the entire slide.

From a UX/A11Y perspective, this serves as a replacement for bullet or numbered navigation. Therefore, refrain from using those if you are already utilizing thumbnails.

5. Connected sliders

If you insert an additional slider within the Carousel div, it will function as a connected slider. Please ensure that it does not possess the data-swiper=”main” attribute, as there should only be one master slide. In the event of having two master sliders, the initial one will serve as the master, while the subsequent slider will act as the slave.

Components

We have different components which will work with Main slider based

Advanced slider setup

Setup docs for Advanced Slider

Post list setup

Coming soon: Setup docs for Dynamic Slider.

Components

Table – components overview

When you copy/paste Slider framework component, in structure panel you will see numbered elements. This table below explains each of them.

No	Name	Description
0	Carousel	Carousel is a special div where magic happens. Everything here works when it is placed within the Carousel div. This is used to distinguish which controls should control which slider in case you are using more than one slider.
0.1	Skip link	This is link which is invisible until users enters Carousel by using keyboard. It will give users option to skip carousel and enhance accessibility.
0.2	Framework API	Main code which enables all the magic. Don’t remove it or move outside Carousel div [0].
0.3	Main slider	All controls are connected to this slider
0.4	Thumb slider	Secondary slider which teleports all elements from Main Slider [0.3] or you could select manually content to teleport by using attribute data-swiper=”teleport”
	ELEMENTS
1	Controls
1.1	Next/Prev controls	Buttons that are switching to next or previous slide
1.2	Pause/Play controls	Buttons that control slider autoplay. If you’re using autoplay, you should incorporate them in the design.
2	Pagination
2.1 2.2	Numbered pagination	Gives an indicator of the active slide and also provides the option to switch slides.
2.3 2.4	Steps pagination	Gives indication about the current slide and where it is placed among all slides.
3	Indicators
3.1 3.2	Fraction Indicator	Non-interactive element. Gives feedback about the current slide and the count of slides.
3.3	Progress indicator	Non-interactive element. Gives feedback about the % of slides from the total count of slides.
4	Autoplay elements
4.1	Autoplay duration circular progress bar	Gives feedback on how much time is left until autoplay switches to new slide
4.2	Autoplay duration circular progress bar with textual feedback in seconds	Gives feedback on how much time is left until autoplay switches to new slide
4.3	Autoplay duration textual feedback in seconds	Gives feedback on how much time is left until autoplay switches to new slide
4.4	Next/Prev slide controls with autoplay progress bar	– Buttons that are switching to next or previous slide – Gives feedback on how much time is left until autoplay switches to new slide
4.5	Autoplay duration progress bar	Gives feedback on how much time is left until autoplay switches to new slide
4.6	Fraction indicator with autoplay duration progress bar	– Non-interactive element. Gives feedback about the current slide and the count of slides. – Gives feedback on how much time is left until autoplay switches to new slide
4.7	Steps navigation with autoplay duration circular progress bar	– Gives indication about the current slide and where it is placed among all slides. – Gives feedback on how much time is left until autoplay switches to new slide
4.8	Pause/Play controls with autoplay duration circular progress bar	– Buttons that control slider autoplay. If you’re using autoplay, you should incorporate them in the design. – Gives feedback on how much time is left until autoplay switches to new slide

Style guide

When you copy/paste Slider framework component, in structure panel you will see numbered elements. This table below explains each of them.

Next/Prev controls [1.1]

Style them as you would normally style buttons in Breakdance.

Pause/Play controls [1.2]

Style them as you would normally style buttons in Breakdance.

Numbered pagination [2.1, 2.2, 2.3, 2.4]

This element is dynamically made so you need to style it under Advanced > Custom CSS. We have prepared.

There are 3 comments explaining which styles it affect:

Active – styles related to active slider
Focus – style related to focus state
Default – style applied to all elements

Fractional indicator [3.1, 3.2]

Style them as you would normally style text elements in Breakdance.

Progress indicator [3.3]

There are 2 comments explaining which styles it affect:

Progress bar styles
Track under progress bar styles

Circular autoplay progress [4.1]

There are 2 comments explaining which styles it affect:

Circular progress bar styles
Size styles (max-width)

Circular autoplay progress with countdown [4.2]

Countdown element you should style as you would any text element

There are 2 comments explaining which styles it affect for circular progress:

Circular progress bar styles
Size styles (max-width)

Circular autoplay progress with countdown [4.3]

Countdown element you should style as you would any text element.

Next/Prev buttons with circular progress [4.4]

Style them as you would normally style buttons in Breakdance.

Circular progress element you style with Custom CSS, there is one comment which points where you could change color. Style stroke to adjust.

Autoplay progress line [4.5]

There are 2 comments explaining which styles it affect:

Progress bar styles
Track under progress bar styles

Fraction indicators with autoplay progress line [4.6]

Style fraction elements as you would style Breakdance text element

There are 2 comments explaining which styles it affect:

Progress bar styles
Track under progress bar styles

Dot navigation with circular autoplay progress [4.7]

There are 4 comments explaining which styles it affect:

Active dot style
Progress color
Focus dot styles
Default dot styles (applies to all dots, active and focus override it)

Pause/Play buttons with circular progress [4.8]

Style them as you would normally style buttons in Breakdance.

Circular progress element you style with Custom CSS, there is one comment which points where you could change color. Style stroke to adjust.

Magics

Magic attributes

Magics within the Slider Framework are unique custom attributes that transform Breakdance elements into Slider functionalities. These include displaying the number of the current slide, the total count of all slides, an autoplay countdown, and features such as pausing and playing autoplay.

Attribute	Element	Description
data-swiper=”currentSlideNum”	Text	This magic attribute will convert any text element to show current slide number on any text element.
data-swiper=”countSlideNum”	Text	This magic attribute will convert any text element to show total slide number.
data-swiper-autoplay=”countdown”	Text	This magic attribute will convert any text element to show autoplay slide time left. It will count down each second.
data-swiper=”stop”	Button	This magic attribute will convert any button element to act as autoplay pause button.
data-swiper=”start”	Button	This magic attribute will convert any button element to act as autoplay play button.

Events

Additional events

Accessibility

Overview – todo

dasd

UX Guidlines

0. Avoid sliders

Sliders are notoriously bad for UX and A11Y. If you could use alternative design, please consider this. If you really want or need to use them please take points below to make it less sucking UX for users.

1. Use bigger dots, or even thumbnails

Usually slider dots are small and hard to click. Clickable area should be at least 24×24 pixels.

2. Alternatives to dots navigation

As alternative approach you could use thumbnail component for navigation instead just dots. Dots don’t provide much information. Also you could use number page navigation instead of dots (bullets) which would at least give more clue about slide numbers.

3. Use only one pagination pattern

Within Slide Framework there are many pagination patterns (bullets-dots, numbers, ~~fraction~~, and thumbnail). We recommend usage of only one pattern as using dots and thumbnails would make usage of two element with same purpose and lead to harder navigation. Fraction pagination is only exception because it does not offer navigation option, rather just visual indication.

4. Avoid autoplay

Autoplay/autorotation sliders are notoriously hard to use avoid them if you can. If you need autoplay please consider this list:

Autoplay duration should be at least 5-7s to give users enough time
Pause button is must, and should be placed above slider in HTML order, if you need it at another position use CSS. Before entering autorotation slider, user should have option to pause it for easier navigation.
Place next/previous arrows below slider at mobile because this way user interacting with slider will not cover slides by hand in order to navigate. Tip: You could use two sets of elements, and display: none to hide desktop arrows on mobile, and show mobile ones below at smaller screens
Pause on interaction – when user hovers or interacts with slider, you should pause autoplay as probably he wants to interact and autoplay could move desired content to interact off visible portion of the screen

Autoplay

Autoplay/autorotation sliders are notoriously hard to use avoid them if you can. If you need autoplay please consider this list:

Pause on interaction – when user hovers or interacts with slider, you should pause autoplay as probably he wants to interact and autoplay could move desired content to interact off visible portion of the screen

Autoplay duration should be at least 5-7s to give users enough time

Pause button is must, and should be placed above slider in HTML order, if you need it at another position use CSS. Before entering autorotation slider, user should have option to pause it for easier navigation.

Place next/previous arrows below slider at mobile because this way user interacting with slider will not cover slides by hand in order to navigate. Tip: You could use two sets of elements, and display: none to hide desktop arrows on mobile, and show mobile ones below at smaller screens

Bullet navigation – todo

dasd

Pause/Play Controls – todo

dasd

Previous/Next Controls – todo

dasd

Examples

Autoplay

const scope = document.querySelector('.breakdance .bde-text-6793-113-7197-6793-1').previousElementSibling;
const swiper = scope.querySelector('.swiper').swiper;
swiper.params.autoplay.delay = 1000;
swiper.params.autoplay.reverseDirection = true;
swiper.autoplay.start();

Dynamic Tabs

An a11y-friendly Dynamic Tabs component is designed to be accessible and responsive, providing a seamless user experience across devices. It adapts to different screen sizes by transforming traditional tabs into a dropdown menu or accordion on smaller screens. This component ensures keyboard accessibility, appropriate ARIA roles and attributes, and proper focus management, making navigation easy for all users, including those using assistive technologies.

Getting started

Post loop setup

In the video below, we are demonstrating setup of using dynamic tabs loop component with custom posts, and fields made in ACF.

Repeater setup

Video:

Basic configuration

In order to configure you’ll need locate element called Dynamic Tabs – config and click on Advanced option like shown in the image below:

Attribute	Values	Description
data-responsive-type	tabs, accordion, dropdown	Should tabs be shown as tabs on the smaller devices? With this you could switch to accordion and dropdown. When to switch is decided by next attribute “data-responsive-px”
data-responsive-px	Integer	When to switch to alternative responsive view like accordion or dropdown.
data-tab-preset	tabs, pills, bar, dot	Quick tab styling presets
data-accordion-preset	classic, pill, bordered	Quick accordion styling presets
data-accordion-icon	openclosed, open-and-closed	openclosed – Uses only one icon for both open and closed accordion state. Modify OpenClosed icon if you pick this option. open-and-closed – Uses separate open and closed icons. Modify both Open and Closed icon if you use this option.
data-tab-activation	automatic, manual	According to W3C guidelines there are two types of tabs. With automatic automation keyboard arrows will shift immediately tabs, while with manual you will need to confirm choice by Enter or Space key. Recommended value: automatic

Option configuration

Style presets

Tabs style preset

You should see attribute data-tab-preset under element named Dynamic Tabs – config.

Attribute name	Value
data-tab-preset	tabs
	pills
	bar
	dot

Accordion styles preset

You should see attribute data-accordion-preset under element named Dynamic Tabs – config.
Values:

Attribute name	Value
data-accordion-preset	classic
	pill
	bordered

Style modification

This is aimed to make direct code modification to our styles. Because this is hybrid component, you could not style it with native elements as HTML markup is made on the fly by using JavaScript so it could support Tabs, Dropdown and Accordion options. In the code you will se comments with enumeration and table below explains what is code responsible for. Use this table as guide to find desired styles that need modification.
Please check style preset section which shows no-code styling option, you may not need custom code or if you pick some preset which matches desired design, or you will need less modification.

No	Description of applied styles
1.1	Tabs focus styles. Styles applied when tab navigation item is focused, and styles when content is focused.
1.2	Tabs navigation wrapper container styles. Div that holds tabs navigation items.
1.3	Tabs dot preset styles. Conditional styles when dot preset is chosen.
1.4	Tabs pills preset styles. Conditional styles when pills preset is chosen.
1.5	Tabs tabs preset styles. Conditional styles when tabs preset is chosen.
1.6	Tabs bar preset styles. Conditional styles when bar preset is chosen.
2.1	Accordion icons styles
2.2	Accordion button to expand styles
2.3	Accordion classic preset styles. Conditional styles when classic preset is chosen.
2.4	Accordion pill preset styles. Conditional styles when pill preset is chosen.
2.5	Accordion bordered preset styles. Conditional styles when bordered preset is chosen.
3.1	Dropdown (select) base styles
3.2	Dropdown (select) hover styles
4.1	Functionality rules, do not modify as it may lead to broken things

Responsive options

Responsive type

You should see attribute data-responsive-type under element named Dynamic Tabs – config.
Values: Tabs, Accordion, Dropdown

Responsive screen size

You should see attribute data-responsive-px under element named Dynamic Tabs – config.
Values: Integer number (100, 360, 500 etc.)

This will tell when you want to switch from Tabs view to Accordion or Dropdown view.

Advanced styling

Tabs – custom CSS

In order to make advanced design modification of tabs you could you use following selectors:

Element	CSS target
Navigation wrapper	.hs-nav-container.hs-nav-container [role=”tablist”]{}
Navigation item (default state)	.hs-nav-container .hs-tablink[aria-selected=”true”] [data-tab=”tabnav”]{}
Navigation item (hover state)	.hs-nav-container .hs-tablink:hover, .hs-nav-container .hs-tablink [data-tab=”tabnav”]:focus-within{}
Navigation item (active state)	.hs-nav-container .hs-tablink[aria-selected=”true”] [data-tab=”tabnav”]{}
Navigation Underline (active & hover state)	.hs-nav-container .hs-tablink [data-tab=”tabnav”]:hover:after, .hs-nav-container .hs-tablink [aria-selected=”true”] [data-tab=”tabnav”]:after{}

Accordion – custom CSS

Customizing Icons

You should see attribute data-accordion-icon under element named Dynamic Tabs – config.
Values: open-and-closed | openclosed

open-and-closed value will use two separate icons for open and closed accordion state like + and -.
openclosed value will use single icon for example chevron (>) which gets rotated.

In order to customize accordion you could use following selectors:

Element	CSS target
Accordion button trigger (default state)	.hs-accordion-button.hs-accordion-button{}
Accordion button trigger (hover & focus state)	.hs-accordion-button.hs-accordion-button:hover,.hs-accordion-button.hs-accordion-button:focus-within{}
Accordion button trigger (expanded state)	.hs-accordion-button.hs-accordion-button[aria-expanded=”true”]{}

Dropdown – custom CSS

In order to customize dropdown you could use following selectors:

Element	CSS target
Select element	.hs-nav-select.hs-nav-select{}

Custom view styles hooks

In order to target elements under certain view you could use data-hsview attribute as style hook:

View	CSS target
Tabs	[data-hsview=”tabs”] .my-custom-selector{}
Accordion	[data-hsview=”accordion”] .my-custom-selector{}
Dropdown	[data-hsview=”dropdown”] .my-custom-selector{}

Accessibility

Tabs

Tab navigation markup

<div role="tablist">  
  <button id="tab-1" tabindex="0" role="tab" aria-controls="tabcontent1" aria-selected="true"></button>
  <button id="tab-1" tabindex="-1" role="tab" aria-controls="tabcontent2" aria-selected="false"></button>
  <button id="tab-1" tabindex="-1" role="tab" aria-controls="tabcontent3" aria-selected="false"></button>
</div>
<div id="tabcontent1" role="tabpanel"  aria-labelledby="tab-1" class="is-active"></div>
<div id="tabcontent2" role="tabpanel"  aria-labelledby="tab-2"></div>
<div id="tabcontent3" role="tabpanel"  aria-labelledby="tab-3"></div>

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
tablist		div	The tablist role identifies the element that serves as the container for a set of tabs. The tab content are referred to as tabpanel elements.
tab		button	The ARIA tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.
	aria-selected=”true”	button	Selected button will tell screen reader it is selected by using aria-selected=”true”
	tabindex=”-1″	button	Buttons that are not selected will have negative tabindex to exclude them from tabbing because tab should lead to first focus-able element inside tabpanel. And switching tabs will be done with JavaScript which will listen for ArrowLeft and ArrowRight.
	aria-controls=”TCID”	button	The global aria-controls property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
	id=”NID”	button
tabpanel		div	The `tabpanel` role indicates the element is a container for the resources associated with a `tab` role, where each `tab` is contained in a `tablist`.
	aria-labelledby=”NID”	div	The aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to.
	id=”TCID”

Keyboard navigation

We are busting navigation with TAB key so user would not go through tab navigation, and would lead him to tab content. Switching tabs is done with keyboard arrow keys. There are two modes of activation:

automatic
manual

In automatic activation mode, after pressing arrow keys it will change tabs instantly without need to confirm choice to switch by pressing enter/tab key.

Tabbing through content

When user moves around content, and gets to last focus-able element in tab content, next TAB key press should lead to opening next tab, and vice versa with SHIFT + TAB.

Accordion

Code below is showing simplified markup of Accordion responsive view.

<div class="accordion-content">
  <h3>
    <button id="accordion-button-1" aria-expanded="true" aria-controls="tabcontent1">Tab1</button>
  </h3>
  <div id="tabcontent2" aria-labelledby="accordion-button-1" role="region" class="tab-content" hidden></div>
</div>
<div class="accordion-content">
  <h3>
    <button id="accordion-button-2" aria-controls="tabcontent2">Tab1</button>
  </h3>
  <div id="tabcontent2" aria-labelledby="accordion-button-2" role="region" class="tab-content" hidden></div>
</div>

Keyboard navigation

Key	Function
`Space` or `Enter`	When focus is on the accordion header of a collapsed section, expands the section.
Tab	Moves focus to the next focusable element. All focusable elements in the accordion are included in the page `Tab` sequence.
Shift + Tab	Moves focus to the previous focusable element. All focusable elements in the accordion are included in the page `Tab` sequence.

Accordion Keyboard Navigation (source)

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
		`h3`*	*Heading level is automatically picked up by script which check surrounding content, fallback to script is h3. Element that serves as an accordion header. Each accordion header element contains a button that controls the visibility of its content panel. The example uses heading level 3 so it fits correctly within the outline of the page; the example is contained in a section titled with a level 2 heading.
	`aria-expanded="true"`	button	Set to `true` when the Accordion panel is expanded, otherwise set to `false`.
	`aria-controls="ID"`	div	Points to the ID of the panel which the header controls.
region		div	Creates a landmark region that contains the currently expanded accordion panel.
	`aria-labelledby="IDREF"`	div	Defines the accessible name for the `region` element. References the accordion header button that expands and collapses the region. `region` elements are required to have an accessible name to be identified as a landmark.

Accordion Markup Enhancements (source)

Dropdown

Dropdown uses same structure as Tabs, just navigation is replaced with dropdown. Semantics are enhanced with aria-label to tell screen readers that dropdown is related to Content Tabs.

Keyboard Naviagation

Key	Function
`Space`	When focus is on the unopened dropdown (HTML select element) Space key will open dropdown.
Enter	When dropdown is open, Enter key will select dropdown option item and close dropdown.
ArrowUp and ArrowDown	When dropdown is open, ArrowUp and ArrowDown key will move selection to next/previous option item.
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.

Day 1	Age Verification	Variant 1 Variant 2 Variant 3
Day 2	Skip Link	Variant 1
Day 3	Hotspot	Variant 1
Day 4	Grid Switcher	Variant 1
Day 5	Morphing Tabs	Variant 1
Day 6	Animated Stacking Cards	Variant 1
Day 7	Sub-navigation	Variant 1 Variant 2

Dynamic Lightbox Classic

Component Madness 2024

Age Verification in Breakdance

Lean. Clean. Machine.

Headspin UI Copilot v1.3

Brandy template documentation

How to get started real quick with Headspin

Slider Framework

Dynamic Tabs

Dynamic Lightbox Classic

Overview

Documentation

More examples

You might also like

Dynamic Lightbox Iframe

Dynamic Tabs Loop

Dynamic accordion

Dynamic Tabs Repeater

Find more about Headspin UI

Products

Resources

Community

Legal