[toxicity] Improve demo accessibility (#510)

Co-authored-by: Ann Yuan <[email protected]>

Author: eps1lon

toxicity/demo/index.html

@@ -83,6 +83,7 @@
       #classify-new-text-input {
         border: none;
         border-bottom: solid 1px #ccc;
+        cursor: pointer;
         font-size: 14px;
         line-height: 2;
         width: calc(100% - 127px);
@@ -98,7 +99,7 @@
       }
 
       #classify-new-text {
-        cursor: pointer;
+        border: none;
         text-transform: uppercase;
         padding: 9px 14px 9px 14px;
         font-size: 13px;
@@ -126,10 +127,10 @@ <h1>TensorFlow.js toxicity classifier demo</h1>
     <div class="description">This is a demo of the TensorFlow.js toxicity model, which classifies text according to whether it exhibits offensive attributes (i.e. profanity, sexual explicitness). The samples in the table below were taken from this <a href="https://www.kaggle.com/c/jigsaw-toxic-comment-classification-challenge/data">Kaggle dataset</a>.</div>
     <div id="table-wrapper"></div>
     <p>Enter text below and click 'Classify' to add it to the table.</p>
-    <div>
-      <input id="classify-new-text-input" placeholder="i.e. 'you suck'">
-      <div id="classify-new-text">Classify</div>
-    </div>
+    <form id="classify-new">
+      <input id="classify-new-text-input" placeholder="i.e. 'you suck'" required="">
+      <button id="classify-new-text" type="submit">Classify</div>
+    </form>
   </div>
   <script src="index.js"></script>
 </body>

toxicity/demo/index.js

@@ -83,13 +83,16 @@ const predict = async () => {
   const predictions = await classify(samples.map(d => d.text));
   addPredictions(predictions);
 
-  document.querySelector('#classify-new-text')
-      .addEventListener('click', (e) => {
+  document.querySelector('#classify-new')
+      .addEventListener('submit', (e) => {
         const text = document.querySelector('#classify-new-text-input').value;
         const predictions = classify([text]).then(d => {
           addPredictions(d);
         });
+
+        // Prevent submitting the form which would cause a page reload.
+        e.preventDefault();
       });
 };
 
-predict();
+predict();