Repository navigation
Add a disabled option to Listbox trigger - #32
Closed
RobertJoonas wants to merge 2 commits into
Closed
RobertJoonas wants to merge 2 commits into
RobertJoonas wants to merge 2 commits into
Conversation
Contributor
Author
|
Closing in favour of #34 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a
disabledattribute to the listbox trigger.Allows disabling the entire listbox with one flag instead of having to reach into Prima's internals to hand-roll aria-disabled/tabindex="-1".
A disabled trigger can't open the listbox and is removed from the tab order — the same behavior as a native
<select disabled>. Prima only setsdata-disabledon it. Styling the disabled state (opacity, cursor, etc.) is left entirely to the consumer.Why `disabled` lives on `listbox_trigger`, not on listbox (the wrapper)?
The intuitive place to put this flag is on the outer `<.listbox>`, since that's what a consumer thinks of as "the field." That doesn't work because:
Listbox itself can't reach into
<.listbox_trigger>s markup -- it's written by the caller as:slotcontent. There's no React-like mechanism in Phoenix components for a parent to inject attributes into a child component invoked inside its own slot, so<.listbox disabled={true}>has no way to make the trigger's<button>actually carry aria-disabled/tabindex="-1" in the server-rendered HTML.ARIA states and tabindex don't cascade. Unlike CSS,
aria-disabledon an ancestor has no effect on a descendant's accessible state — a screen reader announces the state of whatever element has focus, not an ancestor's attributes. And tabindex only ever affects the element it's set on. So the signal that actually matters for accessibility and keyboard behavior can only ever live on the itself, not on a wrapperThe alternative — having the JS hook copy a disabled flag from the wrapper down onto the button at mount time would leave a brief window after first paint, before the hook mounts, where the trigger is technically still focusable and clickable. Putting
disableddirectly onlistbox_triggermeans the correct attributes exist in the very first HTML response, with no JS dependency.Why not implement the same ability for Dropdown?
Skipped this because there's no use case for it yet in our own application, and disabling a whole action menu sounds like a corner-case anyway. Disabling a select field is more common and finds use already in the analytics repo.