Re: [WICG/webcomponents] The is="" attribute is confusing? Maybe we should encourage only ES6 class-based extension. (#509)

I'm realizing how hard it is to write Web Components with ARIA without being able to extend the native elements. For example, I would like to use HTMLButtonElement or HTMLDialogElement, but am forced to use the basic HTMLElement. The alternative is to wrap the intended element inside the WebComponent. But, now that element is now hidden from the regular DOM (HTML writer) meaning it's impossible to set ARIA attributes.

For example, if a user wants to add `aria-label` to the button, it's not proper to be on the parent HTMLElement. One solution is put a mutation observer for each and every ARIA attribute and then copy them down to the intended native element. This is essentially how the Ionic team has wrangled this issue, and seems somewhat messy, requiring constantly updating frameworks as ARIA attributes gets updated. You'll also have to hope that that framework is still maintained in the future, and doesn't fall out-of-spec.

https://github.com/ionic-team/ionic-framework/pull/25156/files

Is there really no clean solution to using native elements as fallback, as suggested by WAI-ARIA, and using Web Components? 

Does Apple have another solution to this problem? 

For the sake of accessibility, we should A) watch for all ARIA attributes, B) don't use Web Components, or C) ignore the recommendation of using native elements?

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/509#issuecomment-1195994666
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/509/1195994666@github.com>