added aria-expanded to the dropdown triggers

ui/src/components/base/Accordion.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
     import { slide } from "svelte/transition";
 
     const dispatch = createEventDispatcher();
@@ -79,6 +79,7 @@
         class="accordion-header"
         {draggable}
         class:interactive
+        aria-expanded={active}
         on:click|preventDefault={() => interactive && toggle()}
         on:drop|preventDefault={(e) => {
             if (draggable) {

ui/src/components/base/Select.svelte

@@ -1,8 +1,8 @@
 <script>
-    import { onMount } from "svelte";
-    import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
     import Toggler from "@/components/base/Toggler.svelte";
+    import CommonHelper from "@/utils/CommonHelper";
+    import { onMount } from "svelte";
 
     export let id = "";
     export let noOptionsText = "No options found";
@@ -208,6 +208,7 @@
         class="selected-container"
         class:disabled
         class:readonly
+        role="button"
     >
         {#each CommonHelper.toArray(selected) as item, i}
             <div class="option">

ui/src/components/base/Toggler.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
     import { fly } from "svelte/transition";
 
     export let trigger = undefined;
@@ -25,9 +25,11 @@
 
     $: if (active) {
         activeTrigger?.classList?.add("active");
+        activeTrigger?.setAttribute("aria-expanded", true);
         dispatch("show");
     } else {
         activeTrigger?.classList?.remove("active");
+        activeTrigger?.setAttribute("aria-expanded", false);
         dispatch("hide");
     }
 

ui/src/components/collections/schema/SchemaField.svelte

@@ -3,13 +3,13 @@
 </script>
 
 <script>
+    import tooltip from "@/actions/tooltip";
+    import Field from "@/components/base/Field.svelte";
+    import Toggler from "@/components/base/Toggler.svelte";
+    import { errors, setErrors } from "@/stores/errors";
+    import CommonHelper from "@/utils/CommonHelper";
     import { createEventDispatcher, onMount } from "svelte";
     import { slide } from "svelte/transition";
-    import CommonHelper from "@/utils/CommonHelper";
-    import tooltip from "@/actions/tooltip";
-    import { errors, setErrors } from "@/stores/errors";
-    import Toggler from "@/components/base/Toggler.svelte";
-    import Field from "@/components/base/Field.svelte";
 
     const componentId = "f_" + CommonHelper.randomString(8);
 
@@ -198,6 +198,7 @@
                 class:btn-hint={!showOptions && !hasErrors}
                 class:btn-danger={hasErrors}
                 on:click={toggle}
+                aria-expanded={showOptions}
             >
                 <i class="ri-settings-3-line" />
             </button>

ui/src/components/collections/schema/SchemaFieldFile.svelte

@@ -1,13 +1,13 @@
 <script>
-    import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
-    import Toggler from "@/components/base/Toggler.svelte";
-    import ObjectSelect from "@/components/base/ObjectSelect.svelte";
     import MimeTypeSelectOption from "@/components/base/MimeTypeSelectOption.svelte";
     import MultipleValueInput from "@/components/base/MultipleValueInput.svelte";
+    import ObjectSelect from "@/components/base/ObjectSelect.svelte";
+    import Toggler from "@/components/base/Toggler.svelte";
     import SchemaField from "@/components/collections/schema/SchemaField.svelte";
     import baseMimeTypesList from "@/mimes.js";
+    import CommonHelper from "@/utils/CommonHelper";
 
     export let field;
     export let key = "";
@@ -117,12 +117,7 @@
                         bind:keyOfSelected={field.options.mimeTypes}
                     />
                     <div class="help-block">
-                        <div
-                            tabindex="0"
-                            role="button"
-                            aria-label="More collection options"
-                            class="inline-flex flex-gap-0"
-                        >
+                        <div tabindex="0" role="button" class="inline-flex flex-gap-0">
                             <span class="txt link-primary">Choose presets</span>
                             <i class="ri-arrow-drop-down-fill" aria-hidden="true" />
                             <Toggler class="dropdown dropdown-sm dropdown-nowrap dropdown-left">