A11y Autocomplete

docs/_includes/markup/autocomplete.njk

@@ -0,0 +1,11 @@
+<div id="a11yAutocomplete">
+    <div data-widget="accessible-autocomplete" class="accessible-autocomplete">
+        <label for="search" class="label form-label">Food</label>
+        <input id="search" type="text" autocomplete="off" class="form-control" aria-describedby="autcompleteDescr" aria-owns="results" aria-expanded="false" aria-autocomplete="both" aria-activedescendant="" />
+        <!-- <button type="button" id="clearText">clear text</button> -->
+        <!-- <button type="submit" id="submit">Search</button> -->
+        <ul id="results" class="list-group list-group-autocomplete" role="listbox" tabindex=0 ></ul>
+        <span id="autcompleteDescr" style="display: none;">When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.</span>
+        <div aria-live="assertive" class="screen-reader-text"></div>
+    </div>
+</div>

docs/_layouts/base.njk

@@ -23,11 +23,13 @@
       <link href="{{ '/css/prism-theme.css' | addHash }}" rel="stylesheet">
       <link href="{{ '/css/site.css' | addHash }}" rel="stylesheet">
       <link href="{{ '/css/bg-texture.css' | addHash }}" rel="stylesheet">
+      <link href="{{ '/css/autocomplete.css' | addHash }}" rel="stylesheet">
     {% else %}
       <link href="/css/pelican.css" rel="stylesheet">
       <link href="/css/prism-theme.css" rel="stylesheet">
       <link href="/css/site.css" rel="stylesheet">
       <link href="/css/bg-texture.css" rel="stylesheet">
+      <link href="/css/autocomplete.css" rel="stylesheet">
     {% endif %}
     <title>{{ title }} | Pelican, Louisiana’s Design System</title>
     <!-- Primary Meta Tags -->
@@ -59,9 +61,11 @@
     {% if env.production %}
       <script src="{{ '/js/pelican.bundle.min.js' | addHash }}"></script>
       <script src="{{ '/js/default.js' | addHash }}"></script>
+      <script src="{{ '/js/autocomplete.js' | addHash }}"></script>
     {% else %}
       <script src="/js/pelican.bundle.js"></script>
       <script src="/js/default.js"></script>
+      <script src="/js/autocomplete.js"></script>
     {% endif %}
   </body>
 </html>

docs/css/autocomplete.css

@@ -0,0 +1,17 @@
+.accessible-autocomplete {
+  position: relative;
+}
+
+.list-group-autocomplete {
+  display: none;
+  /* initial view */
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+.list-group-item[aria-selected="true"],
+.list-group-item:hover {
+  color: var(--theme-gray-white);
+  background-color: var(--theme-ui);
+  cursor: pointer;
+}

docs/extras/autocomplete.md

@@ -0,0 +1,35 @@
+---
+title: Autocomplete
+summary: Autocomplete with screenreader support.
+tags: Autocomplete
+layout: guide
+eleventyNavigation:
+  key: Autocomplete
+  parent: Extras
+  order: 10
+  excerpt: Autocomplete with screenreader support.
+  img: /img/illustrations/illus-autocomplete.png
+---
+
+## Best Practices
+
+The Autocomplete benefits users with domain knowledge about what they’re choosing. If the available options are unknown to the user then it’s better to use [checkboxes](/form-controls/checkboxes/), [radios](/form-controls/radios/), or [selects](/form-controls/select/) because the users can easily refer to the options.
+
+## Usage
+
+You’ll need to add the following resources to your project. The autocomplete isn’t included in Pelican by default. It inherits styles from the [List Group](/components/list-group/). Be aware that you’ll need to define your own data source. The included JS file uses fake data for the demo.
+
+- JS: [`autocomplete.js`](/js/autocomplete.js)
+- CSS: [`autocomplete.css`](/css/autocomplete.css)
+
+{% include 'markup/autocomplete.njk' %}
+
+```html
+{% include 'markup/autocomplete.njk' %}
+```
+
+## Resources
+
+This accessible autocomplete is adapted from Accessibility repo on Github.
+
+- [Halter’s Web Accessibility](https://github.com/haltersweb/Accessibility)

docs/extras/background-texture.md

@@ -6,7 +6,7 @@ layout: guide
 eleventyNavigation:
   key: Background Texture
   parent: Extras
-  order: 10
+  order: 20
   excerpt: Scalable vector graphic backgrounds which can add an ecological flavor to projects which use Pelican.
   img: /img/illustrations/illus-bg-tile.png
 ---