@@ -132,6 +132,51 @@ Instead of implicit submission behavior, [try making an `onEnter` event handler
132132
133133And no one has to look up obtuse html documentation to understand the behavior of their code :).
134134
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+
135180-}
136181
137182import Element exposing (Attribute, Color, Element)
@@ -276,12 +321,10 @@ The `onPress` handler will be fired either `onClick` or when the element is focu
276321 , Element.focused
277322 [ Background.color purple ]
278323 ]
279− { onPress = ClickMsg
324+ { onPress = Just ClickMsg
280325 , label = text "My Button"
281326 }
282327
283−`onPress` takes a `Maybe msg`. If you provide the value `Nothing`, then the button will be disabled.
284−
285328-}
286329button :
287330 List (Attribute msg)