Aria roles

Use roles for creating ARIA element's semantics. Roles defines the type of UI element.

See MDN article.

"The button role should be used for clickable elements that trigger a response when activated by the user." - MDN

Element.el
    (Events.onClick Msg.SomeEvent :: ARIA.toElementAttributes ARIA.roleButton)
    someChildElement

"Can be used to identify multiple elements inside page content that should be considered as a single image." - MDN

Element.el
    (ARIA.toElementAttributes <| ARIA.roleImage altText)
    [ Element.text "😺 Meow" ]

NOTE: This role enforces aria-label option.

"An element whose content is completely presentational (like a spacer image, decorative graphic, or clearing element)" - W3C

Element.el
    (ARIA.toElementAttributes ARIA.rolePresentation)
    totallyRedundantElement

"The checkbox role is used for checkable interactive controls." -MDN

Element.row
    (ARIA.toElementAttributes <| ARIA.roleCheckbox False)
    [ notCheckedIcon
    , Element.text "I accept the Terms of Service"
    ]

"The radioButton role is used for checkable interactive controls." -MDN

Element.row
    (ARIA.toElementAttributes <| ARIA.roleRadioButton False)
    [ notCheckedIcon
    , Element.text "I accept the Terms of Service"
    ]

"The ARIA tab role indicates an interactive element inside a tablist." -MDN

Element.row []
    [ Element.el
        (ARIA.roleTab True
            |> ARIA.toElementAttributes
            |> (::) tabIndex 0
            |> (::) Event.onClick (Msg.SetTab TabFirst)
        )
        (Element.text "Tab label")
    , Element.el
        (ARIA.roleTab False
            |> ARIA.toElementAttributes
            |> (::) tabIndex -1
            |> (::) Event.onClick (Msg.SetTab TabSecond)
        )
        (Element.text "Another tab")
    ]

NOTE: We're missing aria-controls. And MDN recomends using tabindex as 0 on selected tab and -1 on non-active tabs.

"The ARIA switch role is functionally identical to the checkbox role, except that instead of representing checked/unchecked states, which are fairly generic in meaning, the switch role represents the states on/off." -MDN

Element.el
    (Event.onClick turnOnMsg :: (ARIA.toElementAttributes <| ARIA.roleSwitch False))
    offSwitchIcon

A toggle button has the button role along with its pressed state

Element.el
    (Events.onClick Msg.SomeEvent
        :: ARIA.toElementAttributes ARIA.roleToggleButton isToggled
    )
    someChildElement

"A radiogroup is a type of select list that can only have a single entry checked at any one time." - W3C

Element.column
    (ARIA.toElementAttributes <| ARIA.roleRadioGroup "Pick an ice cream flavor")
    [ chocolateIceCream
    , strawberryIceCream
    ]

NOTE: This role enforces aria-label option.

"A checkable input in a group of elements with the same role, only one of which can be checked at a time." - W3C

Element.row
    (ARIA.toElementAttributes <| ARIA.roleRadio True)
    [ checkedIcon
    , Element.text "Chocolate"
    ]

"Defines a string value that labels the current element" -W3C

ARIA.roleCheckbox False
    |> ARIA.withLabel "I agree with the policy"
    |> ARIA.toElementAttributes

NOTE: This is a global optional parameter, roles builders enforce it when necessary.

Transform a ElementSemantics in a list of Element.Attribute.