DOM for a radio group

Votre échantillon

Choisissez

Fond de teint 1

Peau clair avec sous ton neutre beige

Offert

Fond de teint 2

Peau clair avec sous ton neutre beige

Offert

Fond de teint 3

Peau clair avec sous ton neutre beige

Offert

Also work tabindex with Javascript and keyboard as per

https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio-1/radio-1.html

Or Active descendant with Javascript as per

https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio-2/radio-2.html

Toggle aria-checked="false" to "true" when checked

CODE


	<div class="sc-cHGsZl UPIhK"><h3 class="sc-TOsTZ eHtyRI" id="p1">Votre échantillon</h3>

    

<div class="sc-kpOJdX LsipW"><div class="sc-dxgOiQ ijyDrq">

<h4 class="sc-hMqMXs fhyxFT" id="p2">Choisissez</h4></div>

<div role="radiogroup" aria-labelledby="p1 p2" class="sc-jKJlTe hfptuG"><div class="sc-eNQAEJ iaKUtb"><div class="sc-kEYyzF dPxMYW">

<button role="radio" aria-checked="false" aria-labelledby="p3" class="sc-kkGfuU hZEMoO"><div class="sc-iAyFgw iHjDDY"></div></button>

<div id="p3" class="sc-hSdWYo bANqqJ">

<h3 class="sc-eHgmQL dhmyMr">Fond de teint 1</h3><p class="sc-cvbbAY gnTBKq">Peau clair avec sous ton neutre beige </p><p class="sc-cvbbAY gnTBKq"> </p>

<span class="sc-jWBwVP dtIigR">Offert</span></div></div>

<div class="sc-kEYyzF dPxMYW" >

<button role="radio" aria-checked="false" aria-labelledby="p4" class="sc-kkGfuU fNNGJL"><div class="sc-iAyFgw iHjDDY"></div></button>

<div id="p4" class="sc-hSdWYo bANqqJ">

<h3 class="sc-eHgmQL dhmyMr">Fond de teint 2 </h3><p class="sc-cvbbAY gnTBKq">Peau clair avec sous ton neutre beige </p><span class="sc-jWBwVP dtIigR">Offert</span></div></div>



<div  class="sc-kEYyzF dPxMYW">

<button role="radio" aria-checked="false" aria-labelledby="p5" class="sc-kkGfuU fYOGQa"><div class="sc-iAyFgw iHjDDY"></div></button>

<div id="p5" class="sc-hSdWYo bANqqJ"><h3 class="sc-eHgmQL dhmyMr">Fond de teint 3</h3><p class="sc-cvbbAY gnTBKq">Peau clair avec sous ton neutre beige </p><span class="sc-jWBwVP dtIigR">Offert</span></div></div></div></div><div class="sc-cMljjf cipxFL"><button class="MuiButtonBase-root MuiButton-root MuiButton-contained sc-jAaTju eVGbUT MuiButton-containedSecondary Mui-disabled Mui-disabled" tabindex="-1" type="submit" disabled=""><span class="MuiButton-label">Validate</span></button></div></div></div>