Use native HTML elements where possible

[CoraDale]

Currently the entire accordion is made of divs with various ARIA attributes used to replicate the functionality of native HTML

This fails the first rule of ARIA use: native html elements should be used whenever possible rather than recreating their functionality with aria attributes: https://www.w3.org/TR/using-aria/#firstrule

• <h?> should be used instead of
  'role="heading"' and 'aria-level="?"'
• should be used instead of
  'role="button"'
• should be used instead of

  'role="region"'

I don't think any of those would be impossible to implement.

[CoraDale]

I'm not certain that the ARIA rules are true requirements? They might just be guidelines?
Still it would be best to follow them whenever possible.

[holloway]

@CalinDale I believe this was done to avoid undoing native styling, however this decision was done before my time on RAA

[CoraDale]

Perhaps we should assess whether we can switch to native HTML without affecting styling.
We do seem to have all the correct interactions and functions of these roles implemented, so they may not impact user experience, but are still bad practice according to ARIA.

[holloway]

@CalinDale to use native elements we would affect the styling (the CSS needed) in order to undo native styles, but that's all quite doable and I'm happy to go ahead with that.

Would you like to dev it? We could migrate component-by-component.

[holloway]

First step might be to describe the current markup, and your recommended markup.

[ZebulanStanphill]

Current markup:

<div data-accordion-component="Accordion" class="accordion">
	<div
		data-accordion-component="AccordionItem"
		class="accordion__item"
	>
		<div
			data-accordion-component="AccordionItemHeading"
			aria-level="4"
			role="heading"
			class="accordion__heading"
		>
			<div
				class="accordion__button"
				aria-disabled="false"
				aria-expanded="false"
				aria-controls="accordion__panel-raa-1"
				role="button"
				tabindex="0"
				data-accordion-component="AccordionItemButton"
			>
				ITEM NAME
			</div>
		</div>
		<div
			data-accordion-component="AccordionItemPanel"
			class="accordion__panel"
			id="accordion__panel-raa-1"
			hidden=""
		></div>
	</div>
</div>

Suggested markup:

<div data-accordion-component="Accordion" class="accordion">
	<div
		data-accordion-component="AccordionItem"
		class="accordion__item"
	>
		<h4
			data-accordion-component="AccordionItemHeading"
			class="accordion__heading"
		>
			<button
				class="accordion__button"
				aria-disabled="false"
				aria-expanded="false"
				aria-controls="accordion__panel-raa-1"
				type="button"
				data-accordion-component="AccordionItemButton"
			>
				ITEM NAME
			</button>
		</h4>
		<div
			data-accordion-component="AccordionItemPanel"
			class="accordion__panel"
			id="accordion__panel-raa-1"
			hidden=""
		></div>
	</div>
</div>

(The <h4> would change to a different <h_> element depending on which level was set on the AccordionItemHeading component.)