Keeping Sites Accessible With Types

hX : HeadingLevel -> List (Attribute msg) -> List (Html msg) -> Html msg
hX level =
    case level of
        H1 ->
            h1

        H2 ->
            h2

        H3 ->
            h3

        H4 ->
            h4

        H5 ->
            h5

        H6 ->
            h6

heading : HeadingLevel -> List (Attribute msg) -> List (Html msg) -> Html msg
heading level attrs children =
    hX level (class "myHeading" :: attrs) children


subHeading : HeadingLevel -> List (Attribute msg) -> List (Html msg) -> Html msg
subHeading level attrs children =
    hX level (class "mySubHeading" :: attrs) children

view : Model -> Html ()
view model =
  div []
    [ heading H1 [] [ text "Heading Demo" ]
    , nestedSection H2 "Hello"
    ]   

nestedSection : HeadingLevel -> String -> Html msg
nestedSection level demoData =
  div []
    [ subHeading level [] [ text "Data" ]
    , p [] [ text "This is a section about data." ]
    
    -- Propagate the heading level + 1
    , subHeading (incrementLevel level) [] [ text "Count" ]
    , p [] [ text demoData ]
    ]

type
  InputLabelMethod
  -- Label contains the input + text
  = EmbeddedLabel String
  --Label is assocciated with a DOM id
  | LabelledById DomId


type DomId
    = DomId String


domIdToString (DomId idRef) =
    idRef

-- Creating an input
input : InputLabelMethod -> List (Attribute msg) -> List (Html msg) -> Html msg
input labelMethod attrs children =
    case labelMethod of
        EmbeddedLabel labelText ->
            label []
                [ text labelText
                , Html.input attrs children
                ]

        LabelledById (DomId idRef) ->
            Html.input
                (id idRef :: attrs)
                children


inputLabel : DomId -> List (Attribute msg) -> List (Html msg) -> Html msg
inputLabel idRef attrs children =
    label (for (domIdToString idRef) :: attrs) children

-- In use
nameLabelId =
  DomId "nameLabel"

view : Model -> Html ()
view model =
  div []
    [ input (EmbeddedLabel "Email") [ attribute "type" "email ] []
    , inputLabel nameLabelId [] [text "Name"]
    , input (LabelledById nameLabelId) [ attribute "type" "text" ] []
    ]

view =
    div []
        [ -- Ok
          img Decorative [ src "/kitten.jpg" ]
        , img (Content "The top of some colored buildings lit by sunset.") [ src "/sunset.jpg" ]
        , -- Error! Expected "Purpose"
          img [ src "/error.jpg" ]
        ]

-- Creating a reusable image/icon
homeIcon : Purpose -> List (Attribute msg) -> Html msg
homeIcon purpose attrs =
    svgImg purpose attrs 
        [ polyline [ points "21 8 21 21 3 21 3 8" ] []
        , rect [ x "1", y "3", width "22", height "5" ] []
        , line [ x1 "10", y1 "12", x2 "14", y2 "12" ] []
        ]

-- In use
view model =
    nav [] [
      a [href "/"] [homeIcon (Content "Home") []],
      a [href "/entries"] [
        homeIcon Decorative [], 
        text "Home"
     ]
    ]

type Purpose =
  | {type: 'decorative'}
  | {type: 'standalone', label: string}

const Decorative = (): Purpose => ({type: 'decorative'});
const Standalone = (label: string): Purpose => ({type: 'standalone', label});

interface IconProps extends SVGAttributes<SVGElement> {
  purpose: Purpose;
  color?: string;
  size?: string | number;
}