Accessibility improvements

CHANGELOG.md

@@ -1,5 +1,11 @@
 # myuw-search versions
 
+## 1.5.0
+
+* Added role='search' to the search form
+* Added aria-live="assertive" to announce searched activity
+* Added mobile style for search input
+
 ## 1.3.1
 
 * Added more components to local demo to test mobile search positioning 

README.md

@@ -12,6 +12,7 @@ Include the component as follows:
 <script nomodule src="https://cdn.my.wisc.edu/@myuw-web-components/myuw-search@latest/myuw-search.min.js"></script>
 
 <myuw-search
+  slot="myuw-search"
   input-label="Search MyUW"
   button-label="Submit search"
   icon="search"

index.html

@@ -175,8 +175,10 @@
 
 <div class="demo__container">
   <div class="test-content">
-    <h1 id="searchLabel">Try using the search bar!</h1>
-    <p id="searchValue"></p>
+    <div role="status">
+     <h1 id="searchLabel">Try using the search bar!</h1>
+     <p id="searchValue"></p>
+    </div>
     <form name="searchDemo" onsubmit="event.preventDefault();updateSearchBar();">
       <div class="form-control">
         <label for="searchPlaceholder">Search box placeholder:</label>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myuw-web-components/myuw-search",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A material search field made for use with MyUW web components",
   "module": "dist/myuw-search.min.mjs",
   "browser": "dist/myuw-search.min.js",

src/myuw-search.html

@@ -47,7 +47,7 @@
         border-color: rgba(0,0,0,0.15);
         color: #333;
         background: #fff;
-        width: 56px;
+        width: 59px;
         height: 40px;
         font-size: 1.8rem;
         margin: 0;
@@ -93,7 +93,7 @@
             max-width: 0;
             margin: 0;
             padding: 0;
-            height: 56px;
+            height: 59px;
             border-top-right-radius: 5px;
             border-bottom-right-radius: 5px;
             opacity: 0;
@@ -141,7 +141,8 @@
             right: var(--search-mobile-origin);
             margin-left: 0;
             margin-right: 0;
-            width: auto;
+            width: 98.6%;
+            z-index: 999;
             border: var(--myuw-search-border, 1px solid rgba(0,0,0,0.5));
             border-radius: 5px;
         }
@@ -168,12 +169,12 @@
     }
   }
 </style>
-<form id='form' class='myuw-search-container' onsubmit='$event.preventDefault(); submitSearch($event)'>
+<form id='form' role='search' class='myuw-search-container' onsubmit='$event.preventDefault(); submitSearch($event)'>
     <button id='toggle' aria-label='' type='button'>
         <i id='iconToggle' class='material-icons'></i>
     </button>
     <input id='input' name='myuw-search-input' aria-label='' type='text' placeholder=''/>
-    <button id='submit' aria-label='' type='submit'>
+    <button id='submit' aria-label='' type='submit' aria-live="assertive">
         <i id='icon' class='material-icons'></i>
     </button>
 </form>