svg.escobar.life

A simple SVG markup editor for the web

Commit: ca83eae377da86302b4a3fc8bd24cb7b71389115
Parent: 262078e9fe350b705e37b3af9462645ba6b51fcf
Author: Pablo Emilio Escobar Gaviria <pablo-escobar@riseup.net>
Date: Thu, 3 Dec 2020 15:32:25 -0300

Improved accessibility and removed the title bar

Diffstat

5 files changed, 36 insertions, 33 deletions

Status	File Name	N° Changes	Insertions	Deletions
Modified	.gitignore	1	1	0
Modified	Makefile	3	3	0
Modified	src/Editor.elm	10	4	6
Modified	src/View.elm	40	26	14
Modified	styles.css	15	2	13

diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 elm-stuff
+elm.json
 *.min.js

diff --git a/Makefile b/Makefile
@@ -1,5 +1,8 @@
 .PHONY: build auto-compile
 
+runserver:
+	python3 -m http.server
+
 build:
 	elm make --optimize --output=script.js src/Main.elm
 	mv script.js script.min.js

diff --git a/src/Editor.elm b/src/Editor.elm
@@ -5,19 +5,18 @@ import Html exposing (Html, Attribute, div, pre, code, text, textarea)
 import Html.Attributes exposing (id, value, style, spellcheck, alt, attribute)
 import Html.Events exposing (onInput, on)
 import Accessibility.Landmark exposing (region)
-import Accessibility.Widget exposing (label)
+import Accessibility.Widget exposing (label, hidden)
 import Json.Decode
 import SyntaxHighlight exposing (xml, toBlockHtml)
 
 editor : Model -> Html Msg
 editor model =
     div [ id "editor"
-        , alt "Text Editor" 
         , region
-        , label "SVG Editor" 
+        , label "Text editor" 
         ]
         [ div 
-            [ translate model.editorScroll ]
+            [ hidden True, translate model.editorScroll ]
             [ codeDisplay model ]
         , textarea model
         ]
@@ -57,8 +56,7 @@ translate (x, y) =
     transform ("translate(" ++ (show -x) ++ "px, " ++ (show -y) ++ "px)")
 
 placeholder : String
-placeholder =
-    "<svg ...> ... </svg>"
+placeholder = "<svg ...> ... </svg>"
 
 show : Int -> String
 show = String.fromInt

diff --git a/src/View.elm b/src/View.elm
@@ -23,10 +23,13 @@ import Html.Attributes exposing ( id
                                 , rel
                                 , alt
                                 , attribute
+                                , name
                                 )
 import Html.Lazy exposing (lazy)
 import Accessibility.Landmark exposing (application, region)
 import Accessibility.Role exposing (alert)
+import Accessibility.Key exposing (onKeyDown, enter)
+import Accessibility.Widget exposing (label, hidden)
 import Browser exposing (Document)
 import Json.Decode
 import Regex exposing (Regex, Match, replace)
@@ -46,12 +49,11 @@ container : Model -> Html Msg
 container model =
   div 
     (
-      [ id "container", application ]
+      [ id "container", application, label "SVG Editor" ]
       ++ 
       (if valid model.status then [] else [class "error"])
     )
-    [ h1 [] [ text "SGV Editor" ]
-    , display model
+    [ display model
     , lazy editor model
     ]
 
@@ -62,23 +64,30 @@ display model =
       [ id "display"
       , region
       , class (if darkMode model.mode then "dark" else "light") 
+      , label "Picture preview"
       ] 
       ++ 
       -- Alert users when the image is invalid
       (if valid model.status then [] else [ alert ])
     )
     [ img 
-      [ id "image", src (uri model), loaded model, alt "Picture Display" ] 
+      [ id "image", src (uri model), loaded model, alt "Input picture" ] 
       []
     , errorIcon
     , button 
-        [ onClick Download, alt "Download File", tabindex0 ] 
+        [ onClick Download
+        , label "Download file"
+        ] 
         [ downloadIcon ]
     , button 
-        [ onClick (Upload Requested), alt "Upload File", tabindex0 ] 
+        [ onClick (Upload Requested)
+        , label "Upload file"
+        ] 
         [ uploadIcon ]
     , button 
-        [ onClick ToggleDarkMode, alt "Toggle Dark Mode", tabindex0 ] 
+        [ onClick ToggleDarkMode
+        , label "Toggle dark mode"
+        ] 
         [ bulbIcon model.mode ]
     ]
 
@@ -146,21 +155,27 @@ darkMode mode =
 downloadIcon : Html Msg
 downloadIcon = 
   img 
-    [ src "assets/download.svg", alt "Download file", tabindex0 ] 
+    [ src "assets/download.svg"
+    , hidden True
+    , alt "Download file"
+    ] 
     []
 
 uploadIcon : Html Msg
 uploadIcon = 
   img 
-    [ src "assets/upload.svg", alt "Upload file", tabindex0 ] 
+    [ src "assets/upload.svg"
+    , hidden True
+    , alt "Upload file"
+    ] 
     []
 
 bulbIcon : Mode -> Html Msg
 bulbIcon mode =
   img 
     [ src (if darkMode mode then "assets/bulb-on.svg" else "assets/bulb-off.svg")
-    , alt "Toggle Dark Mode"
-    , tabindex0
+    , hidden True
+    , alt "Toggle dark mode"
     ] 
     []
 
@@ -169,6 +184,3 @@ errorIcon =
   img 
     [ id "error", src "assets/error.svg", alt "Something Went Wrong" ] 
     []
-
-tabindex0 : Attribute msg
-tabindex0 = attribute "tabindex" "0"

diff --git a/styles.css b/styles.css
@@ -18,10 +18,6 @@
     --comm: #B362FF;
 }
 
-*:focus {
-    outline: none;
-}
-
 body {
     height: 100vh;
     min-height: 25vw;
@@ -33,10 +29,7 @@ body {
     display: grid;
 
     grid-gap: 1em;
-    grid-template-rows: 1.8em 30vh auto;
-    grid-template-areas: "title" 
-                         "display" 
-                         "text";
+    grid-template-rows: 30vh auto;
 
     height: calc(100% - 2em);
     padding: 1em;
@@ -44,10 +37,8 @@ body {
 
 @media (orientation: landscape) {
     #container {
-        grid-template-rows: 1.8em auto;
         grid-template-columns: 1fr 2fr;
-        grid-template-areas: "display title"
-                             "display text";
+        grid-template-rows: 100%;
     }
 }
 
@@ -73,7 +64,6 @@ body {
 
 #container #display {
     display: grid;
-    grid-area: display;
 
     grid-template-rows: auto 2em;
     grid-template-columns: repeat(3, 2em) auto;
@@ -119,7 +109,6 @@ body {
 }
 
 #container #editor {
-    grid-area: text;
     position: relative;
 
     width: 100%;