AXE Accessibility Issue with Accordion - "Interactive controls must not be nested"
Question
Application Type
Reactive



This the part of the coding that I am having issue with:

Enlarged:

<div data-container="" class="section-expandable is--closed " data-expanded="false" aria-expanded="false" aria-disabled="false" role="tab" id="b6-b3-b2-l1-65_0-b1-SectionItem"><div data-container="" class="section-expandable-title" role="button" aria-hidden="false" aria-expanded="false" tabindex="0" aria-controls="b6-b3-b2-l1-65_0-b1-Content" id="b6-b3-b2-l1-65_0-b1-TitleWrapper" style="cursor: pointer;"><div class="dividers full-width" id="b6-b3-b2-l1-65_0-b1-Title"><span data-expression="">Premises 1</span></div><div data-container="" class="section-expandable-icon" aria-hidden="true"></div></div><div data-container="" class="section-expandable-content is--collapsed" tabindex="0" aria-hidden="true" aria-labelledby="b6-b3-b2-l1-65_0-b1-TitleWrapper" id="b6-b3-b2-l1-65_0-b1-ContentWrapper"><div role="tabpanel" id="b6-b3-b2-l1-65_0-b1-Content"><div data-block="MainFlow.TradingDetailsReview" class="OSBlockWidget" id="b6-b3-b2-l1-65_0-$b2"><dl data-advancedhtml="" class="govuk-summary-list"><div data-advancedhtml="" class="govuk-summary-list__row" id="b6-b3-b2-l1-65_0-b2-PremisesName"><dt data-advancedhtml="" class="govuk-summary-list__key">Premises name</dt><dd data-advancedhtml="" class="govuk-summary-list__value"><span data-expression="" class="OSFillParent">Premises 1</span></dd></div><div data-advancedhtml="" class="govuk-summary-list__row" id="b6-b3-b2-l1-65_0-b2-PremisesAddress"><dt data-advancedhtml="" class="govuk-summary-list__key">Premises address</dt><dd data-advancedhtml="" class="govuk-summary-list__value"><div data-block="Address.AddressViewer" class="OSBlockWidget" id="b6-b3-b2-l1-65_0-b2-$b1"><div data-container="" class="ph"></div><div data-container="" class="ph"><div data-container="" class="ph"><span data-expression=""></span></div><div data-container="" class="ph"><span data-expression=""></span></div><div data-container="" class="ph"><span data-expression=""></span></div><div data-container="" class="ph"><span data-expression=""></span></div></div></div></dd></div><div data-advancedhtml="" class="govuk-summary-list__row"><dt data-advancedhtml="" class="govuk-summary-list__key"><span style="margin-top: 10px;">Local council area</span></dt><dd data-advancedhtml="" class="govuk-summary-list__value"><span data-expression=""></span></dd></div><div data-advancedhtml="" class="govuk-summary-list__row"><dt data-advancedhtml="" class="govuk-summary-list__key">Name of responsible person</dt><dd data-advancedhtml="" class="govuk-summary-list__value"><span data-expression="">-</span></dd></div><div data-advancedhtml="" class="govuk-summary-list__row"><dt data-advancedhtml="" class="govuk-summary-list__key">Premises contact number</dt><dd data-advancedhtml="" class="govuk-summary-list__value"><span data-expression="" class="OSFillParent">-</span></dd></div><div data-advancedhtml="" class="govuk-summary-list__row"><dt data-advancedhtml="" class="govuk-summary-list__key">Premises email</dt><dd data-advancedhtml="" class="govuk-summary-list__value"><span data-expression="">-</span></dd></div></dl></div></div></div></div>

<div data-container="" class="section-expandable-title" role="button" aria-hidden="false" aria-expanded="false" tabindex="0" aria-controls="b6-b3-b2-l1-65_0-b1-Content" id="b6-b3-b2-l1-65_0-b1-TitleWrapper" style="cursor: pointer;"><div class="dividers full-width" id="b6-b3-b2-l1-65_0-b1-Title"><span data-expression="">Premises 1</span></div><div data-container="" class="section-expandable-icon" aria-hidden="true"></div></div>

I am guessing it is to do with the 2 roles highlighted below:


AXE advises the following as a solution:


Accordion AXE issue.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.