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
, zIndex : Int
, opensOnHover : Bool
, disclosure : Bool
, purpose : Purpose
}
@ -117,6 +117,11 @@ type alias ButtonConfig =
}
type Purpose
= NavMenu
| Disclosure { lastId : Maybe String }
-- Generators for ButtonAttribute
@ -202,11 +207,21 @@ 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 value =
Attribute <| \config -> { config | disclosure = value }
disclosure : { lastId : Maybe String } -> Attribute msg
disclosure exitFocusManager =
Attribute (\config -> { config | purpose = Disclosure exitFocusManager })
{-| Menu/pulldown configuration:
@ -234,7 +249,7 @@ view attributes config =
, menuId = ""
, zIndex = 1
, opensOnHover = False
, disclosure = False
, purpose = NavMenu
}
menuConfig =
@ -430,24 +445,19 @@ viewCustom config =
, focus = Just config.buttonId
}
)
:: (if config.disclosure then
[]
else
[ Key.tab
(config.focusAndToggle
{ isOpen = False
, focus = Nothing
}
)
, Key.tabBack
(config.focusAndToggle
{ isOpen = False
, focus = Nothing
}
)
]
)
:: [ Key.tab
(config.focusAndToggle
{ isOpen = False
, focus = Nothing
}
)
, Key.tabBack
(config.focusAndToggle
{ isOpen = False
, focus = Nothing
}
)
]
)
:: styleContainer
)

View File

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