fix(components): [collapse] fix accessibility issues

[Karolis-Stoncius]

Using tab related aria attributes results in accessibility issues

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

Description

🤖 Generated by Copilot at fbef87b

The pull request improves the accessibility and semantics of the collapse component by using <button> elements instead of <div> elements for the collapse item headers, and by adjusting the role and aria- attributes accordingly. It also refactors some code and adds some CSS styles to maintain the appearance of the component.

Related Issue

Fixes #___.

Explanation of Changes

🤖 Generated by Copilot at fbef87b

• Replace <div> elements with <button> elements for collapse item headers to improve accessibility and semantics (link, link)
• Remove unnecessary role and aria attributes from collapse component and collapse item content (link, link)
• Move code from collapse.vue to collapse-item.vue to simplify component structure (link)

[pull-request-triage]

👋 @Karolis-Stoncius, seems like this is your first time contribution to element-plus.

• Please make sure that you have read our guidelines and code of conduct before making a contribution.
• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

[github-actions]

Hello @Karolis-Stoncius, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=13832
Please comment the example via this playground if needed.

[Karolis-Stoncius]

@btea can you take a look?

[btea]

I have limited knowledge of the content related to a11y and may need you to review it. @tolking

[tolking]

LGTM

[btea]

@Karolis-Stoncius Based on the problem with #14304, perhaps we should switch back to div.

[btea]

Yeah, this is a feature of form, but changing the div to a button will cause this kind of problem, so this may be a breaking change for previous users and cause problems with 14034.

[Karolis-Stoncius]

Yeah, this is a feature of form, but changing the div to a button will cause this kind of problem, so this may be a breaking change for previous users and cause problems with 14034.

Yeah, you're right. Changing it back to div will bring back the a11y issues tho. Adding role="button" seems to fix it https://stackoverflow.com/a/66294321

[btea]

Could you create a new PR to fix it? Thank you!