diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index d619e24f..5f84e4aa 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -202,6 +202,8 @@ const Navbar: React.FC = () => {
className="account-switcher__trigger"
onClick={() => setSwitcherOpen(!switcherOpen)}
aria-label="Switch account"
+ aria-haspopup="menu"
+ aria-expanded={switcherOpen}
>
@@ -368,6 +370,8 @@ const Navbar: React.FC = () => {
className="navbar__hamburger"
onClick={() => { setDropdownOpen(!dropdownOpen); setSwitcherOpen(false); }}
aria-label={dropdownOpen ? "Close menu" : "Open menu"}
+ aria-haspopup="menu"
+ aria-expanded={dropdownOpen}
>
{dropdownOpen ?
:
}
diff --git a/src/components/ui/feedback-modal.tsx b/src/components/ui/feedback-modal.tsx
index 77d232e8..715e66dd 100644
--- a/src/components/ui/feedback-modal.tsx
+++ b/src/components/ui/feedback-modal.tsx
@@ -3,6 +3,7 @@
import React, { useEffect, useRef, useState, useCallback } from "react"
import { createPortal } from "react-dom"
import { MessageSquare, X, Maximize2, Minimize2 } from "lucide-react"
+import { useFocusTrap } from "@/hooks/use-focus-trap"
export default function FeedbackModal() {
const [isOpen, setIsOpen] = useState(false)
@@ -15,6 +16,7 @@ export default function FeedbackModal() {
const [error, setError] = useState("")
const [bottomOffset, setBottomOffset] = useState(20)
const backdropRef = useRef
(null)
+ const focusTrapRef = useFocusTrap(isOpen)
const textareaRef = useRef(null)
// Bottom sheet drag state (mobile)
@@ -28,7 +30,8 @@ export default function FeedbackModal() {
if (!footer) { setBottomOffset(20); return }
const footerRect = footer.getBoundingClientRect()
const viewportHeight = window.innerHeight
- if (footerRect.top < viewportHeight) {
+ // Only push button up when footer is visible from below, not when scrolled past
+ if (footerRect.top < viewportHeight && footerRect.bottom > 0) {
setBottomOffset(viewportHeight - footerRect.top + 12)
} else {
setBottomOffset(20)
@@ -273,6 +276,7 @@ export default function FeedbackModal() {
>
{
@@ -8,26 +8,35 @@ export interface InputProps
}
const Input = React.forwardRef
(
- ({ label, error, helperText, className = "", ...props }, ref) => {
+ ({ label, error, helperText, className = "", id, ...props }, ref) => {
+ const autoId = useId();
+ const inputId = id || autoId;
+ const errorId = error ? `${inputId}-error` : undefined;
+ const helperId = !error && helperText ? `${inputId}-helper` : undefined;
+ const describedBy = [errorId, helperId].filter(Boolean).join(" ") || undefined;
+
return (
{label && (
-
+
{title}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index c806768f..414a8f12 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useId } from "react";
export interface TextareaProps
extends React.TextareaHTMLAttributes
{
@@ -9,27 +9,36 @@ export interface TextareaProps
}
const Textarea = React.forwardRef(
- ({ label, error, helperText, rows = 3, className = "", ...props }, ref) => {
+ ({ label, error, helperText, rows = 3, className = "", id, ...props }, ref) => {
+ const autoId = useId();
+ const textareaId = id || autoId;
+ const errorId = error ? `${textareaId}-error` : undefined;
+ const helperId = !error && helperText ? `${textareaId}-helper` : undefined;
+ const describedBy = [errorId, helperId].filter(Boolean).join(" ") || undefined;
+
return (
{label && (
-