Deploying to gh-pages from @ 1c26592 🚀

digitalnsw · Oct 31, 2023 · fef9acf · fef9acf
1 parent 9a958eb
commit fef9acf
Show file tree

Hide file tree

Showing 111 changed files with 3,387 additions and 1,424 deletions.
diff --git a/components/accordion/index.html b/components/accordion/index.html
@@ -26,7 +26,7 @@
         <div class="nsw-container">A NSW Government website</div>
       </div>
       <header class="nsw-header nsw-header--simple">
-        <div class="nsw-header__container">
+        <div class="nsw-header__container js-header">
           <div class="nsw-header__inner">
             <div class="nsw-header__main">
               <div class="nsw-header__waratah">
@@ -50,26 +50,47 @@
                 </button>
               </div>
             </div>
+
             <div class="nsw-header__search">
               <button type="button" class="js-open-search" aria-expanded="false" aria-controls="header-autocomplete">
                 <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
                 <span><span class="sr-only">Show</span> Search</span>
               </button>
             </div>
+
           </div>
-          <div class="nsw-header__search-area js-search-area" id="header-autocomplete" hidden>
-            <div class="nsw-autocomplete" role="search">
-              <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
-              <label for="autocomplete-input" class="sr-only">Search site for:</label>
-              <input class="nsw-header__input js-search-input nsw-autocomplete__input" type="text" autocomplete="off" id="autocomplete-input" name="autocomplete-input">
-              <ul class="nsw-form__predictive-list"></ul>
-              <div class="nsw-autocomplete__no-result">No results found</div>
+
+          <div class="nsw-header__search-area nsw-autocomplete js-search-area js-autocomplete" id="header-autocomplete" hidden>
+            <div role="search">
+              <label for="nsw-header-autocomplete" class="sr-only">Search site for:</label>
+              <input class="nsw-header__input js-autocomplete__input js-search-input" type="text" autocomplete="off" id="nsw-header-autocomplete" name="input-autocomplete">
+
+              <button class="nsw-icon-button nsw-icon-button--flex js-open-search" aria-expanded="true" aria-controls="header-autocomplete">
+                <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
+                <span class="sr-only">Search</span>
+              </button>
+
+              <div class="nsw-autocomplete__results js-autocomplete__results">
+                <ul id="autocomplete" class="nsw-autocomplete__list js-autocomplete__list">
+                  <li class="nsw-autocomplete__item nsw-text-truncate js-autocomplete__item" data-autocomplete-template="result">
+                    <a href="" data-autocomplete-url data-autocomplete-label></a>
+                  </li>
+                  <li class="nsw-autocomplete__item nsw-autocomplete__no-results nsw-text-truncate js-autocomplete__item" data-autocomplete-template="no-results" role="presentation"></li>
+                </ul>
+              </div>
+
+              <p class="sr-only" aria-live="polite" aria-atomic="true">
+                <span class="js-autocomplete__aria-results">0</span> results found.
+              </p>
+
             </div>
             <button class="nsw-icon-button js-close-search" aria-expanded="true" aria-controls="header-autocomplete">
               <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
               <span class="sr-only">Close search</span>
             </button>
+
           </div>
+
         </div>
       </header>
     </div>
@@ -583,7 +604,6 @@ <h3>Simple accordion</h3>
   <script>
     window.NSW.initSite()
   </script>
-  <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
   <script src="/nsw-design-system/docs/js/docs.js"></script>
   <script>
     hljs.initHighlightingOnLoad();

diff --git a/components/breadcrumbs/index.html b/components/breadcrumbs/index.html
@@ -26,7 +26,7 @@
         <div class="nsw-container">A NSW Government website</div>
       </div>
       <header class="nsw-header nsw-header--simple">
-        <div class="nsw-header__container">
+        <div class="nsw-header__container js-header">
           <div class="nsw-header__inner">
             <div class="nsw-header__main">
               <div class="nsw-header__waratah">
@@ -50,26 +50,47 @@
                 </button>
               </div>
             </div>
+
             <div class="nsw-header__search">
               <button type="button" class="js-open-search" aria-expanded="false" aria-controls="header-autocomplete">
                 <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
                 <span><span class="sr-only">Show</span> Search</span>
               </button>
             </div>
+
           </div>
-          <div class="nsw-header__search-area js-search-area" id="header-autocomplete" hidden>
-            <div class="nsw-autocomplete" role="search">
-              <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
-              <label for="autocomplete-input" class="sr-only">Search site for:</label>
-              <input class="nsw-header__input js-search-input nsw-autocomplete__input" type="text" autocomplete="off" id="autocomplete-input" name="autocomplete-input">
-              <ul class="nsw-form__predictive-list"></ul>
-              <div class="nsw-autocomplete__no-result">No results found</div>
+
+          <div class="nsw-header__search-area nsw-autocomplete js-search-area js-autocomplete" id="header-autocomplete" hidden>
+            <div role="search">
+              <label for="nsw-header-autocomplete" class="sr-only">Search site for:</label>
+              <input class="nsw-header__input js-autocomplete__input js-search-input" type="text" autocomplete="off" id="nsw-header-autocomplete" name="input-autocomplete">
+
+              <button class="nsw-icon-button nsw-icon-button--flex js-open-search" aria-expanded="true" aria-controls="header-autocomplete">
+                <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
+                <span class="sr-only">Search</span>
+              </button>
+
+              <div class="nsw-autocomplete__results js-autocomplete__results">
+                <ul id="autocomplete" class="nsw-autocomplete__list js-autocomplete__list">
+                  <li class="nsw-autocomplete__item nsw-text-truncate js-autocomplete__item" data-autocomplete-template="result">
+                    <a href="" data-autocomplete-url data-autocomplete-label></a>
+                  </li>
+                  <li class="nsw-autocomplete__item nsw-autocomplete__no-results nsw-text-truncate js-autocomplete__item" data-autocomplete-template="no-results" role="presentation"></li>
+                </ul>
+              </div>
+
+              <p class="sr-only" aria-live="polite" aria-atomic="true">
+                <span class="js-autocomplete__aria-results">0</span> results found.
+              </p>
+
             </div>
             <button class="nsw-icon-button js-close-search" aria-expanded="true" aria-controls="header-autocomplete">
               <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
               <span class="sr-only">Close search</span>
             </button>
+
           </div>
+
         </div>
       </header>
     </div>
@@ -488,7 +509,6 @@ <h2>Accessibility</h2>
   <script>
     window.NSW.initSite()
   </script>
-  <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
   <script src="/nsw-design-system/docs/js/docs.js"></script>
   <script>
     hljs.initHighlightingOnLoad();

diff --git a/components/button/index.html b/components/button/index.html
@@ -26,7 +26,7 @@
         <div class="nsw-container">A NSW Government website</div>
       </div>
       <header class="nsw-header nsw-header--simple">
-        <div class="nsw-header__container">
+        <div class="nsw-header__container js-header">
           <div class="nsw-header__inner">
             <div class="nsw-header__main">
               <div class="nsw-header__waratah">
@@ -50,26 +50,47 @@
                 </button>
               </div>
             </div>
+
             <div class="nsw-header__search">
               <button type="button" class="js-open-search" aria-expanded="false" aria-controls="header-autocomplete">
                 <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
                 <span><span class="sr-only">Show</span> Search</span>
               </button>
             </div>
+
           </div>
-          <div class="nsw-header__search-area js-search-area" id="header-autocomplete" hidden>
-            <div class="nsw-autocomplete" role="search">
-              <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
-              <label for="autocomplete-input" class="sr-only">Search site for:</label>
-              <input class="nsw-header__input js-search-input nsw-autocomplete__input" type="text" autocomplete="off" id="autocomplete-input" name="autocomplete-input">
-              <ul class="nsw-form__predictive-list"></ul>
-              <div class="nsw-autocomplete__no-result">No results found</div>
+
+          <div class="nsw-header__search-area nsw-autocomplete js-search-area js-autocomplete" id="header-autocomplete" hidden>
+            <div role="search">
+              <label for="nsw-header-autocomplete" class="sr-only">Search site for:</label>
+              <input class="nsw-header__input js-autocomplete__input js-search-input" type="text" autocomplete="off" id="nsw-header-autocomplete" name="input-autocomplete">
+
+              <button class="nsw-icon-button nsw-icon-button--flex js-open-search" aria-expanded="true" aria-controls="header-autocomplete">
+                <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
+                <span class="sr-only">Search</span>
+              </button>
+
+              <div class="nsw-autocomplete__results js-autocomplete__results">
+                <ul id="autocomplete" class="nsw-autocomplete__list js-autocomplete__list">
+                  <li class="nsw-autocomplete__item nsw-text-truncate js-autocomplete__item" data-autocomplete-template="result">
+                    <a href="" data-autocomplete-url data-autocomplete-label></a>
+                  </li>
+                  <li class="nsw-autocomplete__item nsw-autocomplete__no-results nsw-text-truncate js-autocomplete__item" data-autocomplete-template="no-results" role="presentation"></li>
+                </ul>
+              </div>
+
+              <p class="sr-only" aria-live="polite" aria-atomic="true">
+                <span class="js-autocomplete__aria-results">0</span> results found.
+              </p>
+
             </div>
             <button class="nsw-icon-button js-close-search" aria-expanded="true" aria-controls="header-autocomplete">
               <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
               <span class="sr-only">Close search</span>
             </button>
+
           </div>
+
         </div>
       </header>
     </div>
@@ -836,7 +857,6 @@ <h4>Danger</h4>
   <script>
     window.NSW.initSite()
   </script>
-  <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
   <script src="/nsw-design-system/docs/js/docs.js"></script>
   <script>
     hljs.initHighlightingOnLoad();

diff --git a/components/callout/index.html b/components/callout/index.html
@@ -26,7 +26,7 @@
         <div class="nsw-container">A NSW Government website</div>
       </div>
       <header class="nsw-header nsw-header--simple">
-        <div class="nsw-header__container">
+        <div class="nsw-header__container js-header">
           <div class="nsw-header__inner">
             <div class="nsw-header__main">
               <div class="nsw-header__waratah">
@@ -50,26 +50,47 @@
                 </button>
               </div>
             </div>
+
             <div class="nsw-header__search">
               <button type="button" class="js-open-search" aria-expanded="false" aria-controls="header-autocomplete">
                 <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
                 <span><span class="sr-only">Show</span> Search</span>
               </button>
             </div>
+
           </div>
-          <div class="nsw-header__search-area js-search-area" id="header-autocomplete" hidden>
-            <div class="nsw-autocomplete" role="search">
-              <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
-              <label for="autocomplete-input" class="sr-only">Search site for:</label>
-              <input class="nsw-header__input js-search-input nsw-autocomplete__input" type="text" autocomplete="off" id="autocomplete-input" name="autocomplete-input">
-              <ul class="nsw-form__predictive-list"></ul>
-              <div class="nsw-autocomplete__no-result">No results found</div>
+
+          <div class="nsw-header__search-area nsw-autocomplete js-search-area js-autocomplete" id="header-autocomplete" hidden>
+            <div role="search">
+              <label for="nsw-header-autocomplete" class="sr-only">Search site for:</label>
+              <input class="nsw-header__input js-autocomplete__input js-search-input" type="text" autocomplete="off" id="nsw-header-autocomplete" name="input-autocomplete">
+
+              <button class="nsw-icon-button nsw-icon-button--flex js-open-search" aria-expanded="true" aria-controls="header-autocomplete">
+                <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">search</span>
+                <span class="sr-only">Search</span>
+              </button>
+
+              <div class="nsw-autocomplete__results js-autocomplete__results">
+                <ul id="autocomplete" class="nsw-autocomplete__list js-autocomplete__list">
+                  <li class="nsw-autocomplete__item nsw-text-truncate js-autocomplete__item" data-autocomplete-template="result">
+                    <a href="" data-autocomplete-url data-autocomplete-label></a>
+                  </li>
+                  <li class="nsw-autocomplete__item nsw-autocomplete__no-results nsw-text-truncate js-autocomplete__item" data-autocomplete-template="no-results" role="presentation"></li>
+                </ul>
+              </div>
+
+              <p class="sr-only" aria-live="polite" aria-atomic="true">
+                <span class="js-autocomplete__aria-results">0</span> results found.
+              </p>
+
             </div>
             <button class="nsw-icon-button js-close-search" aria-expanded="true" aria-controls="header-autocomplete">
               <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
               <span class="sr-only">Close search</span>
             </button>
+
           </div>
+
         </div>
       </header>
     </div>
@@ -459,7 +480,6 @@ <h2>Accessibility</h2>
   <script>
     window.NSW.initSite()
   </script>
-  <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
   <script src="/nsw-design-system/docs/js/docs.js"></script>
   <script>
     hljs.initHighlightingOnLoad();

diff --git a/components/card/blank.html b/components/card/blank.html
@@ -130,7 +130,7 @@
   		      <div class="nsw-card__content">
   		        <div class="nsw-card__tag">Business</div>
   		        <div class="nsw-card__date">
-  		          <time datetime="2020-10-16">October 23, 2023</time>
+  		          <time datetime="2020-10-16">October 31, 2023</time>
   		        </div>
   		        <div class="nsw-card__title">
   		          <a href="#">Energy switch</a>
@@ -147,7 +147,7 @@
   		      <div class="nsw-card__content">
   		        <div class="nsw-card__tag">Family</div>
   		        <div class="nsw-card__date">
-  		          <time datetime="2020-09-14">October 23, 2023</time>
+  		          <time datetime="2020-09-14">October 31, 2023</time>
   		        </div>
   		        <div class="nsw-card__title">
   		          <a href="#">Creative kids</a>
@@ -164,7 +164,7 @@
   		      <div class="nsw-card__content">
   		        <div class="nsw-card__tag">Family</div>
   		        <div class="nsw-card__date">
-  		          <time datetime="2020-09-02">October 23, 2023</time>
+  		          <time datetime="2020-09-02">October 31, 2023</time>
   		        </div>
   		        <div class="nsw-card__title">
   		          <a href="#">Active kids</a>
@@ -184,7 +184,7 @@
   		      <div class="nsw-card__content">
   		        <div class="nsw-card__tag">Business</div>
   		        <div class="nsw-card__date">
-  		          <time datetime="2020-10-16">October 23, 2023</time>
+  		          <time datetime="2020-10-16">October 31, 2023</time>
   		        </div>
   		        <div class="nsw-card__title">
   		          <a href="#">Energy switch</a>
@@ -207,7 +207,7 @@
   		      <div class="nsw-card__content">
   		        <div class="nsw-card__tag">Community</div>
   		        <div class="nsw-card__date">
-  		          <time datetime="2019-03-09">October 23, 2023</time>
+  		          <time datetime="2019-03-09">October 31, 2023</time>
   		        </div>
   		        <div class="nsw-card__title">
   		          <a href="#">Nominations open for Green Globe Awards 2019</a>
@@ -227,7 +227,7 @@
   		      <div class="nsw-card__content">
   		        <div class="nsw-card__tag">Environment</div>
   		        <div class="nsw-card__date">
-  		          <time datetime="2019-03-01">October 23, 2023</time>
+  		          <time datetime="2019-03-01">October 31, 2023</time>
   		        </div>
   		        <div class="nsw-card__title">
   		          <a href="#">Quality green spaces and a million more trees for NSW</a>
@@ -247,7 +247,7 @@
   		      <div class="nsw-card__content">
   		        <div class="nsw-card__tag">Education</div>
   		        <div class="nsw-card__date">
-  		          <time datetime="2019-02-20">October 23, 2023</time>
+  		          <time datetime="2019-02-20">October 31, 2023</time>
   		        </div>
   		        <div class="nsw-card__title">
   		          <a href="#">New Premier&#x27;s Priority to lift literacy and numeracy standards</a>
@@ -270,7 +270,7 @@
   		      <div class="nsw-card__content">
   		        <div class="nsw-card__tag">Community</div>
   		        <div class="nsw-card__date">
-  		          <time datetime="2019-03-09">October 23, 2023</time>
+  		          <time datetime="2019-03-09">October 31, 2023</time>
   		        </div>
   		        <div class="nsw-card__title">
   		          <a href="#">Nominations open for Green Globe Awards 2019</a>