⌨️ a11y(Settings): Improved Keyboard Navigation & Consistent Styling (#3975)

* feat: settings tba accessible

* refactor: cleanup unused code

* refactor: improve accessibility and user experience in ChatDirection component

* style: focus ring primary class

* improve a11y of avatar dialog

* style: a11y improvements for Settings

* style: focus ring primary class in OriginalDialog component

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Marco Beretta 2024-09-10 10:11:39 -09:00 committed by GitHub
parent 1a1e6850a3
commit d6c0121b19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 507 additions and 513 deletions

View file

@ -1178,11 +1178,19 @@ button {
color: rgba(64, 65, 79, var(--tw-text-opacity));
font-size: 0.875rem;
line-height: 1.25rem;
transition: all 0.1s ease-in-out;
}
.btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity));
}
.btn-neutral:focus {
outline: none;
box-shadow: 0 0 0 2px var(--ring-primary);
}
.dark .btn-neutral {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
@ -1191,10 +1199,15 @@ button {
border-color: rgba(66, 66, 66, var(--tw-border-opacity));
color: rgba(255, 255, 240, var(--tw-text-opacity));
}
.dark .btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(66, 66, 66, var(--tw-bg-opacity));
}
.dark .btn-neutral:focus {
box-shadow: 0 0 0 2px var(--ring-primary);
}
.btn-small {
padding: 0.25rem 0.5rem;
}