helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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}