Accessibility improvements to the customize dialog

Thank you for filing this issue and creating the MR!

Can you please have a look at this comment 📌 Missing 'aria-expanded' attribute in 'Customize' button Active and consider to add the attribute aria-haspopup="dialog"?

Thank you for reviewing!
added the aria-haspopup="dialog" as requested :)

I've taken a look at the MR92 on macOS Sequoia with the latest Safari and VoiceOver. At first, both are things i've tried to get into a PR upstream in klaro-js a few weeks or already months back, but I've struggled to get the tooling working properly and then got distracted :(, but i guess in the long run it might still be reasonable to create a PR for those changes upstream. But for now it is already fixing the imminent issue within the context of drupal, therefore a double thumbs up for creating and working on the issue.

about point 1: semantically, it feels odd to have a link element that is styled as a link but with a role of button. I consider it cleaner to use links for what they are made for, to point the user to another page, while buttons are used to let the user do something on the current page. if the element should be a button then i usually prefer to also use an actual button element - except overriding the markup by klaro would complicate things and it would be a jumping through hoops. :/
aside the question if a link or a button element is used in regard to semantics, i wonder what type of button should be used styling wise: a secondary button, a button or an action link? (for context see the drupal design system ) . It also feels odd to have two primary buttons (decline and accept) on the dialog, shouldn't it be only one primary button there?
In regard to the aural interface there is another detail to note, all the three buttons are missing a context, if a person is navigating by for example the rotor and gets only announced the available buttons on a page it is close to impossible to figure out the context for each button, and it should be avoided that a user has to inspect the close proximity of the element to learn about the context (check rotor.mp4 - close your eyes and try to make sense of things without the visual context). but the points about the styling and the labeling are probably out of scope for this issue.

about point 2: There is the problem that the focus isn't contained within the dialog modal, you are able to tab in and out of the modal and into the background of the modal or into the browser window (see tabbing.mp4)

The focus of this issue is to fix problems with quick solutions. And I want to thank @adel-by for the MR.

@rkoller found important problems - but I think they are a little out of scope. I opened #3530935 for the button imporvements (see point 1).

What is about point 2? Is this in scope of this issue? Else I would like to merge and try to fix the problem in a separate issue or upstream in klaro-js.

I created the new tickets #3530935 and #3530971 and merge this issue.

Thank you all for reporting, contributing and testing!

Automatically closed - issue fixed for 2 weeks with no activity.