elm-wai-aria-tabs

This package offers an implementation of the Tabs widget as specified in the WAI-ARIA Authoring Practices 1.1:

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.

Take a look at the demo page.

See more end-to-end example code in the examples/ folder.

Design Goals

• Stick to the WAI-ARIA guideline as close as possible.
• Offer a simple version for the standard elm/html package.
• Make the widget customizable for any other UI library, e.g. rtfeldman/elm-css or mdgriffith/elm-ui.

Overview

The minimal code to get working tabs with automatic activation would be something like this:

import Browser.Dom
import Html exposing (Html)
import Accessibility.Tabs
import Task exposing (Task)



type alias Model =
    { active : String }


type Msg
    = NoOp
    | UserChangedTab String (Task Browser.Dom.Error ())


init : ( Model, Cmd Msg )
init =
    ( { active = "Nils Frahm" }
    , Cmd.none
    )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

        UserChangedTab active task ->
            ( { model | active = active }
            , Task.attempt (\_ -> NoOp) task
            )


view : Model -> Html Msg
view model =
    let
        toTab ( title, content ) =
            { label = title
            , panel = Html.text content
            }
    in
    Accessibility.Tabs.viewStarter
        { tabs = List.map toTab tabs
        , active = model.active
        , label = "Entertainment"
        , onChange = UserChangedTab
        }


tabs : List ( String, String )
tabs =
    [ ( "Nils Frahm"
      , "Nils Frahm is a ..."
      )
    , ...
    ]

Usage

Add the kirchner/elm-wai-aria-tabs Elm package as a dependency by running

$ elm install kirchner/elm-wai-aria-tabs