Change api to use lastId. Revert change of behaviour for now

Fix examples with control to be disclosure
This commit is contained in:
Brian J. Cardiff 2022-07-08 14:57:40 -03:00
parent b8c04eeef5
commit 1722204874
2 changed files with 38 additions and 29 deletions

View File

@ -105,7 +105,7 @@ type alias MenuConfig msg =
, menuId : String , menuId : String
, zIndex : Int , zIndex : Int
, opensOnHover : Bool , opensOnHover : Bool
, disclosure : Bool , purpose : Purpose
} }
@ -117,6 +117,11 @@ type alias ButtonConfig =
} }
type Purpose
= NavMenu
| Disclosure { lastId : Maybe String }
-- Generators for ButtonAttribute -- Generators for ButtonAttribute
@ -202,11 +207,21 @@ opensOnHover value =
Attribute <| \config -> { config | opensOnHover = value } Attribute <| \config -> { config | opensOnHover = value }
{-| Whether the menu contains a form when opened. This affects how Tab key behaves Defaults to `False`. {-| Makes the menu behave as a disclosure.
For more information, please read [Disclosure (Show/Hide) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
You will need to pass in the last focusable element in the disclosed content in order for:
- any focusable elements in the disclosed content to be keyboard accessible
- the disclosure to close appropriately when the user tabs past all of the disclosed content
You may pass a lastId of Nothing if there is NO focusable content within the disclosure.
-} -}
disclosure : Bool -> Attribute msg disclosure : { lastId : Maybe String } -> Attribute msg
disclosure value = disclosure exitFocusManager =
Attribute <| \config -> { config | disclosure = value } Attribute (\config -> { config | purpose = Disclosure exitFocusManager })
{-| Menu/pulldown configuration: {-| Menu/pulldown configuration:
@ -234,7 +249,7 @@ view attributes config =
, menuId = "" , menuId = ""
, zIndex = 1 , zIndex = 1
, opensOnHover = False , opensOnHover = False
, disclosure = False , purpose = NavMenu
} }
menuConfig = menuConfig =
@ -430,24 +445,19 @@ viewCustom config =
, focus = Just config.buttonId , focus = Just config.buttonId
} }
) )
:: (if config.disclosure then :: [ Key.tab
[] (config.focusAndToggle
{ isOpen = False
else , focus = Nothing
[ Key.tab }
(config.focusAndToggle )
{ isOpen = False , Key.tabBack
, focus = Nothing (config.focusAndToggle
} { isOpen = False
) , focus = Nothing
, Key.tabBack }
(config.focusAndToggle )
{ isOpen = False ]
, focus = Nothing
}
)
]
)
) )
:: styleContainer :: styleContainer
) )

View File

@ -250,12 +250,12 @@ view ellieLinkConfig state =
button buttonAttributes [ text "Custom Menu trigger button" ] button buttonAttributes [ text "Custom Menu trigger button" ]
} }
) )
, ( "Menu.button (with controls)" , ( "Menu.button (with Menu.disclosure)"
, Menu.view , Menu.view
(menuAttributes (menuAttributes
++ List.filterMap identity ++ [ Menu.buttonId "with_controls__button"
[ Just <| Menu.buttonId "with_controls__button" , Menu.menuId "with_controls__menu"
, Just <| Menu.menuId "with_controls__menu" , Menu.disclosure { lastId = Nothing }
] ]
) )
{ isOpen = isOpen "with_controls" { isOpen = isOpen "with_controls"
@ -321,7 +321,6 @@ controlMenuAttributes =
|> ControlExtra.optionalBoolListItem "isDisabled" ( "Menu.isDisabled True", Menu.isDisabled True ) |> ControlExtra.optionalBoolListItem "isDisabled" ( "Menu.isDisabled True", Menu.isDisabled True )
|> ControlExtra.optionalListItem "menuWidth" controlMenuWidth |> ControlExtra.optionalListItem "menuWidth" controlMenuWidth
|> ControlExtra.optionalBoolListItem "opensOnHover" ( "Menu.opensOnHover True", Menu.opensOnHover True ) |> ControlExtra.optionalBoolListItem "opensOnHover" ( "Menu.opensOnHover True", Menu.opensOnHover True )
|> ControlExtra.optionalBoolListItem "disclosure" ( "Menu.disclosure True", Menu.disclosure True )
controlAlignment : Control ( String, Menu.Attribute msg ) controlAlignment : Control ( String, Menu.Attribute msg )