@@ -138,7 +138,7 @@ Enables external control of the expansion.
138
138
139
139
Class(es) to apply to the 'heading' element.
140
140
141
- #### headingLevel : ` number` [*optional*, default: ` 3 ` ]
141
+ #### ariaLevel : ` number` [*optional*, default: ` 3 ` ]
142
142
143
143
Will determine which 'heading' element is used in the markup. A value of ` 1 `
144
144
would make your element an ` < h1> ` tag, and likewise a value of ` 6 ` would make it
@@ -188,7 +188,8 @@ you, including:
188
188
189
189
- Applying appropriate aria attributes (` aria- expanded` , ` aria- controls` ,
190
190
` aria- disabled` , ` aria- hidden` and ` aria- labelledby` ).
191
- - Applying appropriate ` role` attributes (` button` , ` heading` , ` region` ).
191
+ - Applying appropriate ` role` attributes (` region` ).
192
+ - Using semantic HTML elements (` h1` - ` h6` , ` button` ).
192
193
- Applying appropriate ` tabindex` attributes.
193
194
- Applying keyboard interactivity ('space', 'end', 'tab', 'up', 'down', 'home'
194
195
and 'end' keys).
@@ -199,10 +200,10 @@ spec-compliant:
199
200
- Only ever use
200
201
[phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content)
201
202
inside of your ` AccordionItemHeading` component. If in doubt, use text only.
202
- - Always provide an ` aria - level ` prop to your ` AccordionItemHeading`
203
- component, _especially_ if you are nesting accordions. This attribute is a
204
- signal used by assistive technologies (eg. screenreaders) to determine which
205
- heading level (ie. ` h1 ` - ` h6 ` ) to treat your heading as .
203
+ - Remember to provide an ` ariaLevel ` prop to your ` AccordionItemHeading`
204
+ component, when you are nesting accordions. The levels are used by assistive
205
+ technologies (eg. screenreaders) to infer structure, by default each heading
206
+ uses ` h3 ` .
206
207
207
208
If you have any questions about your implementation, then please don't be afraid
208
209
to get in touch via our
0 commit comments