From d57240318100583c108585e87bcc7fd9f434bdb3 Mon Sep 17 00:00:00 2001
From: niceborn <michael.schoenborn.007@gmail.com>
Date: Thu, 8 Dec 2022 12:30:37 +0100
Subject: [PATCH] Accessibility fixes

- fix Accessibility issues
- add functionality (copy to clipboard)
- layout changes
---
 src/main/webapp/index.jsp | 50 +++++++++++++++++++++++++++++++--------
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index 2394c58..4a04848 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -35,9 +35,11 @@
         window.onload = function() {
             document.myCodeMirror = CodeMirror.fromTextArea(
                 document.getElementById("text"), 
-                { lineNumbers: true }
+                { lineNumbers: true,
+                  extraKeys: {Tab: false, "Shift-Tab": false} 
+                }
             );
-        };
+            };
     </script>
     <title>PlantUMLServer</title>
 </head>
@@ -56,24 +58,27 @@
     <div id="content">
         <%-- CONTENT --%>
         <form method="post" accept-charset="utf-8"  action="<%= hostpath %>/form">
-            <p>
+            <p> <label for="text">UML Editor Content</label>
                 <textarea id="text" name="text" cols="120" rows="10"><%= net.sourceforge.plantuml.servlet.PlantUmlServlet.stringToHTMLString(decoded) %></textarea>
-                <input type="submit" />
+                <input type="submit" value="Submit" title="Submit Code and generate diagram"/>&nbsp;
+                <input type="submit" value="Copy Content to Clipboard" title="Copy Content to the clipboard" onclick="copyToClipboard('text','Content');return false; ">
             </p>
         </form>
         <hr/>
         <p>You can enter here a previously generated URL:</p>
         <form method="post" action="<%= hostpath %>/form">
-            <p>
-                <input name="url" type="text" size="150" value="<%= imgurl %>" />
+            <p> <label for="url">previously generated URL</label>
+                <input id="url" name="url" type="text" size="150" value="<%= imgurl %>" />
                 <br/>
-                <input type="submit"/>
+                <input type="submit" value="Decode URL" title="Decode URL and show code and diagram"/>&nbsp;
+                <input type="submit" value="Copy URL to Clipboard" title="Copy URL to the clipboard" onclick="copyToClipboard('url','URL');return false; ">
             </p>
         </form>
         <% if (hasImg) { %>
             <hr/>
-            <a href="<%= svgurl %>">View as SVG</a>&nbsp;
-            <a href="<%= txturl %>">View as ASCII Art</a>&nbsp;
+            <a href="<%= imgurl %>" title="View diagram as PNG">View as PNG</a>&nbsp;
+            <a href="<%= svgurl %>" title="View diagram as SVG">View as SVG</a>&nbsp;
+            <a href="<%= txturl %>" title="View diagram as ASCII Art">View as ASCII Art</a>&nbsp;
             <% if (hasMap) { %>
                 <a href="<%= mapurl %>">View Map Data</a>
             <% } %>
@@ -81,11 +86,36 @@
                 <%@ include file="resource/socialbuttons2.jspf" %>
             <% } %>
             <p id="diagram">
-                <img src="<%= imgurl %>" alt="PlantUML diagram" />
+                <img src="<%= svgurl %>" alt="PlantUML diagram" />
                 <%= map %>
             </p>
         <% } %>
     </div>
+    <script>
+        var clipboard_write=false;
+        var clipboard_read=false;
+        
+        navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
+            if (result.state == "granted" || result.state == "prompt") {
+                clipboard_write = true;
+            }
+        });
+        navigator.permissions.query({ name: "clipboard-read" }).then((result) => {
+            if (result.state == "granted" || result.state == "prompt") {
+                clipboard_read = true;
+            }
+        });
+
+    function copyToClipboard(fieldid, fielddesc) {
+        if (clipboard_write == true){
+        var copyText = '';
+        copyText = document.getElementById(fieldid).value;
+            navigator.clipboard.writeText(document.getElementById(fieldid).value)
+            alert(fielddesc + " copied to clipboard");
+        }
+        return false;
+    }
+</script>
     <%-- FOOTER --%>
     <%@ include file="footer.jspf" %> 
 </body>