Accordion Adjustments #7
Conversation
- to prevent mistakes made by styling content wrapper incorrectly - also added some escaping
| @@ -1,15 +1,16 @@ | |||
| <div class="flyntComponent" is="flynt-accordion-default"> | |||
| <div class="container"> | |||
| <div class="content"> | |||
| <ul class="accordion" aria-label="Accordion Panel"> | |||
| <ul class="accordion" aria-label="{{ ariaLabel|e }}"> | |||
There was a problem hiding this comment.
Do we actually need this aria label at all? I don't get the accessibility value on this one and found w3 doesn't even have it in their example: https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html
There was a problem hiding this comment.
True, I don't really see the immediate value of this label, though I didn't test on a screen reader yet. If we're talking accessibility, this seems to also be a good summary resource for accordions: https://davatron5000.github.io/a11y-nutrition-cards/components/accordion
There was a problem hiding this comment.
Let's remove it then. Makes the component and content maintainability simpler. If we find out we need it (or another aria-label), I would be happy to add it in again.
There was a problem hiding this comment.
I believe this is where the aria label might have originated: http://web-accessibility.carnegiemuseums.org/code/accordions/. They don't provide a reason other than "to let the user know explicitly that they are dealing with accordions" and their source U.S. Web Design System listed below the article also doesn't add an aria-label.
I removed the aria-label in the latest commit.
added field for hardcoded aria labelremoved aria label