refactor: reformat and add screenreader label

This commit is contained in:
Bart van der Braak 2023-07-31 13:03:30 +02:00
parent 1a74e1236d
commit 4b1259bc6f

View file

@ -13,29 +13,47 @@
<AppBar> <AppBar>
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
<button aria-label="Toggle navigation menu" class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}> <button
aria-label="Toggle navigation menu"
class="md:hidden btn btn-sm mr-4"
on:click={drawerOpen}
>
<span> <span>
<Hamburger /> <Hamburger />
</span> </span>
</button> </button>
<img src="./icon.svg" alt="Logo" srcset="" class="pr-2" /> <img width="32" height="24" src="./icon.svg" alt="Logo" srcset="" class="" />
<h2 class="code">hellob.art</h2> <h1 class="h6">
<span
class="bg-gradient-to-br logo-text-gradient bg-clip-text text-transparent box-decoration-clone font-mono pl-3"
>hellob.art</span
>
</h1>
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="trail"> <svelte:fragment slot="trail">
<a <a
href="https://linkedin.com/in/bartvdbraak" href="https://linkedin.com/in/bartvdbraak"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="btn-icon btn-icon-sm hover:variant-soft-primary"><LinkedIn /><span class="sr-only">LinkedIn Profile of Bart van der Braak</span></a class="btn-icon btn-icon-sm hover:variant-soft-primary"
><LinkedIn /><span class="sr-only">LinkedIn Profile of Bart van der Braak</span></a
> >
<a <a
href="https://github.com/bartvdbraak" href="https://github.com/bartvdbraak"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="btn-icon btn-icon-sm hover:variant-soft-primary"><GitHub /><span class="sr-only">GitHub Profile of Bart van der Braak</span></a class="btn-icon btn-icon-sm hover:variant-soft-primary"
><GitHub /><span class="sr-only">GitHub Profile of Bart van der Braak</span></a
> >
<LightSwitch /> <LightSwitch />
</svelte:fragment> </svelte:fragment>
</AppBar> </AppBar>
<ProgressBar label="Progress Bar" value={progress} max={100} rounded="" /> <span id="progress-bar-label" class="sr-only">Loading Progress</span>
<ProgressBar
label="Progress Bar"
labelledby="progress-bar-label"
value={progress}
max={100}
rounded=""
/>