Allow modal-manager to support sr-only class (#30)

* Allow modal-manager to use screen reader only content as well, you can pass .sr-only class along with HTML while configuring ModalConfig class. Also you can pass sr-only class with slotted content as customContent

README.md

@@ -90,11 +90,13 @@ Display completely custom content in the modal body, including light DOM content
   const customContent = html`
     Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
     <div style="text-align: center">
+      <div class="sr-only">Visible for screen-readers only</div>
       <a href="https://fillmurray.com" style="display: block">Fill Murray</a>
       <img src="100x100.jpg" @click=${showBillAlert} />
     </div>
   `;
 
+  // customContent used to render as slotted content, it can also use .sr-only class
   modalManager.showModal(config, customContent);
 </script>
 ```
@@ -107,7 +109,7 @@ All of the config options:
 const config = new ModalConfig();
 config.title = 'Internet Archive';
 config.subtitle = '';
-config.headline = 'Thanks for your Support!';
+config.headline = '<div class="sr-only">Visible for screen-readers only</div>Thanks for your Support!';
 config.message = 'Thank you for supporting the Internet Archive!';
 config.headerColor = '#36A483';
 config.showProcessingIndicator = false;

demo/index.html

@@ -151,9 +151,11 @@ <h3>Some Content</h3>
     function showCustomContentModal() {
       const config = new ModalConfig();
       config.title = 'Custom Content';
+      config.headline = html`<span class="sr-only">Also support screen-reader only</span>`;
 
       const someContent = html`
         Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
+        <span class="sr-only">Also support screen-reader only</span>
         <div style="text-align: center">
           <a href="https://fillmurray.com" style="display: block">Fill Murray</a>
           <img src="100x100.jpg" @click=${showBillAlert} />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/modal-manager",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A Modal Manager Web Component",
   "repository": {
     "type": "git",

src/modal-template.ts

@@ -252,6 +252,28 @@ export class ModalTemplate extends LitElement {
         box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
           0 4px 4px 0 rgba(0, 0, 0, 0.08);
       }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      slot::slotted(.sr-only) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
     `;
   }
 }