fix a11y, behavior improvement

Author: MaxLardenois

site/src/components/shortcodes/ComponentFinder.astro

@@ -8,7 +8,7 @@
       <svg aria-hidden="true">
         <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"></use>
       </svg>
-      <label for="findComponentInput">Find component</label>
+      <label for="oudsComponentFinderInput">Find component</label>
       <input type="search" class="text-input-field" id="oudsComponentFinderInput" placeholder=" " />
     </div>
   </div>
@@ -20,13 +20,13 @@
 <script>
   class OudsComponentFinder extends HTMLElement {
     connectedCallback() {
-      const searchInput = this.querySelector('#oudsComponentFinderInput') as HTMLInputElement
+      const searchInput = document.getElementById('oudsComponentFinderInput') as HTMLInputElement
       if (!searchInput) return
-      searchInput.addEventListener('input', (e: KeyboardEvent) => {
+      searchInput.addEventListener('input', () => {
         setTimeout(() => {
           this.querySelectorAll('ul > *').forEach((elt) => elt.classList.remove('d-none'))
           if (searchInput.value) {
-            this.querySelectorAll(`ul > :not([data-name^=${searchInput.value}])`).forEach((elt) =>
+            this.querySelectorAll(`ul > :not([data-name*=${searchInput.value.toLowerCase()}])`).forEach((elt) =>
               elt.classList.add('d-none')
             )
           }

site/src/content/docs/components.mdx

@@ -18,7 +18,7 @@ import fs from 'node:fs'
       .pages.map((page) => {
         if (page.category && !page.draft) {
           return (
-            <li class="col" data-name={page.title}>
+            <li class="col" data-name={page.title.toLowerCase()}>
               <div class="card position-relative h-100">
                 <div class="card-top">
                   <img