Github-Mirror/pocketbase
1
0 Fork 0
mirror of https://github.com/pocketbase/pocketbase.git synced 2026-10-11 08:47:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

[#4607] fixed the keyboard-accebility of the Admin UI dropdowns

Browse Source
This commit is contained in:
Gani Georgiev committed 2024-03-22 20:07:01 +02:00
1 parent b596bbdc3e
commit 0122d4f527
48 files changed
+552 -453
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/src/components/collections/schema/NewField.svelte
+6 -17
View File
@@ -71,29 +71,18 @@
}
</script>
<button type="button" class="field-types-btn {classes}" on:click={dispatch}>
<i class="ri-add-line" />
<div tabindex="0" role="button" class="field-types-btn {classes}">
<i class="ri-add-line" aria-hidden="true" />
<div class="txt">New field</div>
<Toggler class="dropdown field-types-dropdown">
{#each types as item}
<div
tabindex="0"
class="dropdown-item closable"
on:click|stopPropagation={() => {
select(item.value);
}}
on:keydown|stopPropagation={(e) => {
if (e.code === "Enter" || e.code === "Space") {
select(item.value);
}
}}
>
<i class="icon {item.icon}" />
<button type="button" role="menuitem" class="dropdown-item" on:click={() => select(item.value)}>
<i class="icon {item.icon}" aria-hidden="true" />
<span class="txt">{item.label}</span>
</div>
</button>
{/each}
</Toggler>
</button>
</div>
<style lang="scss">
.field-types-btn.active {
ui/src/components/collections/schema/SchemaField.svelte
+11 -5
View File
@@ -244,22 +244,28 @@
{#if !field.toDelete}
<div class="m-l-auto txt-right">
<div class="inline-flex flex-gap-sm flex-nowrap">
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div tabindex="0" aria-label="More" class="btn btn-circle btn-sm btn-transparent">
<i class="ri-more-line" />
<div
tabindex="0"
role="button"
aria-label="More"
class="btn btn-circle btn-sm btn-transparent"
>
<i class="ri-more-line" aria-hidden="true" />
<Toggler
class="dropdown dropdown-sm dropdown-upside dropdown-right dropdown-nowrap no-min-width"
>
<button
type="button"
class="dropdown-item txt-right"
class="dropdown-item"
role="menuitem"
on:click|preventDefault={duplicate}
>
<span class="txt">Duplicate</span>
</button>
<button
type="button"
class="dropdown-item txt-right"
class="dropdown-item"
role="menuitem"
on:click|preventDefault={remove}
>
<span class="txt">Remove</span>
ui/src/components/collections/schema/SchemaFieldFile.svelte
+13 -4
View File
@@ -117,13 +117,19 @@
bind:keyOfSelected={field.options.mimeTypes}
/>
<div class="help-block">
<button type="button" class="inline-flex flex-gap-0">
<div
tabindex="0"
role="button"
aria-label="More collection options"
class="inline-flex flex-gap-0"
>
<span class="txt link-primary">Choose presets</span>
<i class="ri-arrow-drop-down-fill" />
<i class="ri-arrow-drop-down-fill" aria-hidden="true" />
<Toggler class="dropdown dropdown-sm dropdown-nowrap dropdown-left">
<button
type="button"
class="dropdown-item closable"
role="menuitem"
on:click={() => {
field.options.mimeTypes = [
"image/jpeg",
@@ -139,6 +145,7 @@
<button
type="button"
class="dropdown-item closable"
role="menuitem"
on:click={() => {
field.options.mimeTypes = [
"application/pdf",
@@ -154,6 +161,7 @@
<button
type="button"
class="dropdown-item closable"
role="menuitem"
on:click={() => {
field.options.mimeTypes = [
"video/mp4",
@@ -168,6 +176,7 @@
<button
type="button"
class="dropdown-item closable"
role="menuitem"
on:click={() => {
field.options.mimeTypes = [
"application/zip",
@@ -179,7 +188,7 @@
<span class="txt">Archives (zip, 7zip, rar)</span>
</button>
</Toggler>
</button>
</div>
</div>
</Field>
</div>
@@ -205,7 +214,7 @@
<span class="txt">Use comma as separator.</span>
<button type="button" class="inline-flex flex-gap-0">
<span class="txt link-primary">Supported formats</span>
<i class="ri-arrow-drop-down-fill" />
<i class="ri-arrow-drop-down-fill" aria-hidden="true" />
<Toggler class="dropdown dropdown-sm dropdown-center dropdown-nowrap p-r-10">
<ul class="m-0">
<li>