svg.escobar.life

A simple SVG markup editor for the web

Commit: ef3d75cad90091639940fd4fc7ca8233ee9ae2cb
Parent: 1ba34f6d6b47e53ef7eff32a9951c2b6cd66c66f
Author: Gark Garcia <37553739+GarkGarcia@users.noreply.github.com>
Date: Tue, 20 Aug 2019 20:59:18 -0300

Improved accessibility across the app.

Diffstat

2 files changed, 20 insertions, 18 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	src/Editor.elm	5	3	2
Modified	src/View.elm	33	17	16

diff --git a/src/Editor.elm b/src/Editor.elm
@@ -2,14 +2,14 @@ module Editor exposing (editor)
 
 import Types exposing (..)
 import Html exposing (Html, Attribute, div, pre, code, text, textarea)
-import Html.Attributes exposing (id, value, style, spellcheck)
+import Html.Attributes exposing (id, value, style, spellcheck, alt)
 import Html.Events exposing (onInput, on)
 import Json.Decode
 import SyntaxHighlight exposing (xml, toBlockHtml)
 
 editor : Model -> Html Msg
 editor model =
-    div [ id "editor" ]
+    div [ id "editor", alt "Text Editor" ]
         [ div [ translate model.editorScroll ]
             [ codeDisplay model ]
         , textarea model
@@ -22,6 +22,7 @@ textarea model =
         , onInput Update
         , onScroll Scroll
         , spellcheck False
+        , alt "Text Editor"
         ] []
 
 codeDisplay : Model -> Html Msg

diff --git a/src/View.elm b/src/View.elm
@@ -3,9 +3,9 @@ module View exposing (view)
 import Types exposing (..)
 import Editor exposing (editor)
 
-import Html exposing (Html, Attribute, div, img, button, a, span, text)
+import Html exposing (Html, Attribute, div, img, button, a, text)
 import Html.Events exposing (onClick, on)
-import Html.Attributes exposing (id, class, src, href, target, rel)
+import Html.Attributes exposing (id, class, src, href, target, rel, alt)
 import Html.Lazy exposing (lazy)
 import Browser exposing (Document)
 import Json.Decode
@@ -30,6 +30,7 @@ container model =
                 [ href "https://github.com/GarkGarcia/RawSvg/blob/master/LICENSE"
                 , id "copyright"
                 , class "elmsh-comm"
+                , alt "License Information"
                 ]
                 [ text "<!-- GarkGarcia (C) 2019 -->" ]
             ]
@@ -40,11 +41,11 @@ container model =
 display : Model -> Html Msg
 display model =
     div [ id "display", class (if model.darkMode then "dark" else "") ]
-        [ img [ id "image", src (uri model), load model ] []
+        [ img [ id "image", src (uri model), loaded model, alt "Picture Display" ] []
         , errorIcon
-        , button [ onClick Download ] [ downloadIcon ]
-        , button [ onClick (Upload Requested) ] [ uploadIcon ]
-        , button [ onClick ToggleDarkMode ]
+        , button [ onClick Download, alt "Download" ] [ downloadIcon ]
+        , button [ onClick (Upload Requested), alt "Upload" ] [ uploadIcon ]
+        , button [ onClick ToggleDarkMode, alt "Toggle Dark Mode" ]
             [ if model.darkMode then sunIcon else moonIcon ]
         ]
 
@@ -84,8 +85,8 @@ onLoad : msg -> Attribute msg
 onLoad f = 
     on "load" (Json.Decode.succeed f)
 
-load : Model -> Attribute Msg
-load model =
+loaded : Model -> Attribute Msg
+loaded model =
     if model.isValid then onError (Validation False) else onLoad (Validation True)
 
 link : List (Attribute Msg) -> List (Html Msg) -> Html Msg
@@ -94,22 +95,22 @@ link attrs content =
         content
         
 logo : Html Msg
-logo = img [ src "assets/logo.svg" ] []
+logo = img [ src "assets/logo.svg", alt "RawSvg" ] []
 
 downloadIcon : Html Msg
-downloadIcon = img [ src "assets/download.svg" ] []
+downloadIcon = img [ src "assets/download.svg", alt "Download" ] []
 
 uploadIcon : Html Msg
-uploadIcon = img [ src "assets/upload.svg" ] []
+uploadIcon = img [ src "assets/upload.svg", alt "Upload" ] []
 
 moonIcon : Html Msg
-moonIcon = img [ src "assets/moon.svg" ] []
+moonIcon = img [ src "assets/moon.svg", alt "Toggle Dark Mode" ] []
 
 sunIcon : Html Msg
-sunIcon = img [ src "assets/sun.svg" ] []
+sunIcon = img [ src "assets/sun.svg", alt "Toggle Dark Mode" ] []
 
 errorIcon : Html Msg
-errorIcon = img [ id "error", src "assets/error.svg" ] []
+errorIcon = img [ id "error", src "assets/error.svg", alt "Something Went Wrong" ] []
 
 githubIcon : Html Msg
-githubIcon = img [ src "assets/github.svg" ] []-
\ No newline at end of file
+githubIcon = img [ src "assets/github.svg", alt "Github Repository" ] []+
\ No newline at end of file