Skip to content

Use semantic HTML in builder frontend #403

@earth-walker

Description

@earth-walker

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

Metadata

Metadata

Labels

help wantedExtra attention is neededrefactorImprovements to architecture, code formatting, etc.

Type

No type

Projects

Status

Ready

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions