npx shadcn@latest add visually-hidden
⠦ Checking registry.
Something went wrong. Please check the error below for more details. If the problem persists, please open an issue on GitHub.
The component at https://ui.shadcn.com/r/styles/new-york-v4/visually-hidden.json was not found. It may not exist at the registry. Please make sure it is a valid component.
problem not solving remove that component use other if required
You're right, the visually-hidden component doesn't exist in the shadcn/ui registry. Let's fix the accessibility warnings without it by ensuring all dialogs have proper titles.
Proper Dialog Titles: All dialogs now have clear, descriptive titles:
aria-label attributes to icon-only buttons for better screen reader supportuseToast hook that was being imported# Add the toast component
npx shadcn@latest add toastIf the shadcn toast doesn't work, you can use a simple alert-based toast:
// Replace useToast calls with simple alerts
const toast = ({ title, description, variant }: any) => {
const message = `${title}: ${description}`
if (variant === "destructive") {
alert(`Error - ${message}`)
} else {
alert(`Success - ${message}`)
}
}This solution removes the accessibility warnings by ensuring all dialogs have proper titles and descriptions, making the application more accessible to screen reader users.
[{ "resource": "/c:/Users/sdvs1/Desktop/School Attendence Managemant System/school-attendance-system/hooks/use-toast.ts", "owner": "typescript", "code": "2353", "severity": 8, "message": "Object literal may only specify known properties, and 'open' does not exist in type 'ToasterToast'.", "source": "ts", "startLineNumber": 151, "startColumn": 7, "endLineNumber": 151, "endColumn": 11 },{ "resource": "/c:/Users/sdvs1/Desktop/School Attendence Managemant System/school-attendance-system/hooks/use-toast.ts", "owner": "typescript", "code": "7006", "severity": 8, "message": "Parameter 'open' implicitly has an 'any' type.", "source": "ts", "startLineNumber": 152, "startColumn": 22, "endLineNumber": 152, "endColumn": 26 }]
Let's fix the TypeScript errors in the toast hook by updating the type definitions:
If you prefer a simpler approach without complex state management, here's a basic toast implementation:
use-toast.ts with proper TypeScript typesThe simple approach using alert() is easier to implement and doesn't require complex state management. The TypeScript errors should now be resolved with the updated type definitions.
[{ "resource": "/c:/Users/sdvs1/Desktop/School Attendence Managemant System/school-attendance-system/components/ui/toast-provider.tsx", "owner": "typescript", "code": "2306", "severity": 8, "message": "File 'c:/Users/sdvs1/Desktop/School Attendence Managemant System/school-attendance-system/hooks/use-toast-simple.ts' is not a module.", "source": "ts", "startLineNumber": 5, "startColumn": 26, "endLineNumber": 5, "endColumn": 52 },{ "resource": "/c:/Users/sdvs1/Desktop/School Attendence Managemant System/school-attendance-system/components/ui/toast-provider.tsx", "owner": "typescript", "code": "7006", "severity": 8, "message": "Parameter 't' implicitly has an 'any' type.", "source": "ts", "startLineNumber": 17, "startColumn": 28, "endLineNumber": 17, "endColumn": 29 }]