Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove unnecessary a11y warnings

Browse Source
This commit is contained in:
Alexander Bocken 2023-07-03 00:09:00 +02:00
parent 24ddd39f35
commit 3d631f69b5
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
9 changed files with 28 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Card.svelte
View File

@ -197,7 +197,7 @@ if(icon_override){
<div class=title> <div class=title>
<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a> <a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>
<div> <div>
<div class=name>{recipe.name}</div> <div class=name>{@html recipe.name}</div>
<div class=description>{recipe.description}</div> <div class=description>{recipe.description}</div>
</div> </div>
<div class=tags> <div class=tags>

6
src/lib/components/CardAdd.svelte
View File

@ -346,6 +346,7 @@ input::placeholder{
<input class=icon placeholder=🥫 bind:value={card_data.icon}/> <input class=icon placeholder=🥫 bind:value={card_data.icon}/>
{#if image_preview_url} {#if image_preview_url}
<!-- svelte-ignore a11y-missing-attribute -->
<img src={image_preview_url} class=img_preview width=300px height=300px /> <img src={image_preview_url} class=img_preview width=300px height=300px />
{/if} {/if}
<div class=img_label_wrapper> <div class=img_label_wrapper>
@ -369,9 +370,10 @@ input::placeholder{
</div> </div>
<div class=tags> <div class=tags>
{#each card_data.tags as tag} {#each card_data.tags as tag}
<div class="tag" tabindex="0" on:keypress={remove_on_enter(event ,tag)} on:click='{remove_from_tags(tag)}'>{tag}</div> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="tag" tabindex="0" on:keydown={remove_on_enter(event ,tag)} on:click='{remove_from_tags(tag)}'>{tag}</div>
{/each} {/each}
<div class="tag input_wrapper"><span class=input>+</span><input class="tag_input" type="text" on:keypress={add_on_enter} on:focusout={add_to_tags} size="1" bind:value={new_tag} placeholder=Stichwort...></div> <div class="tag input_wrapper"><span class=input>+</span><input class="tag_input" type="text" on:keydown={add_on_enter} on:focusout={add_to_tags} size="1" bind:value={new_tag} placeholder=Stichwort...></div>
</div> </div>
</div> </div>

25
src/lib/components/CreateIngredientList.svelte
View File

@ -361,6 +361,7 @@ h3{
<h2>Zutaten</h2> <h2>Zutaten</h2>
{#each ingredients as list, list_index} {#each ingredients as list, list_index}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3 on:click="{() => show_modal_edit_subheading_ingredient(list_index)}"> <h3 on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
<div> <div>
{#if list.name } {#if list.name }
@ -378,7 +379,9 @@ h3{
</h3> </h3>
<div class=ingredients_grid> <div class=ingredients_grid>
{#each list.list as ingredient, ingredient_index} {#each list.list as ingredient, ingredient_index}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.amount} {ingredient.unit}</div> <div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.amount} {ingredient.unit}</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.name}</div> <div on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} >{ingredient.name}</div>
<div class=mod_icons><button class="action_button button_subtle" on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}> <div class=mod_icons><button class="action_button button_subtle" on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
<Pen fill=var(--nord1) height=1em width=1em></Pen></button> <Pen fill=var(--nord1) height=1em width=1em></Pen></button>
@ -389,11 +392,11 @@ h3{
</div> </div>
<div class="adder shadow"> <div class="adder shadow">
<input class=category type="text" bind:value={new_ingredient.sublist} placeholder="Kategorie (optional)" on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}> <input class=category type="text" bind:value={new_ingredient.sublist} placeholder="Kategorie (optional)" on:keydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
<div class=add_ingredient> <div class=add_ingredient>
<input type="text" placeholder="250..." bind:value={new_ingredient.amount} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}> <input type="text" placeholder="250..." bind:value={new_ingredient.amount} on:keydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
<input type="text" placeholder="mL..." bind:value={new_ingredient.unit} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}> <input type="text" placeholder="mL..." bind:value={new_ingredient.unit} on:keydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
<input type="text" placeholder="Milch..." bind:value={new_ingredient.name} on:keypress={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}> <input type="text" placeholder="Milch..." bind:value={new_ingredient.name} on:keydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
<button on:click={() => add_new_ingredient()} class=action_button> <button on:click={() => add_new_ingredient()} class=action_button>
<Plus fill=white style="width: 2rem; height: 2rem;"></Plus> <Plus fill=white style="width: 2rem; height: 2rem;"></Plus>
</button> </button>
@ -403,11 +406,11 @@ h3{
<h2>Zutat verändern</h2> <h2>Zutat verändern</h2>
<div class=adder> <div class=adder>
<input class=category type="text" bind:value={edit_ingredient.sublist} placeholder="Kategorie (optional)"> <input class=category type="text" bind:value={edit_ingredient.sublist} placeholder="Kategorie (optional)">
<div class=add_ingredient on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> <div class=add_ingredient on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
<input type="text" placeholder="250..." bind:value={edit_ingredient.amount} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> <input type="text" placeholder="250..." bind:value={edit_ingredient.amount} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
<input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> <input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
<input type="text" placeholder="Milch..." bind:value={edit_ingredient.name} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}> <input type="text" placeholder="Milch..." bind:value={edit_ingredient.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
<button class=action_button on:keypress={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)} on:click={edit_ingredient_and_close_modal}> <button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)} on:click={edit_ingredient_and_close_modal}>
<Check fill=white style="width: 2rem; height: 2rem;"></Check> <Check fill=white style="width: 2rem; height: 2rem;"></Check>
</button> </button>
</div> </div>
@ -417,8 +420,8 @@ h3{
<dialog id=edit_subheading_ingredient_modal> <dialog id=edit_subheading_ingredient_modal>
<h2>Kategorie umbenennen</h2> <h2>Kategorie umbenennen</h2>
<div class=heading_wrapper> <div class=heading_wrapper>
<input class=heading type="text" bind:value={edit_heading.name} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} > <input class=heading type="text" bind:value={edit_heading.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} >
<button class=action_button on:keypress={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} on:click={edit_subheading_and_close_modal}> <button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} on:click={edit_subheading_and_close_modal}>
<Check fill=white style="width:2rem; height:2rem;"></Check> <Check fill=white style="width:2rem; height:2rem;"></Check>
</button> </button>
</div> </div>

23
src/lib/components/CreateStepList.svelte
View File

@ -350,17 +350,6 @@ h3{
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.additional_info input{
all:unset;
display: inline;
width: 10ch;
border-radius: 1000px;
border: 2px solid grey;
padding: 0em 0.5em;
}
.additional_info input::placeholder{
color: grey;
}
.additional_info p[contenteditable]{ .additional_info p[contenteditable]{
display: inline; display: inline;
padding: 0.25em 1em; padding: 0.25em 1em;
@ -416,6 +405,7 @@ h3{
<h2>Zubereitung</h2> <h2>Zubereitung</h2>
{#each instructions as list, list_index} {#each instructions as list, list_index}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3 on:click={() => show_modal_edit_subheading_step(list_index)}> <h3 on:click={() => show_modal_edit_subheading_step(list_index)}>
{#if list.name} {#if list.name}
{list.name} {list.name}
@ -432,6 +422,7 @@ h3{
</h3> </h3>
<ol> <ol>
{#each list.steps as step, step_index} {#each list.steps as step, step_index}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<li><div><div on:click={() => show_modal_edit_step(list_index, step_index)}>{step}</div> <li><div><div on:click={() => show_modal_edit_step(list_index, step_index)}>{step}</div>
<div><button class="action_button button_subtle" on:click={() => show_modal_edit_step(list_index, step_index)}> <div><button class="action_button button_subtle" on:click={() => show_modal_edit_step(list_index, step_index)}>
<Pen fill=var(--nord1)></Pen> <Pen fill=var(--nord1)></Pen>
@ -447,9 +438,9 @@ h3{
</div> </div>
<div class='adder shadow'> <div class='adder shadow'>
<input class=category type="text" bind:value={new_step.name} placeholder="Kategorie (optional)"on:keypress={(event) => do_on_key(event, 'Enter', false , add_new_step)} > <input class=category type="text" bind:value={new_step.name} placeholder="Kategorie (optional)"on:keydown={(event) => do_on_key(event, 'Enter', false , add_new_step)} >
<div class=add_step> <div class=add_step>
<p id=step contenteditable on:focus='{clear_step}' on:blur={add_placeholder} bind:innerText={new_step.step} on:keypress={(event) => do_on_key(event, 'Enter', true , add_new_step)}></p> <p id=step contenteditable on:focus='{clear_step}' on:blur={add_placeholder} bind:innerText={new_step.step} on:keydown={(event) => do_on_key(event, 'Enter', true , add_new_step)}></p>
<button on:click={() => add_new_step()} class=action_button> <button on:click={() => add_new_step()} class=action_button>
<Plus fill=white style="height: 2rem; width: 2rem"></Plus> <Plus fill=white style="height: 2rem; width: 2rem"></Plus>
</button> </button>
@ -459,9 +450,9 @@ h3{
<dialog id=edit_step_modal> <dialog id=edit_step_modal>
<h2>Schritt verändern</h2> <h2>Schritt verändern</h2>
<div class=adder> <div class=adder>
<input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)" on:keypress={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}> <input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)" on:keydown={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>
<div class=add_step> <div class=add_step>
<p id=step contenteditable bind:innerText={edit_step.step} on:keypress={(event) => do_on_key(event, 'Enter', true , edit_step_and_close_modal)}></p> <p id=step contenteditable bind:innerText={edit_step.step} on:keydown={(event) => do_on_key(event, 'Enter', true , edit_step_and_close_modal)}></p>
<button class=action_button on:click="{() => edit_step_and_close_modal()}" > <button class=action_button on:click="{() => edit_step_and_close_modal()}" >
<Check fill=white style="height: 2rem; width: 2rem"></Check> <Check fill=white style="height: 2rem; width: 2rem"></Check>
</button> </button>
@ -471,7 +462,7 @@ h3{
<dialog id=edit_subheading_steps_modal> <dialog id=edit_subheading_steps_modal>
<h2>Kategorie umbenennen</h2> <h2>Kategorie umbenennen</h2>
<div class=heading_wrapper> <div class=heading_wrapper>
<input class="heading" type="text" bind:value={edit_heading.name} on:keypress={(event) => do_on_key(event, 'Enter', false, edit_subheading_steps_and_close_modal)}> <input class="heading" type="text" bind:value={edit_heading.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_steps_and_close_modal)}>
<button on:click={edit_subheading_steps_and_close_modal} class=action_button> <button on:click={edit_subheading_steps_and_close_modal} class=action_button>
<Check fill=white style="height: 2rem; width: 2rem"></Check> <Check fill=white style="height: 2rem; width: 2rem"></Check>
</button> </button>

3
src/lib/components/SeasonSelect.svelte
View File

@ -88,7 +88,8 @@ input[type=checkbox]::after
<div id=labels> <div id=labels>
{#each months as month} {#each months as month}
<div class=checkbox_container> <div class=checkbox_container>
<label tabindex="0" on:keypress={(event) => do_on_key(event, 'Enter', false, () => {toggle_checkbox_on_key(event)}) } ><input tabindex=-1 type="checkbox" name="checkbox" value="value" on:click={set_season}>{month}</label> <!-- svelte-ignore a11y-no-noninteractive-tabindex-->
<label tabindex="0" on:keydown={(event) => do_on_key(event, 'Enter', false, () => {toggle_checkbox_on_key(event)}) } ><input tabindex=-1 type="checkbox" name="checkbox" value="value" on:click={set_season}>{month}</label>
</div> </div>
{/each} {/each}
</div> </div>

7
src/lib/components/TitleImgParallax.svelte
View File

@ -35,13 +35,6 @@
position: relative; position: relative;
margin: 30vh auto 0; margin: 30vh auto 0;
} }
.blocker{
display:block;
z-index: 10;
background-color: white;
width: 100%;
height: 20vh;
}
.image-container { .image-container {
position: sticky; position: sticky;

1
src/routes/rezepte/add/+page.svelte
View File

@ -3,7 +3,6 @@
import SeasonSelect from '$lib/components/SeasonSelect.svelte'; import SeasonSelect from '$lib/components/SeasonSelect.svelte';
import '$lib/css/action_button.css' import '$lib/css/action_button.css'
export let data: PageData;
let preamble = "" let preamble = ""
let addendum = "" let addendum = ""

13
src/routes/rezepte/add/+page.ts
View File

@ -1,13 +0,0 @@
import type { PageLoad } from "./$types";
export async function load({ fetch }) {
let current_month = new Date().getMonth() + 1
const res_season = await fetch(`/api/items/category`);
const res_all_brief = await fetch(`/api/items/tag`);
const item_season = await res_season.json();
const item_all_brief = await res_all_brief.json();
return {
season: item_season,
all_brief: item_all_brief,
};
};

6
src/routes/rezepte/edit/[name]/+page.svelte
View File

@ -245,12 +245,6 @@ h1{
h3{ h3{
text-align: center; text-align: center;
} }
.delete{
position: fixed;
right: 0;
bottom: 0;
margin: 2rem;
}
</style> </style>
<h1>Rezept editieren</h1> <h1>Rezept editieren</h1>