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

start adding roving tabindex to the highlighter

Browse Source
This commit is contained in:
charbelrami 2022-09-09 13:49:56 -03:00
parent 3a629621e4
commit b78d11a332
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Nri/Ui/Highlighter/V1.elm
View File

@ -294,12 +294,18 @@ keyboardEventToActions : KeyboardMsg -> Model marker -> List (Action marker)
keyboardEventToActions msg model =
case msg of
MoveLeft index ->
-- TODO: find the id of the element to the left, if there is one, and Focus it
[]
if index /= 0 then
[ Focus (highlightableId (index - 1)) ]
else
[]
MoveRight index ->
-- TODO: find the id of the element to the right, if there is one, and Focus it
[]
if index /= (List.length model.highlightables - 1) then
[ Focus (highlightableId (index + 1)) ]
else
[]
Space index ->
case model.marker of
@ -582,13 +588,20 @@ viewHighlightableSegment isInteractive eventListeners maybeTool highlightable =
++ customToHtmlAttributes highlightable.customAttributes
++ whitespaceClass highlightable.text
++ [ attribute "data-highlighter-item-index" <| String.fromInt highlightable.groupIndex
, Html.Styled.Attributes.id (highlightableId highlightable.groupIndex)
, css (highlightableStyle maybeTool highlightable isInteractive)
, class "highlighter-highlightable"
, Key.tabbable (highlightable.groupIndex == 0)
]
)
[ Html.text highlightable.text ]
highlightableId : Int -> String
highlightableId groupIndex =
"highlightable-" ++ String.fromInt groupIndex
highlightableStyle : Maybe (Tool.Tool kind) -> Highlightable kind -> Bool -> List Css.Style
highlightableStyle tool ({ uiState, marked } as highlightable) interactive =
case tool of