[Copilot]

Thanks for assigning this issue to me. I'm starting to work on it and will keep this PR's description up to date as I form a plan and make progress.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Refactor: Prefer tag over ARIA role (part 4)</issue_title>
<issue_description>Problem:
Use <input type="button">, <input type="image">, <input type="reset">, <input type="submit">, or <button> instead of the "button" role to ensure accessibility across all devices.

Why is this an issue?
ARIA (Accessible Rich Internet Applications) roles are used to make web content and web applications more accessible to people with disabilities. However, you should not use an ARIA role on a generic element (like span or div) if there is a semantic HTML tag with similar functionality, just use that tag instead.

For example, instead of using a div element with a button role (<div role="button">Click me</div>), you should just use a button element (<button>Click me</button>).

Semantic HTML tags are generally preferred over ARIA roles for accessibility due to their built-in functionality, universal support by browsers and assistive technologies, simplicity, and maintainability. They come with inherent behaviors and keyboard interactions, reducing the need for additional JavaScript. Semantic HTML also enhances SEO by helping search engines better understand the content and structure of web pages. While ARIA roles are useful, they should be considered a last resort when no suitable HTML element can provide the required behavior or semantics.

<div role="button" onClick={handleClick} /* Noncompliant */>Click me</div>

Replace the ARIA role with an appropriate HTML tag.

<button onClick={handleClick}>Click me</button>

Problem locations:
packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx:53
packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Accordion/Accordion.tsx:51
packages/ketcher-react/src/script/ui/views/modal/components/toolbox/Atom/Atom.tsx:261</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Refactor: Prefer tag over ARIA role (part 4) #8612

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.