NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-11 06:31:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix focus usage in example modal

Browse Source
This commit is contained in:
Michael Glass 2019-10-23 18:10:05 +02:00
parent ff3074bf82
commit cc35555ac5
No known key found for this signature in database
GPG Key ID: 9CDD376916491385
1 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
styleguide-app/Examples/Modal.elm
View File

@ -144,9 +144,9 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
case ( state.showX, state.showContinue, state.showSecondary ) of
( True, True, True ) ->
Modal.multipleFocusableElementView
(\focusableElementAttrs ->
(\{ firstFocusableElement, autofocusElement, lastFocusableElement } ->
div []
[ closeButton focusableElementAttrs.firstFocusableElement
[ closeButton firstFocusableElement
, viewContent
{ content = [ viewModalContent state.longContent ]
, footer =
@ -154,14 +154,14 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
[ firstButtonStyle
, Button.onClick ForceClose
, Button.large
, Button.custom [ focusableElementAttrs.autofocusElement ]
, Button.custom [ autofocusElement ]
]
, ClickableText.button "Close"
[ ClickableText.onClick ForceClose
, ClickableText.large
, ClickableText.custom
(css [ Css.marginTop (Css.px 12) ]
:: focusableElementAttrs.lastFocusableElement
:: lastFocusableElement
)
]
]
@ -171,9 +171,9 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
( True, False, True ) ->
Modal.multipleFocusableElementView
(\focusableElementAttrs ->
(\{ firstFocusableElement, autofocusElement, lastFocusableElement } ->
div []
[ closeButton focusableElementAttrs.firstFocusableElement
[ closeButton firstFocusableElement
, viewContent
{ content = [ viewModalContent state.longContent ]
, footer =
@ -182,7 +182,8 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
, ClickableText.large
, ClickableText.custom
(css [ Css.marginTop (Css.px 12) ]
:: focusableElementAttrs.lastFocusableElement
:: autofocusElement
:: lastFocusableElement
)
]
]
@ -191,10 +192,10 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
)
( True, False, False ) ->
Modal.multipleFocusableElementView
(\focusableElementAttrs ->
Modal.onlyFocusableElementView
(\onlyFocusableElement ->
div []
[ closeButton focusableElementAttrs.firstFocusableElement
[ closeButton onlyFocusableElement
, viewContent
{ content = [ viewModalContent state.longContent ]
, footer = []
@ -204,16 +205,16 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
( True, True, False ) ->
Modal.multipleFocusableElementView
(\focusableElementAttrs ->
(\{ firstFocusableElement, autofocusElement, lastFocusableElement } ->
div []
[ closeButton focusableElementAttrs.firstFocusableElement
[ closeButton firstFocusableElement
, viewContent
{ content = [ viewModalContent state.longContent ]
, footer =
[ Button.button "Continue"
[ firstButtonStyle
, Button.onClick ForceClose
, Button.custom focusableElementAttrs.lastFocusableElement
, Button.custom (autofocusElement :: lastFocusableElement)
, Button.large
]
]
@ -223,7 +224,7 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
( False, True, True ) ->
Modal.multipleFocusableElementView
(\focusableElementAttrs ->
(\{ firstFocusableElement, autofocusElement, lastFocusableElement } ->
div []
[ viewContent
{ content = [ viewModalContent state.longContent ]
@ -231,7 +232,7 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
[ Button.button "Continue"
[ firstButtonStyle
, Button.onClick ForceClose
, Button.custom focusableElementAttrs.firstFocusableElement
, Button.custom (autofocusElement :: firstFocusableElement)
, Button.large
]
, ClickableText.button "Close"
@ -239,7 +240,7 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
, ClickableText.large
, ClickableText.custom
(css [ Css.marginTop (Css.px 12) ]
:: focusableElementAttrs.lastFocusableElement
:: lastFocusableElement
)
]
]
@ -248,8 +249,8 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
)
( False, False, True ) ->
Modal.multipleFocusableElementView
(\focusableElementAttrs ->
Modal.onlyFocusableElementView
(\onlyFocusableElement ->
div []
[ viewContent
{ content = [ viewModalContent state.longContent ]
@ -259,7 +260,7 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
, ClickableText.large
, ClickableText.custom
(css [ Css.marginTop (Css.px 12) ]
:: focusableElementAttrs.lastFocusableElement
:: onlyFocusableElement
)
]
]
@ -268,8 +269,8 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
)
( False, True, False ) ->
Modal.multipleFocusableElementView
(\focusableElementAttrs ->
Modal.onlyFocusableElementView
(\onlyFocusableElement ->
div []
[ viewContent
{ content = [ viewModalContent state.longContent ]
@ -277,7 +278,7 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
[ Button.button "Continue"
[ firstButtonStyle
, Button.onClick ForceClose
, Button.custom [ focusableElementAttrs.autofocusElement ]
, Button.custom onlyFocusableElement
, Button.large
]
]
@ -286,8 +287,8 @@ getFocusable ( state, wrapMsg, firstButtonStyle ) { viewContent, closeButton } =
)
( False, False, False ) ->
Modal.multipleFocusableElementView
(\focusableElementAttrs ->
Modal.onlyFocusableElementView
(\_ ->
div []
[ viewContent
{ content = [ viewModalContent state.longContent ]