~nicolaskempf57/select-a11y

ref: 383de9779968f4c127bacb6e27d56ebc27b6d17a select-a11y/public/index.html -rw-r--r-- 7.3 KiB
383de977Nicolas KEMPF 2.0.2 8 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Select a11y - demo</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="description" content="Filter component: multi select transformed to suggestions list with search input. WCAG and RGAA compliant.">

  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body class="scampi-stuff">
  <noscript>
    <p class="js-off">Javascript is disabled in your browser.</p>
  </noscript>

  <header role="banner" class="banner">
    <div class="container">
      <h1 class="banner-title">select-a11y - demo</h1>
      <p class="baseline">Filter component: multi select transformed to suggestions list with search input. <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> and <abbr lang="fr" title="Référentiel général d'accessibilité pour les administrations">RGAA</abbr> compliant.</p>
    </div>
  </header>

  <main role="main" id="main" class="main">
    <div class="container main-container">

      <p>select-a11y transforms multi select into suggestions list with search input. It is compliant with Web Content Accessibility Guidelines (WCAG) and General repository for improving accessibility (Référentiel général d'amélioration de l'accessibilité - RGAA).</p>

      <h2 class="sr-only">Demo</h2>
      <form action="#" method="post">
        <h3>Example 1</h3>
        <div class="form-group">
          <label for="select-option">Is your website…</label>
          <select class="form-control" id="select-option" data-select-a11y>
              <option>Perceivable</option>
              <option>Operable</option>
              <option>Understandable</option>
              <option>Robust</option>
          </select>
        </div>

        <h3>Example 2</h3>
        <div class="form-group label">
          <label for="select-label">Is your website…</label>
          <select class="form-control" id="select-label" data-select-a11y data-select-a11y-label>
              <option>Perceivable</option>
              <option>Operable</option>
              <option>Understandable</option>
              <option>Robust</option>
          </select>
        </div>

        <h3>Example 3</h3>
        <div class="form-group">
          <label for="select-label-selected">Is your website…</label>
          <select class="form-control" id="select-label-selected" data-select-a11y data-select-a11y-label>
              <option selected>Perceivable</option>
              <option>Operable</option>
              <option>Understandable</option>
              <option>Robust</option>
          </select>
        </div>

        <h3>Example 3</h3>
        <div class="form-group">
          <label for="select-label-selected">Is your website…</label>
          <select class="form-control" id="select-label-selected" data-select-a11y data-select-a11y-clearable>
              <option selected value="">Perceivable</option>
              <option>Operable</option>
              <option>Understandable</option>
              <option>Robust</option>
          </select>
        </div>

        <h3>Example 4</h3>
        <p>As seen in this second example, one or more <code>option</code> may have already an attribute <code>selected</code> in source.</p>
        <div class="form-group multiple">
          <label for="select-element">What do you want to do today?</label>
          <select class="form-control" id="select-element" multiple data-select-a11y>
              <option>Sleeping</option>
              <option>Climbing trees</option>
              <option>Knitting socks</option>
              <option selected>Riding bikes</option>
              <option>Eating cupcakes</option>
          </select>
        </div>

        <h3>Example 5</h3>
        <p>As seen in this third example, you can add data-image to options.</p>
        <div class="form-group images">
          <label for="select-image">What do you want to do today?</label>
          <select class="form-control" id="select-image" multiple data-select-a11y>
              <option data-image="https://placekitten.com/g/200/200">Sleeping</option>
              <option data-image="https://placekitten.com/g/200/200">Climbing trees</option>
              <option data-image="https://placekitten.com/g/200/200">Knitting socks</option>
              <option data-image="https://placekitten.com/g/200/200" selected>Riding bikes</option>
              <option data-image="https://placekitten.com/g/200/200">Eating cupcakes</option>
          </select>
        </div>

        <p class="form-buttons">
          <button type="reset">Reset filters</button>
          <button type="submit">Submit button</button>
        </p>

      </form>

      <p>To be transformed by select-a11y.js, the <code>select</code> element must be passed to the <code>Select()</code> constructor:</p>
      <p><code>new Select(HTMLSelectElement);</code></p>

      <p>Accessibility texts can be passed; the following texts are the defaults:</p>
      <pre><code>new Select(HTMLSelectElement, {
  text:{
    help: 'Utilisez la tabulation (ou la touche flèche du bas) pour naviguer dans la liste des suggestions',
    placeholder: 'Rechercher dans la liste',
    noResult: 'Aucun résultat',
    results: '{x} suggestion(s) disponibles',
    deleteItem: 'Supprimer {t}',
    delete: 'Supprimer'
  }
});</code></pre>

      <p>The simpliest way to use the plugin is to add a data-attribute on the selects that you want to transform, like <code>data-select-a11y</code> and add the following lines in one of your JavaScript file:</p>
      <pre><code>var selects = document.querySelectorAll('select[data-select-a11y]');

Array.prototype.forEach.call(selects, function(select){
  new Select(select);
});</code></pre>
    </div>
  </main>

  <footer class="footer" role="contentinfo">
    <div class="pidila-footer">
      <div class="container">
        <div class="footer-content">
          <p><strong>select-a11y</strong> is part of the <abbr title="Pôle intégration html de la Direction de l'information légale et administrative" lang="fr">PiDILA</abbr>’s accessible and responsive UI components library <svg class="svg-icon" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/img/scampi.svg" x="0" y="0" width="100%" height="100%"></image></svg> <a href="https://pidila.gitlab.io/scampi">Scampi</a>.
          It was primarily developed for <a href="https://service-public.fr">service-public.fr</a> : see filter boxes on <a href="https://www.service-public.fr/demarches-silence-vaut-accord/recherche">this page</a>.</p>
          <p>Licence: MIT - CeCILL-B. Feel free to use it or contribute: <a href="https://gitlab.com/pidila/select-a11y">Gitlab repository</a>.</p>
        </div>
        <div class="pidila-logo">
          <a href="https://pidila.gitlab.io">
            <svg class="svg-logo" width="100" height="40" viewBox="0 0 100 40" aria-describedby="title" focusable="false">
              <title id="title">Pidila website</title>
              <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/img/pidila.svg" x="0" y="0" width="100%" height="100%"></image>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </footer>
  <script src="assets/scripts/index.js"></script>
</body>
</html>