Some of these are also globally available, including: busy
, disabled
, grabbed
, hidden
, invalid
.
required : Basics.Bool -> Html.Styled.Attribute msg
Supported by comboBox
, gridCell
, listBox
, radioGroup
, spinButton
, textBox
, tree
Indicate whether user input is or is not required on a field for valid form submission.
label : String -> Html.Styled.Attribute msg
Supported for all elements.
pressed : Maybe Basics.Bool -> Html.Styled.Attribute msg
Supported on button
.
Use pressed
when describing a toggle button--a button that can be "toggled" between
an on state and an off state (or an on state, an indeterminate state, and an off state).
Please check out these examples as well.
button
[ pressed <| Just True ]
[ text "This button should be styled for site viewers such that it's clear it's pressed!" ]
multiLine : Basics.Bool -> Html.Styled.Attribute msg
Supported for textbox
only.
Indicate whether the textbox
is for multi-line inputs or single-line inputs.
Careful of default keyboard behavior when coupling this property with text inputs, which by default submit their form group on enter.
autoCompleteInline : Html.Styled.Attribute msg
Available on comboBox
or textbox
.
Use when there's a suggestion for completing the field that shows up
in the line that the user is completing.
Be sure to indicate that the auto-completed text is selected.
autoCompleteList : Html.Styled.Attribute msg
Available on comboBox
or textbox
.
Use when there's a suggestion for completing the field that shows up as a list
of options from which the user can pick.
Be sure to indicate that the auto-completed text is selected.
autoCompleteBoth : Html.Styled.Attribute msg
Available on comboBox
or textbox
.
Use when there's a suggestion for completing the field when there's both
inline autocomplete and list autocomplete occurring at once.
Be sure to indicate that the auto-completed text is selected.
checked : Maybe Basics.Bool -> Html.Styled.Attribute msg
Available on checkbox
, option
, radio
, switch
Check boxes can be checked (Just True
), unchecked (Just False
), or indeterminate (Nothing
).
Other elements won't support tri-state checkedness.
See the checked spec.
selected : Basics.Bool -> Html.Styled.Attribute msg
Supported by gridCell
, option
, row
, tab
.
Indicate whether an element (in a single- or multi-selectable widget) is or is not selected.
indeterminate : Html.Styled.Attribute msg
Sets the indeterminate value to be true.
invalid : Basics.Bool -> Html.Styled.Attribute msg
Supported for all elements.
For invalid grammar or spelling, please see invalidGrammar
and invalidSpelling
respectively.
invalidGrammar : Html.Styled.Attribute msg
Supported for all elements.
invalidSpelling : Html.Styled.Attribute msg
Supported for all elements.
expanded : Basics.Bool -> Html.Styled.Attribute msg
Available on button
, comboBox
, document
, link
, section
, sectionHead
, and window
.
Trickily, this attribute can be applied to either an element that is itself
expanded/collapsed, OR to an elment it controls that is either expanded/collapsed.
In the latter case, throw on a controls
attribute as well to clarify the relationship.
hidden : Basics.Bool -> Html.Styled.Attribute msg
readOnly : Basics.Bool -> Html.Styled.Attribute msg
Supported on checkBox
, comboBox
, grid
, gridCell
, listBox
,
radioGroup
, slider
, spinButton
, and textBox
.
Indicates read-only status of a widget, although normal navigation rules and
copying behavior should apply. (Read: readOnly
elements are navigable but
unchangeable, and disabled
elements are neither navigable nor unchangebale).
disabled : Basics.Bool -> Html.Styled.Attribute msg
Supported for all elements. Elements are not disabled (are enabled) by default.
modal : Basics.Bool -> Html.Styled.Attribute msg
Indicate that a modal is showing and the rest of the page contents are not interactable.
import Accessibility exposing (div, h2, p, text)
import Accessibility.Aria exposing (labelledBy)
import Accessibility.Role exposing (dialog)
import Accessibility.Widget exposing (modal)
import Html.Attributes exposing (id)
modal : Html msg
modal =
div [ dialog, modal, labelledBy "header-id" ]
[ h2 [ id "header-id" ] [ text "Modal Header" ]
, p [] [ text "Wow, such modal contents!" ]
]
hasMenuPopUp : Html.Styled.Attribute msg
Indicate that interaction with this element can trigger a menu
pop-up.
Be careful while managing focus and triggering.
hasListBoxPopUp : Html.Styled.Attribute msg
Indicate that interaction with this element can trigger a listBox
pop-up.
Be careful while managing focus and triggering.
hasTreePopUp : Html.Styled.Attribute msg
Indicate that interaction with this element can trigger a tree
pop-up.
Be careful while managing focus and triggering.
hasGridPopUp : Html.Styled.Attribute msg
Indicate that interaction with this element can trigger a grid
pop-up.
Be careful while managing focus and triggering.
hasDialogPopUp : Html.Styled.Attribute msg
Indicate that interaction with this element can trigger a dialog
pop-up.
Be careful while managing focus and triggering.
orientationHorizontal : Html.Styled.Attribute msg
Supported on roles with some sense of inherent orientation:
progressBar
, scrollbar
, select
, separator
, slider
, tabList
, toolBar
Careful: default behavior is inconsistent across those roles.
orientationVertical : Html.Styled.Attribute msg
Supported on roles with some sense of inherent orientation:
progressBar
, scrollbar
, select
, separator
, slider
, tabList
, toolBar
Careful: default behavior is inconsistent across those roles.
valueMin : Basics.Float -> Html.Styled.Attribute msg
Supported by progressBar
, scrollbar
, separator
, slider
, and spinButton
.
Set the min allowed value for a range widget.
valueMax : Basics.Float -> Html.Styled.Attribute msg
Supported by progressBar
, scrollbar
, separator
, slider
, and spinButton
.
Set the max allowed value for a range widget.
valueNow : Basics.Float -> Html.Styled.Attribute msg
Supported by progressBar
, scrollbar
, separator
, slider
, and spinButton
.
Set the current value for a range widget. Don't use this property for indeterminate states.
valueText : String -> Html.Styled.Attribute msg
Supported by progressBar
, scrollbar
, separator
, slider
, and spinButton
.
This property takes precedence over valueNow
, and should show a human-readable
version of the current value. However, valueNow
should always be used.
sortAscending : Html.Styled.Attribute msg
Supported by columnHeader
and rowHeader
, but only where those roles are
used on table or grid headers.
This should only be applied to one header at a time.
Table is sorted by this column's values in ascending order.
sortDescending : Html.Styled.Attribute msg
Supported by columnHeader
and rowHeader
, but only where those roles are
used on table or grid headers.
Only one column in a table should be sorting the values in table.
Table is sorted by this column's values in descending order.
sortCustom : Html.Styled.Attribute msg
Supported by columnHeader
and rowHeader
, but only where those roles are
used on table or grid headers.
Only one column in a table should be sorting the values in table.
Table is sorted by this column's values, but the algorithm for that sorting is custom (not ascending or descending).
sortNone : Html.Styled.Attribute msg
Supported by columnHeader
and rowHeader
, but only where those roles are
used on table or grid headers.
Table is not sorted by this column's values.
multiSelectable : Basics.Bool -> Html.Styled.Attribute msg
Supported on grid
, listBox
, tabList
, tree
. (However, what would it mean
for a tabList
, say, to have multiple selectable descendants?)
When true, users are not restricted to selecting only one selectable descendant at a time.
level : Basics.Int -> Html.Styled.Attribute msg
Supported for grid
, heading
, listItem
, row
, and tabList
.
This attribute is about hierarchy--how many "levels" deep is an element? Please refer to the documentation to get a better sense of when to use.
h7 attributes =
div (heading :: level 7 :: attributes)