You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
On MCT, we use an A11Y-approved pattern that involves both a Dropdown component and a Button that applies the last selected option. Also approved in this pattern, the Button is disabled when the selected option is the currently applied option (this is an exception to the general rule of not disabling buttons).
The purpose for this pattern is because it's not considered an accessible pattern, or good UX, to have the act of selecting an option update the UI. It is acceptable to update the UI if you provide a button (generally with the label "Change" or "Apply") as the affordance that triggers the UI updates.
As it is, we can place a Button next to the rendered UI of a Dropdown, but it's not ideal, because the Dropdown renders a label, possibly a description, and a select element. Aligning the button with the select could be handled more elegantly if Dropdown (or a variation of it) rendered the two elements directly next to each other (e.g., in a flex container).
Beyond that, it would be nice to have all of the behavior described encapsulated inside the component: The selected option is applied only when the Button is clicked, and the Button is disabled when the selected option is already applied.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
On MCT, we use an A11Y-approved pattern that involves both a
Dropdown
component and aButton
that applies the last selectedoption
. Also approved in this pattern, theButton
isdisabled
when the selectedoption
is the currently appliedoption
(this is an exception to the general rule of not disablingbutton
s).The purpose for this pattern is because it's not considered an accessible pattern, or good UX, to have the act of selecting an option update the UI. It is acceptable to update the UI if you provide a button (generally with the
label
"Change" or "Apply") as the affordance that triggers the UI updates.As it is, we can place a
Button
next to the rendered UI of aDropdown
, but it's not ideal, because theDropdown
renders alabel
, possibly a description, and aselect
element. Aligning thebutton
with theselect
could be handled more elegantly ifDropdown
(or a variation of it) rendered the two elements directly next to each other (e.g., in a flex container).Beyond that, it would be nice to have all of the behavior described encapsulated inside the component: The selected
option
is applied only when theButton
is clicked, and theButton
isdisabled
when the selectedoption
is already applied.Beta Was this translation helpful? Give feedback.
All reactions