diff --git a/README.md b/README.md index dbb3e76..eb1f6fa 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ This repo represents a collections of explainers, problem spaced, proposals, and The following are a list of things that I think are interesting that I'll be attempting to formulate thoughts on in other branches: -- aria attribute reflection +- [aria attribute reflection](proposals/aria-attribute-reflection/) - custom element modules - declarative custom elements - declarative web components diff --git a/proposals/aria-attribute-reflection/README.md b/proposals/aria-attribute-reflection/README.md new file mode 100644 index 0000000..b812ccf --- /dev/null +++ b/proposals/aria-attribute-reflection/README.md @@ -0,0 +1,168 @@ +# Aria Attribute Reflection + +_*REQUIRED READING:* The following assumes that the [Aria Attribute Delegation spec](https://leobalter.github.io/cross-root-aria-delegation/) or similar is accepted into the HTML standard in support of delagating aria attributes down into shadow roots. This spec, its path towards standardization, and the [associated explainer](https://github.com/leobalter/cross-root-aria-delegation/blob/main/cross-root-aria-delegation.md) may provide insights into the final shape of solution to the following problem._ + +## Background + +The Aria Practices Guide outlines an example editable combobox without autocomplete pattern as having the following HTML: + +```html + +
+
+ + +
+ +
+``` + +A fairly HTML-first conversion of this pattern to custom element with shadow DOM might look like: + +```html +Search + + #shadow-root +
+ + +
+ + + + + weather + salsa recipes + cheap flights to NY + +
+``` + +In the above revision, the `` elements aren't assumed not to have JS, but there is only a small amount leveraged in this case beyond simply registering custom element. + +Some assumptions about the way these elements are prepared include: + +- roles that can be fixed on elements like `` and `` and removed based on the ability to either sprout that data or apply it with `ElementInternals` were available +- the `for` attribute on `` is either fully synthetic +- slots are used to move general layout of the UI into the `` element + +Already two important pieces of functionality are seen to be missing in browsers today that we won't be going into in this document: + +- `for`-centric functionality needing to be synthetic outlines a need for some form of the mythical "element mixins" based approach to impowering custom elements with features otherwise available to built-in elements that varius browsers have outlined a lack of desire to allow customization of +- [Aria Attribute Delegation](https://leobalter.github.io/cross-root-aria-delegation/) is available to pass neccessary attributes into the `` element and onto the `` that would need to be therein + +However, beyond initial delivery to appropriately deliver this UI in an accessible manner JS is required, and as a UI gets further and further into an application stack, the more likely it is for a component author to both expect and rely on JS to make their work easier. In this way, a `` in the wild might look more like this: + +```html +Search + + #shadow-root delegatedAriaLabel +
+ + +
+ + #shadow-root + + weather + salsa recipes + cheap flights to NY + +
+``` + +The important version of this is: + +```html +Search + +``` +