NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-27 03:14:25 +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 Css exposing (..)
import Html.Styled as Html exposing (Html) import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes exposing (css) import Html.Styled.Attributes exposing (css)
@ -51,6 +52,7 @@ type Column id entry msg
{ id : id { id : id
, header : Html msg , header : Html msg
, view : entry -> Html msg , view : entry -> Html msg
, ariaName : String
, sorter : Maybe (Sorter entry) , sorter : Maybe (Sorter entry)
, width : Int , width : Int
, cellStyles : entry -> List Style , cellStyles : entry -> List Style
@ -91,15 +93,17 @@ initDescending initialSort =
string : string :
{ id : id { id : id
, header : String , header : String
, ariaName : String
, value : entry -> String , value : entry -> String
, width : Int , width : Int
, cellStyles : entry -> List Style , cellStyles : entry -> List Style
} }
-> Column id entry msg -> Column id entry msg
string { id, header, value, width, cellStyles } = string { id, header, value, ariaName, width, cellStyles } =
Column Column
{ id = id { id = id
, header = Html.text header , header = Html.text header
, ariaName = ariaName
, view = value >> Html.text , view = value >> Html.text
, sorter = Just (simpleSort value) , sorter = Just (simpleSort value)
, width = width , width = width
@ -111,6 +115,7 @@ string { id, header, value, width, cellStyles } =
custom : custom :
{ id : id { id : id
, header : Html msg , header : Html msg
, ariaName : String
, view : entry -> Html msg , view : entry -> Html msg
, sorter : Maybe (Sorter entry) , sorter : Maybe (Sorter entry)
, width : Int , width : Int
@ -121,6 +126,7 @@ custom config =
Column Column
{ id = config.id { id = config.id
, header = config.header , header = config.header
, ariaName = config.ariaName
, view = config.view , view = config.view
, sorter = config.sorter , sorter = config.sorter
, width = config.width , 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 : (State id -> msg) -> State id -> Column id entry msg -> Nri.Ui.Table.V5.Column entry msg
buildTableColumn updateMsg state (Column column) = buildTableColumn updateMsg state (Column column) =
Nri.Ui.Table.V5.custom 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 , view = column.view
, width = Css.px (toFloat column.width) , width = Css.px (toFloat column.width)
, cellStyles = column.cellStyles , cellStyles = column.cellStyles
} }
viewSortHeader : Bool -> Html msg -> (State id -> msg) -> State id -> id -> Html msg viewSortHeader : Bool -> String -> Html msg -> (State id -> msg) -> State id -> id -> Html msg
viewSortHeader isSortable header updateMsg state id = viewSortHeader isSortable ariaName header updateMsg state id =
let let
nextState = nextState =
nextTableState state id nextTableState state id
@ -283,13 +289,20 @@ viewSortHeader isSortable header updateMsg state id =
, Css.fontSize (Css.em 1) , Css.fontSize (Css.em 1)
] ]
, Html.Styled.Events.onClick (updateMsg nextState) , Html.Styled.Events.onClick (updateMsg nextState)
-- screen readers should know what clicking this button will do
, Aria.label ("Sort by " ++ ariaName)
] ]
[ Html.div [] [ header ] [ Html.div [] [ header ]
, viewSortButton updateMsg state id , viewSortButton updateMsg state id
] ]
else else
header Html.div
[ css [ fontWeight normal ]
, Aria.label ariaName
]
[ header ]
viewSortButton : (State id -> msg) -> State id -> id -> Html msg viewSortButton : (State id -> msg) -> State id -> id -> Html msg

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

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