fix: update icon link format and improve accessibility in text elements

Author: meodai

dist/index.html

@@ -10,7 +10,7 @@
   <meta name="description"
     content="Poline is lightweight, dependency free and fast JavaScript function written in TypeScript. It draws lines between anchors over polar HSL coordinates to generate pleasing color palettes.">
 
-  <link rel="icon" type="image/x-icon" href="data:image/x-icon;,">
+  <link rel="icon" href="data:,">
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website">
@@ -1317,10 +1317,10 @@ <h1>Poline</h1>
         <div class="l-sec__inner">
           <h2>Terminology &amp; Working Principles</h2>
           <p>
-            The name "<strong class="t">Poline</strong>" <span role="text" aria-label="pronunciation for Poline">/ˈpoʊlaɪn/</span> represents the essence of the library - <strong>a polar line</strong>. 
+            The name "<strong class="t">Poline</strong>" <span title="pronunciation: poh-line">/ˈpoʊlaɪn/</span> represents the essence of the library - <strong>a polar line</strong>. 
             The combination of these two words symbolizes the process of creating a palette by drawing lines between <strong>anchor</strong> points. 
             This unique moniker encapsulates the heart and soul of this micro-library written in TypeScript.
-          <p>
+          </p>
           <p>
             In "<strong class="t">Poline</strong>", <strong>anchors</strong> represent the points that the lines are drawn
             between.
@@ -1455,6 +1455,7 @@ <h2 id="positionFunction">Position Function</h2>
           </p>
           <p>
             The following position functions are available and can be included by importing the <strong>positionFunctions</strong> object from the "<strong class="t">Poline</strong>" module:
+          </p>
             <ul>
               <li>linearPosition</li>
               <li>exponentialPosition</li>
@@ -1465,7 +1466,6 @@ <h2 id="positionFunction">Position Function</h2>
               <li>asinusoidalPosition</li>
               <li>arcPosition</li>
             </ul>
-          </p>
           <div class="l-sec__controls">
             <label>
               <span><span class="t">Position Fn</span></span>
@@ -1745,11 +1745,11 @@ <h2 id="playground">Playground</h2>
           </p>
           <p>
             And let not your journey end here, dear sorcerer. Interactive exploration awaits you in the playground below. With a
-            simple press of the <kbd class="key" data-key="p">P</kbd> key, you may <strong>add anchor</strong> points to your whims, and with the <kbd class="key" data-key="Backspace" aria-label="backspace">⌫</kbd> 
+            simple press of the <kbd class="key" data-key="p">P</kbd> key, you may <strong>add anchor</strong> points to your whims, and with the <kbd class="key" data-key="Backspace" role="img" aria-label="backspace">⌫</kbd> 
             key, you may <strong>remove the last selected anchor</strong> point. So go forth, and let the magic unfold.
           </p>
           <p>
-            Use the browser's color picker to change the color of the <strong>last selected anchor</strong> <kbd class="key" data-key="k">K</kbd>, or use the <kbd class="key" data-key="ArrowLeft" aria-label="left arrow">←</kbd> and <kbd class="key" data-key="ArrowRight" aria-label="right arrow">→</kbd> keys to change the hue of all colors.
+            Use the browser's color picker to change the color of the <strong>last selected anchor</strong> <kbd class="key" data-key="k">K</kbd>, or use the <kbd class="key" data-key="ArrowLeft" role="img" aria-label="left arrow">←</kbd> and <kbd class="key" data-key="ArrowRight" role="img" aria-label="right arrow">→</kbd> keys to change the hue of all colors.
             Toggle the <strong>saturation rings</strong> with <kbd class="key" data-key="s">S</kbd>.
           </p>
           <div class="l-sec__controls">