git.iko.soy/typeable/elm-ui
on master help sign in
more notes on disabled state
81582bfMatthew Griffith
src/Element/Input.elm+46−3
compare with master
unifiedsplit
@@ -132,6 +132,51 @@ Instead of implicit submission behavior, [try making an `onEnter` event handler
132
132
133And no one has to look up obtuse html documentation to understand the behavior of their code :).
133And no one has to look up obtuse html documentation to understand the behavior of their code :).
134
134
135+
136+# Disabling Inputs
137+
138+You also might be wondering how to disable an input.
139+
140+Disabled inputs can be a little problematic for user experience, and doubly so for accessibility. This is because it's now your priority to inform the user _why_ some field is disabled.
141+
142+If an input is truly disabled, meaning it's not focusable or doesn't send off a `Msg`, you actually lose your ability to help the user out! For those wary about accessibility [this is a big problem.](https://ux.stackexchange.com/questions/103239/should-disabled-elements-be-focusable-for-accessibility-purposes)
143+
144+Here are some alternatives to think about that don't involve explicitly disabling an input.
145+
146+**Disabled Buttons** - Change the `Msg` it fires, the text that is rendered, and optionally set a `Region.description` which will be available to screen readers.
147+
148+ import Element.Input as Input
149+ import Element.Region as Region
150+
151+ myButton ready =
152+ if ready then
153+ Input.button
154+ [ Background.color blue
155+ ]
156+ { onPress =
157+ Just SaveButtonPressed
158+ , label =
159+ text "Save blog post"
160+ }
161+
162+ else
163+ Input.button
164+ [ Background.color grey
165+ , Region.description
166+ "A publish date is required before saving a blogpost."
167+ ]
168+ { onPress =
169+ Just DisabledSaveButtonPressed
170+ , label =
171+ text "Save Blog "
172+ }
173+
174+Consider showing a hint if `DisabledSaveButtonPressed` is sent.
175+
176+For other inputs such as `Input.text`, consider simply rendering it in a normal `paragraph` or `el` if it's not editable.
177+
178+Alternatively, see if it's reasonable to _not_ display an input if you'd normally disable it. Is there an option where it's only visible when it's editable?
179+
135-}
180-}
136
181
137import Element exposing (Attribute, Color, Element)
182import Element exposing (Attribute, Color, Element)
@@ -276,12 +321,10 @@ The `onPress` handler will be fired either `onClick` or when the element is focu
276 , Element.focused
321 , Element.focused
277 [ Background.color purple ]
322 [ Background.color purple ]
278 ]
323 ]
279− { onPress = ClickMsg
324+ { onPress = Just ClickMsg
280 , label = text "My Button"
325 , label = text "My Button"
281 }
326 }
282
327
283−`onPress` takes a `Maybe msg`. If you provide the value `Nothing`, then the button will be disabled.
284−
285-}
328-}
286button :
329button :
287 List (Attribute msg)
330 List (Attribute msg)