fix: #19 issue regadring preventDefault() functions

README.md

@@ -69,13 +69,41 @@ The \<ods-hyperlink> element should be used in situations where users may:
 | inline | boolean | Displays an element as an inline element. Any height and width properties will have no effect |
 | rel | string | Specifies the relationship between the current document and the linked document |
 | responsive | boolean | used with `cta` button style; sets button to have automatic responsive layout properties |
-| role | string | Use for aria roles |
+| role | string | Use for aria roles; currently support `tab` and `button` for extended experiences |
 | tabisactive | boolean | Indicates if tab is to be displayed as active state (true, false)† |
 | target | string | Specifies where to open the linked document |
 
 † See `role="tab"` use example below for further details about this feature
 
-### Custom style support
+## Role button, keyboard support and accessibility
+
+When using the `role="button"` attribute, ods-hyperlink has pre-configured support for `aria-pressed` rules. There is no need to code this outside the scope of the WC. 
+
+Managing `onclick` and `onkeypress` events are the responsibility of the user. See the following example for how to use ods-hyperlink in concert with keyboard events to meet accessibility standards. 
+
+```html
+<ods-hyperlink id="cancel" role="button" onclick="clickMe(event)" onkeypress="keyPress(event)">Cancel update!</ods-hyperlink>
+
+<script>
+  function clickMe(e) {
+    console.log('You clicked me');
+  }
+
+  function keyPress(e) {
+    if(event.keyCode === 13) {
+      e.preventDefault();
+      console.log('You pressed either the RETURN key!');
+    }
+
+    if(event.keyCode === 32) {
+      e.preventDefault();
+      console.log('You pressed either the SPACEBAR key!');
+    }
+  }
+</script>
+```
+
+## Custom style support
 
 The default \<ods-hyperlink> has padding on the LEFT and the RIGHT of the element. If this padding is not required, the following CSS classes are supported:
 
@@ -86,7 +114,7 @@ The default \<ods-hyperlink> has padding on the LEFT and the RIGHT of the elemen
 
 No additional dependency on Orion Web Core Style Sheets is required.
 
-### API Code Examples
+## API Code Examples
 
 **Default hyperlink**
 

demo/index.html

@@ -160,9 +160,24 @@ <h1>ods-hyperlink</h1>
 
       <demo-snippet>
         <template>
-            <ods-hyperlink id="cancel" role="button">Cancel</ods-hyperlink>
+            <ods-hyperlink id="cancel" role="button" onClick="clickMe(event)" onKeyPress="keyPress(event)">Cancel update!</ods-hyperlink>
+
             <script>
-              document.querySelector('#cancel').addEventListener('click', () => alert('cancel clicked'));
+              function clickMe(e) {
+                console.log('You clicked me');
+              }
+
+              function keyPress(e) {
+                if(event.keyCode === 13) {
+                  e.preventDefault();
+                  console.log('You pressed either the RETURN key!');
+                }
+
+                if(event.keyCode === 32) {
+                  e.preventDefault();
+                  console.log('You pressed either the SPACEBAR key!');
+                }
+              }
             </script>
         </template>
       </demo-snippet>

src/ods-hyperlink.js

@@ -113,14 +113,12 @@ class OdsHyperlink extends LitElement {
 
       if(event.type == 'keydown') {
         if(event.keyCode === 13 || event.keyCode === 32) {
-          event.preventDefault();
           ariaPressedNode.setAttribute("aria-pressed", 'true')
         }
       }
 
       if(event.type == 'keyup') {
         if(event.keyCode === 13 || event.keyCode === 32) {
-          event.preventDefault();
           ariaPressedNode.setAttribute("aria-pressed", 'false')
         }
       }