self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-28 05:18:38 +02:00
Code Issues Releases Activity

feat(web): search bar keyboard accessibility (#11323)

Browse Source 
* feat(web): search bar keyboard accessibility

* fix: adjust aria attributes

* fix: safari announcing the correct option count

* minor adjustments

- CircleIconButton disabled cursor
- more generic selection handler

* fix: more subtle border color in dark mode

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Ben
2024-07-26 17:45:15 -04:00
committed by GitHub
parent 86b3e3ee13
commit a78eeb9b9c
6 changed files with 237 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/lib/components/elements/buttons/circle-icon-button.svelte
View File

@ -27,6 +27,8 @@
export let ariaHasPopup: boolean | undefined = undefined;
export let ariaExpanded: boolean | undefined = undefined;
export let ariaControls: string | undefined = undefined;
export let tabindex: number | undefined = undefined;
export let disabled: boolean | undefined = undefined;
/**
* Override the default styling of the button for specific use cases, such as the icon color.
@ -53,9 +55,11 @@
{id}
{title}
{type}
{tabindex}
{disabled}
style:width={buttonSize ? buttonSize + 'px' : ''}
style:height={buttonSize ? buttonSize + 'px' : ''}
class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all hover:dark:text-immich-dark-gray {className} {mobileClass}"
class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all disabled:cursor-default hover:dark:text-immich-dark-gray {className} {mobileClass}"
aria-haspopup={ariaHasPopup}
aria-expanded={ariaExpanded}
aria-controls={ariaControls}