kirchner / elm-wai-aria-tabs / Accessibility.Tabs

viewStarter : { label : String, tabs : List { label : String, panel : Html msg }, active : String, onChange : String -> Task Browser.Dom.Error () -> msg } -> Html msg

Render a tabs widget with default styling. You have to provide the following fields:

NOTE: This function is meant to get you started with this package. If you need more then one tabs widget on your page or want custom styling and interaction, you should take a look at the view function below.

view : Views node msg -> { label : Label, tabs : List (Tab node tab), active : tab, onChange : tab -> Task Browser.Dom.Error () -> msg, orientation : Orientation, activation : Activation } -> node

Render a (customized) tabs widget. You must provide Views for rendering and the following configuration fields:


type Label

There are two ways to label tabs: it can be labelledby by another DOM element with the given id or it can provide its own label.

labelledby : String -> Label

label : String -> Label


type alias Tab node tag =
{ tag : tag
, id : String
, label : node
, panel : node
, focusable : Basics.Bool 
}


type Activation
    = Automatic
    | Manual

From the WAI-ARIA Authoring Practices:


type Orientation
    = Horizontal
    | Vertical

View customization


type Views node msg

Opaque type for providing view customization of the tabs widget.

html : { container : List (Html.Attribute msg), tabList : List (Html.Attribute msg), tab : Basics.Bool -> List (Html.Attribute msg), panel : Basics.Bool -> List (Html.Attribute msg) } -> Views (Html msg) msg

Generate view customization the standard elm/html package.

The DOM structure of the tabs will be something like this:

tabs =
    Html.div
        [ ... ] -- container attributes
        [ Html.div
            [ ... ] -- tabList attributes
            [ tabs ]
        , panels
        ]

tab =
    Html.button
        [ ... ] -- tab attributes
        [ tabLabel ]

panel =
    Html.div
        [ ... ] -- panel attributes
        [ panelContent ]

Advanced customization

custom : { tabs : TabsAttrs -> { tabs : List node, panels : List node } -> node, tab : TabAttrs msg -> { label : node, active : Basics.Bool } -> node, panel : PanelAttrs -> { panel : node, active : Basics.Bool } -> node } -> Views node msg

If you want to use other UI libraries like rtfeldman/elm-css or mdgriffith/elm-ui you have to generate Views using this function. Take a look at the implementation of html for a starting point. The examples/ folder of the package repository contains an implementation for mdgriffith/elm-ui.


type alias TabsAttrs =
{ role : String
, ariaLabel : Maybe String
, ariaLabelledBy : Maybe String 
}

Make sure to add HTML attributes for all attributes in this record to the tabs list container.


type alias TabAttrs msg =
{ role : String
, ariaSelected : Basics.Bool
, ariaControls : String
, id : String
, onClick : msg
, preventDefaultOnKeydown : Json.Decode.Decoder ( msg
, Basics.Bool )
, tabindex : Basics.Int 
}

Make sure to add HTML attributes and event handlers for all attributes in this record to the tab.


type alias PanelAttrs =
{ role : String
, id : String
, ariaLabelledby : String
, tabindex : Maybe Basics.Int
, hidden : Basics.Bool 
}

Make sure to add HTML attributes for all attributes in this record to the panel.