@bmartinezcalvo that's actually a good question. It wasn't changed by me. From what I see @egardner added tabIndex = -1 property to the accordion item. I asked about it earlier in this thread but didn't get any response so I'm not sure why it was done/if I should change it.

@bmartinezcalvo thanks, it should be fixed now

I'm not sure about 3rd point - the end icon is centered in the height but its container has the same height as the title and arrow container and every of that element is centered vertically. Are you sure it's not aligned? Maybe I'm missing something here @bmartinezcalvo

I included the configurable demo. All requirements should be addressed now. Also, I added aria-disabled property to the accordion, somehow I missed that during the development.

@bmartinezcalvo sure thing, I can include that configurable demo! I wasn't sure at the beginning what do you mean by that but the examples helped a lot :) I have only one question. You wrote "Description: hide/display it with a toggle switch" but currently the description is passed using a slot. Why do we need such a switch for toggling the visibility of a description? I'm unsure if the switch is needed; no prop in the code handles that.

Thanks @bmartinezcalvo. I submitted the patch without font tokens for now. I updated the docs to show different body content within the accordion though.

In T326665#8905947, @bmartinezcalvo wrote:

Design sign-off done. Adding some things we should fix:

1. The label in the accordion should use the base text that in Codex is 16/22. Updated the spec to reflect this.
2. Could we extend the accordion content to a bigger paragraph? We could use this text from the spec "The accordion content can be as longer as needed, and the type of content can vary according to the need of each use case. Headings should be used to label each section of content."
3. Padding between the arrow and the accordion label should be 8px @spacing-50
4. Accordion content - padding on top should be 8px @spacing-50 (now it's 12px so it makes the accordion content too separated from the label)

Apart form this, I added some notes in the task description about the configurable and standalone demos, could we update them?

Configurable demo should include:

• Description: hide/display it with a toggle switch
• End action prop (icon-only button) with customizable icon if possible
• Disabled: enable/disable the accordion with a toggle switch
• Slot to customize the text in the body content and make it longer if necessary
• LTR/RTL visualization

Other demos in the page should include:

• Customizable label's text style (customize with one of our text tokens, e.g. Heading L 24/30 used in the Minerva's Wikipedia article)
• Represent other body content within the accordion (e.g. an image, a combination of form items, etc.)

---

Moving the task to Ready for development so we can fix the list commented above.

Thanks, I'm much better now! I'll definitely take care of it next week. Besides the design review changes, I see some other things also changed (e.g. padding around action buttons) and I'll revisit it as well.

Hi @CCiufo-WMF, sorry for the recent inactivity but I've been on sick leave for the last two weeks. I can work on it in the first half of next week. Does it suit you?

In T326665#8872238, @AnneT wrote:

@Sswiergosz I'm assigning this to you since you built the component, but do let us know if you don't have time to do follow-up work. Thanks again for your contribution to Codex!