refactor: Improved Browser compatibility list

Matheus2212 · Matheus2212 · commit 56d2cf412539 · 2021-06-03T08:31:50.000-03:00
diff --git a/accessibility.functions.js b/accessibility.functions.js
@@ -406,10 +406,10 @@ var ACCESSIBILITY = {
 
     createTriggerButton: function () {
         var triggerButton = document.createElement('a');
-        triggerButton.setAttribute('id','accessibilityTrigger');
+        triggerButton.setAttribute('id', 'accessibilityTrigger');
         triggerButton.classList.add('accessibilityTriggerButton');
         triggerButton.innerHTML = '<svg fill="none" height="56" viewBox="0 0 56 56" width="56" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m28 21c2.2091 0 4-1.7909 4-4s-1.7909-4-4-4-4 1.7909-4 4 1.7909 4 4 4z"/><path d="m30.5 30c0 1.1164.2268 2.2212.6666 3.2474l3.7121 8.6617c.3264.7615-.0264 1.6433-.7878 1.9696-.7615.3264-1.6433-.0264-1.9696-.7878l-3.7122-8.6617c-.0288-.0672-.0569-.1346-.0843-.2023-.0552-.136-.1863-.2269-.333-.2269-.1503 0-.2837.0951-.336.236-.0773.208-.1597.4144-.2474.6188l-3.5297 8.2361c-.3263.7614-1.2081 1.1142-1.9696.7878-.7614-.3263-1.1142-1.2081-.7878-1.9696l3.5297-8.236c.5602-1.307.849-2.7142.849-4.1362v-2.6775c-3.6006-.4075-6.9399-1.6847-9.7997-3.6164-.6865-.4637-.8672-1.3961-.4035-2.0826s1.3962-.8671 2.0826-.4034c3.0314 2.0475 6.6841 3.243 10.6206 3.243s7.5892-1.1955 10.6206-3.243c.6865-.4637 1.6189-.2831 2.0826.4034s.283 1.6189-.4035 2.0826c-2.8598 1.9317-6.1991 3.2089-9.7997 3.6164z"/><path clip-rule="evenodd" d="m52 28c0 13.2548-10.7452 24-24 24s-24-10.7452-24-24 10.7452-24 24-24 24 10.7452 24 24zm-3 0c0 11.598-9.402 21-21 21s-21-9.402-21-21 9.402-21 21-21 21 9.402 21 21z" fill-rule="evenodd"/></g></svg>';
-        this.body.append(triggerButton);
+        this.body.appendChild(triggerButton);
     },
 
     widgetOpen: function () {
diff --git a/index.html b/index.html
@@ -7,15 +7,35 @@
     <title>JS Simple Accessibility</title>
     <link rel="stylesheet" href="accessibility.style.css" />
     <style>
+      * {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        -o-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+        box-sizing: border-box;
+      }
       html,
       body {
         margin: 0;
         padding: 0;
         position: relative;
+        background: #ffffff;
+        height: 100%;
+        min-height: 100%;
       }
     </style>
   </head>
   <body>
+    <div style="position: relative; padding: 30px; margin: 0 auto; width: 80%">
+      <h1>This is my H1</h1>
+      <h2>This is my H2</h2>
+      <h3>This is my H3</h3>
+      <h4>This is my H4</h4>
+      <h5>This is my H5</h5>
+      <h6>This is my H6</h6>
+      <a href="">This is a link</a>
+      <p>This is my text</p>
+    </div>
     <script src="accessibility.functions.js"></script>
     <script type="text/javascript">
       ACCESSIBILITY.init();
