Make the Buttons more accessible

[tkshill]

Issue Context

Currently the buttons for the gamepiece shapes are inaccessible. Their label attributes are set to the SVG images of the shapes themselves, rather than text that can be picked up by a screen reader.

Current button implementation for board.

viewCellButton : Cell -> Element Msg
viewCellButton cell =
    Input.button
        [ Border.color Styles.blue, Border.width 5 ]
        { onPress = Just (PlaceAttempt cell)
        , label = viewCell cell
        }

Current button implementation for available gamepiece

viewRemainingPiecesButton : Gamepiece -> Element Msg
viewRemainingPiecesButton gamepiece =
    let
        svgImage =
            viewGamepiece gamepiece
    in
    Input.button [] { onPress = Just (Clicked gamepiece), label = svgImage }

Suggested Solution

Refactor the way the view renders the available pieces and the game board to do the following

• Use the function suggested in the additional resources to modify the button attributes so they can have aria-label text. The text should be a string representation of the gamepiece. e.g. "Square Colour1 Filled Small", "Circle Colour2 Hollow Large"
• Alternatively, the buttons can be change to have text based labelling (the same text as suggested for the aria-labels above), but maybe hide the labels so they can be picked up by a screen reader, but not seen by the average user.
• The shapes can be rendered as image backgrounds for the buttons, rather than labels?
• A tooltip that appears when a mouse hovers over a shape and describes it would be neat

Project maintainers are currently using a combination of Web Accessiblity Evaluation Tool (WAVE) and the AXE accessibility tool. Any submitted PR would be checked with one (or both) of these tools to see if accessibility standards have been met.

Alternatives Considered

If it's not possible to add the aria-labels or use the shapes as backgrounds to the buttons themselves, the buttons may need to be placed into individual Els (divs) and then have those use the shapes as backgrounds.

Additional Resources

Elm-UI has a module with some features that help with accessiblity. This function looks like it can provide what we're looking for.

See here in the read me for how to run and install the application.

See here in contributing for the basics on forking and cloning the repository.

[dominicduffin1]

I'd be interested in taking this on!

One question - The Region.description needs a String representation of the piece - the closest function I can find in the code produces a List String - does this need some work or am I missing something?

[tkshill]

Hey! Yeah, you can absolutely tackle this one.

I know we have a gamepieceToList: Gamepiece -> List String that makes a list of strings so I'd say maybe use that and transform to the string you want? We can talk about it more in depth in slack though.

Functions that immediately come to mind for me:
concat
foldl
foldl1

[dominicduffin1]

Thank you @tkshill - that sounds like a good plan - I'll read the docs for those functions!