mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-25 06:33:09 +03:00
wrap grey block with a button, not a div
This is so we can select the radio button when clicking anywhere in the grey. So why not a <label>? Then the full contents of the disclosure would be read out as the label content when picking options. That content *describes* the radio button but it does not *label* it, and should not be read out before "selected, n of m" and the rest of the radio helper voiceover content.
This commit is contained in:
parent
e0ef0ccc73
commit
5d86a5fa31
@ -374,13 +374,24 @@ internalConfig label config eventsAndValues =
|
|||||||
|
|
||||||
viewBlock : InternalConfig value msg -> Html msg
|
viewBlock : InternalConfig value msg -> Html msg
|
||||||
viewBlock config =
|
viewBlock config =
|
||||||
Html.div
|
let
|
||||||
|
onClick_ =
|
||||||
|
case ( config.onSelect, config.isDisabled ) of
|
||||||
|
( Just onSelect_, False ) ->
|
||||||
|
onClick (onSelect_ config.value)
|
||||||
|
|
||||||
|
_ ->
|
||||||
|
Attributes.none
|
||||||
|
in
|
||||||
|
button
|
||||||
[ id (config.id ++ "-container")
|
[ id (config.id ++ "-container")
|
||||||
, classList [ ( "Nri-RadioButton-PremiumClass", config.showPennant ) ]
|
, classList [ ( "Nri-RadioButton-PremiumClass", config.showPennant ) ]
|
||||||
|
, onClick_
|
||||||
, css
|
, css
|
||||||
[ position relative
|
[ position relative
|
||||||
, display Css.block
|
, displayFlex
|
||||||
, Css.height (px 34)
|
, border zero
|
||||||
|
, Css.minHeight (px 34)
|
||||||
, Css.width <| pct 100
|
, Css.width <| pct 100
|
||||||
, Css.backgroundColor Colors.gray96
|
, Css.backgroundColor Colors.gray96
|
||||||
, padding <| Css.px 20
|
, padding <| Css.px 20
|
||||||
@ -393,12 +404,7 @@ viewBlock config =
|
|||||||
config.isChecked
|
config.isChecked
|
||||||
[ id config.id
|
[ id config.id
|
||||||
, Widget.disabled (config.isLocked || config.isDisabled)
|
, Widget.disabled (config.isLocked || config.isDisabled)
|
||||||
, case ( config.onSelect, config.isDisabled ) of
|
, onClick_
|
||||||
( Just onSelect_, False ) ->
|
|
||||||
onClick (onSelect_ config.value)
|
|
||||||
|
|
||||||
_ ->
|
|
||||||
Attributes.none
|
|
||||||
, class "Nri-RadioButton-HiddenRadioInput"
|
, class "Nri-RadioButton-HiddenRadioInput"
|
||||||
, maybeAttr (Tuple.first >> Aria.controls) config.disclosureIdAndElement
|
, maybeAttr (Tuple.first >> Aria.controls) config.disclosureIdAndElement
|
||||||
, case config.describedByIds of
|
, case config.describedByIds of
|
||||||
|
Loading…
Reference in New Issue
Block a user