There's a lot of divs being used in the builder frontend which should be changed to contextually appropriate semantic elements. This will improve the accessibility and maintainability of the app.
This will not impact the styling of the app as long as we're using Tailwind: https://tailwindcss.com/docs/preflight
Examples:
<div id="manage-benefits-title" class="text-3xl font-bold mb-2 tracking-wide">Manage Benefits</div> -> should use h2 instead of div
<div onClick={onClick} class=" px-4 py-3 text-md font-bold text-gray-700 rounded-md flex items-center hover:bg-gray-300 cursor-pointer select-none" > {buttonText} </div> -> should use button instead of div
main should be used to wrap the page
section should be used to wrap the view beneath the header and tab bars
article should be used for cards
There's a lot of
divs being used in the builder frontend which should be changed to contextually appropriate semantic elements. This will improve the accessibility and maintainability of the app.This will not impact the styling of the app as long as we're using Tailwind: https://tailwindcss.com/docs/preflight
Examples:
<div id="manage-benefits-title" class="text-3xl font-bold mb-2 tracking-wide">Manage Benefits</div>-> should useh2instead ofdiv<div onClick={onClick} class=" px-4 py-3 text-md font-bold text-gray-700 rounded-md flex items-center hover:bg-gray-300 cursor-pointer select-none" > {buttonText} </div>-> should usebuttoninstead ofdivmainshould be used to wrap the pagesectionshould be used to wrap the view beneath the header and tab barsarticleshould be used for cards