NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-23 08:27:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

set reasonable ARIA labels on the sortable buttons

Browse Source
This commit is contained in:
Brian Hicks 2022-07-06 08:50:34 -05:00
parent d08bab8860
commit 67e54317b6
No known key found for this signature in database
GPG Key ID: C4F324B9CAAB0D50
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/Nri/Ui/SortableTable/V3.elm
View File

@ -21,6 +21,7 @@ Changes from V2:
-}
import Accessibility.Styled.Aria as Aria
import Css exposing (..)
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes exposing (css)
@ -51,6 +52,7 @@ type Column id entry msg
{ id : id
, header : Html msg
, view : entry -> Html msg
, ariaName : String
, sorter : Maybe (Sorter entry)
, width : Int
, cellStyles : entry -> List Style
@ -91,15 +93,17 @@ initDescending initialSort =
string :
{ id : id
, header : String
, ariaName : String
, value : entry -> String
, width : Int
, cellStyles : entry -> List Style
}
-> Column id entry msg
string { id, header, value, width, cellStyles } =
string { id, header, value, ariaName, width, cellStyles } =
Column
{ id = id
, header = Html.text header
, ariaName = ariaName
, view = value >> Html.text
, sorter = Just (simpleSort value)
, width = width
@ -111,6 +115,7 @@ string { id, header, value, width, cellStyles } =
custom :
{ id : id
, header : Html msg
, ariaName : String
, view : entry -> Html msg
, sorter : Maybe (Sorter entry)
, width : Int
@ -121,6 +126,7 @@ custom config =
Column
{ id = config.id
, header = config.header
, ariaName = config.ariaName
, view = config.view
, sorter = config.sorter
, width = config.width
@ -245,15 +251,15 @@ identitySorter =
buildTableColumn : (State id -> msg) -> State id -> Column id entry msg -> Nri.Ui.Table.V5.Column entry msg
buildTableColumn updateMsg state (Column column) =
Nri.Ui.Table.V5.custom
{ header = viewSortHeader (column.sorter /= Nothing) column.header updateMsg state column.id
{ header = viewSortHeader (column.sorter /= Nothing) column.ariaName column.header updateMsg state column.id
, view = column.view
, width = Css.px (toFloat column.width)
, cellStyles = column.cellStyles
}
viewSortHeader : Bool -> Html msg -> (State id -> msg) -> State id -> id -> Html msg
viewSortHeader isSortable header updateMsg state id =
viewSortHeader : Bool -> String -> Html msg -> (State id -> msg) -> State id -> id -> Html msg
viewSortHeader isSortable ariaName header updateMsg state id =
let
nextState =
nextTableState state id
@ -283,13 +289,20 @@ viewSortHeader isSortable header updateMsg state id =
, Css.fontSize (Css.em 1)
]
, Html.Styled.Events.onClick (updateMsg nextState)
-- screen readers should know what clicking this button will do
, Aria.label ("Sort by " ++ ariaName)
]
[ Html.div [] [ header ]
, viewSortButton updateMsg state id
]
else
header
Html.div
[ css [ fontWeight normal ]
, Aria.label ariaName
]
[ header ]
viewSortButton : (State id -> msg) -> State id -> id -> Html msg

6
styleguide-app/Examples/SortableTable.elm
View File

@ -109,6 +109,7 @@ example =
[ SortableTable.string
{ id = FirstName
, header = "First name"
, ariaName = "first name"
, value = .firstName
, width = 125
, cellStyles = \_ -> []
@ -116,6 +117,7 @@ example =
, SortableTable.string
{ id = LastName
, header = "Last name"
, ariaName = "last name"
, value = .lastName
, width = 125
, cellStyles = \_ -> []
@ -123,6 +125,7 @@ example =
, SortableTable.custom
{ id = Coins
, header = Html.text "Coins"
, ariaName = "coins"
, view = .coins >> String.fromInt >> Html.text
, sorter = Just (SortableTable.simpleSort .coins)
, width = 125
@ -130,7 +133,8 @@ example =
}
, SortableTable.custom
{ id = ViewButton
, header = Html.text ""
, header = Html.text "View"
, ariaName = "view"
, view =
\_ ->
Button.link "View"