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
9 changed files with 28 additions and 58 deletions
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>
<a class=category href="/rezepte/category/{recipe.category}" >{recipe.category}</a>
<div>
<div class=name>{recipe.name}</div>
<div class=name>{@html recipe.name}</div>
<div class=description>{recipe.description}</div>
</div>
<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}/>
{#if image_preview_url}
<!-- svelte-ignore a11y-missing-attribute -->
<img src={image_preview_url} class=img_preview width=300px height=300px />
{/if}
<div class=img_label_wrapper>
@@ -369,9 +370,10 @@ input::placeholder{
</div>
<div class=tags>
{#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}
<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>

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

@@ -361,6 +361,7 @@ h3{
<h2>Zutaten</h2>
{#each ingredients as list, list_index}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3 on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
<div>
{#if list.name }
@@ -378,7 +379,9 @@ h3{
</h3>
<div class=ingredients_grid>
{#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>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<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)}>
<Pen fill=var(--nord1) height=1em width=1em></Pen></button>
@@ -389,11 +392,11 @@ h3{
</div>
<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>
<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="mL..." bind:value={new_ingredient.unit} on:keypress={(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="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:keydown={(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>
<Plus fill=white style="width: 2rem; height: 2rem;"></Plus>
</button>
@@ -403,11 +406,11 @@ h3{
<h2>Zutat verändern</h2>
<div class=adder>
<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)}>
<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="mL..." bind:value={edit_ingredient.unit} 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:keypress={(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}>
<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:keydown={(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:keydown={(event) => do_on_key(event, 'Enter', false, 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>
</button>
</div>
@@ -417,8 +420,8 @@ h3{
<dialog id=edit_subheading_ingredient_modal>
<h2>Kategorie umbenennen</h2>
<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)} >
<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}>
<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: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>
</button>
</div>

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

@@ -350,17 +350,6 @@ h3{
cursor: pointer;
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]{
display: inline;
padding: 0.25em 1em;
@@ -416,6 +405,7 @@ h3{
<h2>Zubereitung</h2>
{#each instructions as list, list_index}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3 on:click={() => show_modal_edit_subheading_step(list_index)}>
{#if list.name}
{list.name}
@@ -432,6 +422,7 @@ h3{
</h3>
<ol>
{#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>
<div><button class="action_button button_subtle" on:click={() => show_modal_edit_step(list_index, step_index)}>
<Pen fill=var(--nord1)></Pen>
@@ -447,9 +438,9 @@ h3{
</div>
<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>
<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>
<Plus fill=white style="height: 2rem; width: 2rem"></Plus>
</button>
@@ -459,9 +450,9 @@ h3{
<dialog id=edit_step_modal>
<h2>Schritt verändern</h2>
<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>
<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()}" >
<Check fill=white style="height: 2rem; width: 2rem"></Check>
</button>
@@ -471,7 +462,7 @@ h3{
<dialog id=edit_subheading_steps_modal>
<h2>Kategorie umbenennen</h2>
<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>
<Check fill=white style="height: 2rem; width: 2rem"></Check>
</button>

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

@@ -88,7 +88,8 @@ input[type=checkbox]::after
<div id=labels>
{#each months as month}
<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>
{/each}
</div>

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

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

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

@@ -3,7 +3,6 @@
import SeasonSelect from '$lib/components/SeasonSelect.svelte';
import '$lib/css/action_button.css'
export let data: PageData;
let preamble = ""
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{
text-align: center;
}
.delete{
position: fixed;
right: 0;
bottom: 0;
margin: 2rem;
}
</style>
<h1>Rezept editieren</h1>