-
-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[color-slider][channel-slider][space-picker]: <label for="id"> not attaching to htmlFor element #177
Comments
@DmitrySharabin could you triage? |
I did the same thing, setting
You might want to consider that a separate issue. IMO it goes beyond focusing the element via a label, which you solved with your When you combine focusable and unfocusable elements inside the custom element, complications arise due to combinations of
That's when the custom element is focused, but you have clicked on something unfocusable inside it, or tabbed from an inner element to the outer custom element itself. Yes, the outer custom element is a separate item in the tab order that includes slotted/templated elements, at least when you combine un/focusable inside it. (fyi - there is a Chrome issue that I have yet to submit: in this case Once you get into managing To understand all the wrinkles in my setup, I had to test focusing and blurring the inner and outer elements in all the possible ways, via both mouse and keyboard. I don't have any custom elements with just a single focusable element inside, like |
It sounds like the ideal thing for the For keyboard navigation, once you set tabindex to zero, you're stuck with the extra, focusable outer element. For mouse/touch, it's not an issue for the default This is where inheriting from |
https://codepen.io/sidewayss/pen/Wbevapq I have updated the original codepen to add:
Note the way the two I'm not suggesting any course of action. I'm still figuring out how this works. I set a default |
Wait, so even though there are focusable elements within the component, we can’t focus them without setting tabindex on the host?! Yikes. Does ElementInternals really offer nothing for this? for the other thing, look up delegatesfocus |
Not when you click on the outer element or its label (or an unfocusable inner element). Keyboard navigation works. Clicking on the inner element works. If there's no padding or border on the outer element then you can't click on it.
I have no idea. You definitely know more about it than I do.
Nice to know. Would it override this |
This example sets So I can't set it in the codepen for demo purposes. Based on the docs and the examples there, the combination of What's so bad about having to set I'm also wondering why you wouldn't inherit directly from |
OK, I checked the elements/src/common/color-element.js Line 14 in 20b81f0
- this.attachShadow({mode: "open"});
+ this.attachShadow({mode: "open", delegatesFocus: true}); delegatesFocus.movI'll check how our other elements behave if we enable this feature and send a PR with the fix. |
For the following code snippet, I got the results: <label for=el>Element:</label>
<color-element id=el></color-element>
For For editable I'm not sure what should be focused inside |
@DmitrySharabin - I think that the answer regarding what gets focus inside Or at least that's a good place to start. |
https://codepen.io/sidewayss/pen/Wbevapq
Open the console in CodePen and compare to JavaScript pane:
I assume that the label should set focus to the
htmlFor
element because I see from these code search results that these elements all have a version of this declared (this one is from<space-picker>
):It's harder to decipher in CodePen, but if you open this original version of the pen on my personal site in Chrome, go to Dev Tools, the Issues tab in the console, you'll see "Incorrect use of <label for= etc.". In the pen you'll find 4 such "violating nodes", and the bottom two are the color elements. So Chrome is not recognizing these as labelable elements.
I just tried this in my repo and setting
formAssociated = {}
instead of= true
makes no difference there.I can't seem to get into NudeElements in the debugger, so I'm not sure how to check if
attachInternals()
is actually running.The text was updated successfully, but these errors were encountered: