@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/lib/components/ChatInput/accessibility/ChatInputAccessibility.tsx

@@ -0,0 +1,597 @@
+import { forwardRef, useState } from 'react'
+import { Button } from '../../Button/index'
+import { ButtonType, ButtonSize } from '../../Button/types'
+import ChatInput from '../ChatInput'
+import { chatInputAccessibilityReport } from './ChatInputAccessibilityReport'
+import {
+    generateAccessibilityReport,
+    downloadReport,
+    getMimeType,
+    getFileExtension,
+    type ReportFormat,
+} from '../../shared/accessibility/reportGenerator'
+import { Download as DownloadIcon } from 'lucide-react'
+import type { AttachedFile, TopQuery } from '../types'
+
+export type ChatInputAccessibilityProps = {
+    className?: string
+}
+
+const ChatInputAccessibility = forwardRef<
+    HTMLDivElement,
+    ChatInputAccessibilityProps
+>(({ className }, ref) => {
+    const [selectedFormat, setSelectedFormat] =
+        useState<ReportFormat>('markdown')
+    const [includeTestResults, setIncludeTestResults] = useState(true)
+    const [includeRecommendations, setIncludeRecommendations] = useState(true)
+    const [reportHtmlContent, setReportHtmlContent] = useState<string | null>(
+        null
+    )
+    const [showFullReport, setShowFullReport] = useState(false)
+    const [message, setMessage] = useState('')
+    const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([])
+    const [topQueries] = useState<TopQuery[]>([
+        { id: '1', text: 'What is the status of my order?' },
+        { id: '2', text: 'How do I return an item?' },
+        { id: '3', text: 'Where is my package?' },
+        { id: '4', text: 'How do I cancel my subscription?' },
+    ])
+
+    const handleDownload = () => {
+        try {
+            const content = generateAccessibilityReport(
+                chatInputAccessibilityReport,
+                {
+                    format: selectedFormat,
+                    includeTestResults,
+                    includeRecommendations,
+                }
+            )
+
+            const filename = `chatinput-accessibility-report-${chatInputAccessibilityReport.reportDate}.${getFileExtension(selectedFormat)}`
+            const mimeType = getMimeType(selectedFormat)
+
+            downloadReport(content, filename, mimeType)
+        } catch (error) {
+            console.error('Error generating report:', error)
+            alert('Failed to generate report. Please try again.')
+        }
+    }
+
+    const handleViewReport = () => {
+        try {
+            const htmlContent = generateAccessibilityReport(
+                chatInputAccessibilityReport,
+                {
+                    format: 'html',
+                    includeTestResults,
+                    includeRecommendations,
+                }
+            )
+            setReportHtmlContent(htmlContent)
+            setShowFullReport(true)
+        } catch (error) {
+            console.error('Error generating report:', error)
+            alert('Failed to generate report. Please try again.')
+        }
+    }
+
+    const handleAttachFiles = (files: File[]) => {
+        const newFiles: AttachedFile[] = files.map((file, index) => ({
+            id: `file-${Date.now()}-${index}`,
+            name: file.name,
+            type: file.type.startsWith('image/')
+                ? 'image'
+                : file.type === 'application/pdf'
+                  ? 'pdf'
+                  : file.type === 'text/csv' || file.name.endsWith('.csv')
+                    ? 'csv'
+                    : file.type.startsWith('text/')
+                      ? 'text'
+                      : 'other',
+            size: file.size,
+        }))
+        setAttachedFiles([...attachedFiles, ...newFiles])
+    }
+
+    const handleFileRemove = (fileId: string) => {
+        setAttachedFiles(attachedFiles.filter((f) => f.id !== fileId))
+    }
+
+    const handleTopQuerySelect = (query: TopQuery) => {
+        setMessage(query.text)
+    }
+
+    const report = chatInputAccessibilityReport
+    const compliantCount = report.criteria.filter(
+        (c) => c.status === 'compliant'
+    ).length
+    const nonCompliantCount = report.criteria.filter(
+        (c) => c.status === 'non-compliant'
+    ).length
+    const unsureCount = report.criteria.filter(
+        (c) => c.status === 'unsure'
+    ).length
+    const totalApplicable = report.criteria.filter(
+        (c) => c.status !== 'not-applicable'
+    ).length
+    const complianceRate =
+        totalApplicable > 0
+            ? Math.round((compliantCount / totalApplicable) * 100)
+            : 0
+
+    return (
+        <div ref={ref} className={className}>
+            <div className="p-8 space-y-8 max-w-7xl mx-auto">
+                <div className="space-y-4">
+                    <div className="flex items-start justify-between">
+                        <div>
+                            <h1 className="text-3xl font-bold mb-1 text-gray-900">
+                                ChatInput Component Accessibility
+                            </h1>
+                            <div className="flex items-center gap-3 text-sm text-gray-500 mb-2">
+                                <span>WCAG {report.wcagVersion}</span>
+                                <span>•</span>
+                                <span>{report.conformanceLevel}</span>
+                                <span>•</span>
+                                <span>{report.reportDate}</span>
+                            </div>
+                            <div className="flex items-center gap-2 text-xs text-gray-400">
+                                <span>Evaluates: WCAG 2.0, 2.1, 2.2</span>
+                            </div>
+                        </div>
+                        <div className="flex gap-2">
+                            <Button
+                                text={
+                                    showFullReport
+                                        ? 'Hide Full Report'
+                                        : 'View Full Report'
+                                }
+                                buttonType={ButtonType.PRIMARY}
+                                size={ButtonSize.SMALL}
+                                onClick={handleViewReport}
+                            />
+                            <Button
+                                text="Download"
+                                buttonType={ButtonType.SECONDARY}
+                                size={ButtonSize.SMALL}
+                                leadingIcon={<DownloadIcon size={16} />}
+                                onClick={handleDownload}
+                            />
+                        </div>
+                    </div>
+
+                    <div className="bg-white border border-gray-200 rounded-lg p-6">
+                        <h2 className="text-xl font-semibold text-gray-900 mb-4">
+                            Download Report
+                        </h2>
+                        <div className="space-y-4">
+                            <div className="flex flex-wrap gap-4">
+                                <label className="flex items-center gap-2 text-sm">
+                                    <input
+                                        type="radio"
+                                        name="format"
+                                        value="markdown"
+                                        checked={selectedFormat === 'markdown'}
+                                        onChange={(e) =>
+                                            setSelectedFormat(
+                                                e.target.value as ReportFormat
+                                            )
+                                        }
+                                    />
+                                    Markdown (.md)
+                                </label>
+                                <label className="flex items-center gap-2 text-sm">
+                                    <input
+                                        type="radio"
+                                        name="format"
+                                        value="html"
+                                        checked={selectedFormat === 'html'}
+                                        onChange={(e) =>
+                                            setSelectedFormat(
+                                                e.target.value as ReportFormat
+                                            )
+                                        }
+                                    />
+                                    HTML (.html)
+                                </label>
+                                <label className="flex items-center gap-2 text-sm">
+                                    <input
+                                        type="radio"
+                                        name="format"
+                                        value="json"
+                                        checked={selectedFormat === 'json'}
+                                        onChange={(e) =>
+                                            setSelectedFormat(
+                                                e.target.value as ReportFormat
+                                            )
+                                        }
+                                    />
+                                    JSON (.json)
+                                </label>
+                            </div>
+
+                            <div className="flex flex-wrap gap-4">
+                                <label className="flex items-center gap-2 text-sm">
+                                    <input
+                                        type="checkbox"
+                                        checked={includeTestResults}
+                                        onChange={(e) =>
+                                            setIncludeTestResults(
+                                                e.target.checked
+                                            )
+                                        }
+                                    />
+                                    Include test results
+                                </label>
+                                <label className="flex items-center gap-2 text-sm">
+                                    <input
+                                        type="checkbox"
+                                        checked={includeRecommendations}
+                                        onChange={(e) =>
+                                            setIncludeRecommendations(
+                                                e.target.checked
+                                            )
+                                        }
+                                    />
+                                    Include recommendations
+                                </label>
+                            </div>
+
+                            <Button
+                                text="Download Report"
+                                buttonType={ButtonType.PRIMARY}
+                                size={ButtonSize.MEDIUM}
+                                leadingIcon={<DownloadIcon size={16} />}
+                                onClick={handleDownload}
+                            />
+                        </div>
+                    </div>
+
+                    {/* Summary Cards */}
+                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                        <div className="bg-white border-2 border-green-200 rounded-lg p-4 shadow-sm">
+                            <div className="text-2xl font-bold mb-1 text-green-600">
+                                {compliantCount}
+                            </div>
+                            <div className="text-xs font-medium text-gray-700">
+                                Compliant ✅
+                            </div>
+                            <div className="text-xs text-gray-500 mt-1">
+                                Verified & tested
+                            </div>
+                        </div>
+                        <div className="bg-white border-2 border-red-200 rounded-lg p-4 shadow-sm">
+                            <div className="text-2xl font-bold mb-1 text-red-600">
+                                {nonCompliantCount}
+                            </div>
+                            <div className="text-xs font-medium text-gray-700">
+                                Non-Compliant ❌
+                            </div>
+                            <div className="text-xs text-gray-500 mt-1">
+                                Issues found
+                            </div>
+                        </div>
+                        <div className="bg-white border-2 border-orange-200 rounded-lg p-4 shadow-sm">
+                            <div className="text-2xl font-bold mb-1 text-orange-600">
+                                {unsureCount}
+                            </div>
+                            <div className="text-xs font-medium text-gray-700">
+                                Unsure ⚠️
+                            </div>
+                            <div className="text-xs text-gray-500 mt-1">
+                                Needs verification
+                            </div>
+                        </div>
+                        <div className="bg-white border-2 border-blue-200 rounded-lg p-4 shadow-sm">
+                            <div className="text-2xl font-bold mb-1 text-blue-600">
+                                {complianceRate}%
+                            </div>
+                            <div className="text-xs font-medium text-gray-700">
+                                Compliance Rate
+                            </div>
+                            <div className="text-xs text-gray-500 mt-1">
+                                Based on verified items
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Full Report Viewer */}
+                {showFullReport && reportHtmlContent && (
+                    <section className="bg-white border-2 border-gray-300 rounded-lg p-6 shadow-lg">
+                        <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-200">
+                            <div>
+                                <h2 className="text-xl font-bold text-gray-900">
+                                    Full Accessibility Report
+                                </h2>
+                                <p className="text-sm text-gray-500 mt-1">
+                                    Interactive HTML report (same as downloaded
+                                    version)
+                                </p>
+                            </div>
+                            <button
+                                onClick={() => {
+                                    setShowFullReport(false)
+                                    setReportHtmlContent(null)
+                                }}
+                                className="px-3 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
+                            >
+                                Close
+                            </button>
+                        </div>
+                        <div className="border border-gray-200 rounded-lg overflow-hidden bg-white">
+                            <iframe
+                                srcDoc={reportHtmlContent}
+                                className="w-full"
+                                style={{
+                                    height: '700px',
+                                    border: 'none',
+                                }}
+                                title="Accessibility Report"
+                                sandbox="allow-same-origin"
+                            />
+                        </div>
+                    </section>
+                )}
+
+                {/* Interactive Demo */}
+                <div className="bg-white border border-gray-200 rounded-lg p-6">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-4">
+                        Interactive Accessibility Demo
+                    </h2>
+                    <p className="text-sm text-gray-600 mb-6">
+                        Test keyboard navigation: Use Tab to navigate to the
+                        textarea. Use Tab/Shift+Tab to move between elements.
+                        Press Enter/Space to activate buttons. Use Arrow keys to
+                        navigate top queries. Press Home/End for first/last
+                        query. Press Escape to close queries. All functionality
+                        is accessible via keyboard.
+                    </p>
+
+                    <div className="space-y-8 max-w-2xl">
+                        {/* Basic ChatInput */}
+                        <div>
+                            <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                                Basic ChatInput
+                            </h3>
+                            <ChatInput
+                                value={message}
+                                onChange={setMessage}
+                                placeholder="Type a message..."
+                                aria-label="Message input"
+                            />
+                        </div>
+
+                        {/* With Max Length */}
+                        <div>
+                            <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                                With Character Limit
+                            </h3>
+                            <ChatInput
+                                value={message}
+                                onChange={setMessage}
+                                placeholder="Type a message..."
+                                maxLength={100}
+                                aria-label="Message input with character limit"
+                                aria-describedby="char-limit-hint"
+                            />
+                            <p
+                                id="char-limit-hint"
+                                className="text-xs text-gray-500 mt-1"
+                            >
+                                Maximum 100 characters
+                            </p>
+                        </div>
+
+                        {/* With File Attachments */}
+                        <div>
+                            <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                                With File Attachments
+                            </h3>
+                            <ChatInput
+                                value={message}
+                                onChange={setMessage}
+                                placeholder="Type a message..."
+                                attachedFiles={attachedFiles}
+                                onAttachFiles={handleAttachFiles}
+                                onFileRemove={handleFileRemove}
+                                aria-label="Message input with file attachments"
+                            />
+                        </div>
+
+                        {/* With Top Queries */}
+                        <div>
+                            <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                                With Top Queries
+                            </h3>
+                            <ChatInput
+                                value={message}
+                                onChange={setMessage}
+                                placeholder="Type a message..."
+                                topQueries={topQueries}
+                                onTopQuerySelect={handleTopQuerySelect}
+                                aria-label="Message input with suggested queries"
+                            />
+                        </div>
+
+                        {/* Disabled State */}
+                        <div>
+                            <h3 className="text-sm font-semibold text-gray-700 mb-2">
+                                Disabled State
+                            </h3>
+                            <ChatInput
+                                value=""
+                                onChange={() => {}}
+                                placeholder="Type a message..."
+                                disabled
+                                aria-label="Disabled message input"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Key Accessibility Features */}
+                <div className="bg-white border border-gray-200 rounded-lg p-6">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-4">
+                        Key Accessibility Features
+                    </h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        {report.strengths.map((strength, index) => (
+                            <div
+                                key={index}
+                                className="flex items-start gap-2 text-sm"
+                            >
+                                <span className="text-green-600 mt-0.5">✓</span>
+                                <span className="text-gray-700">
+                                    {strength}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* WCAG Compliance Breakdown */}
+                <div className="bg-white border border-gray-200 rounded-lg p-6">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-4">
+                        WCAG Compliance Breakdown
+                    </h2>
+                    <div className="space-y-4">
+                        {/* Level A */}
+                        <div>
+                            <h3 className="text-sm font-medium text-gray-900 mb-2">
+                                Level A (Essential)
+                            </h3>
+                            <div className="flex flex-wrap gap-2">
+                                {report.testMethodology.wcagLevels.A.map(
+                                    (criterion, index) => {
+                                        const criterionData =
+                                            report.criteria.find((c) =>
+                                                criterion.startsWith(c.id)
+                                            )
+                                        const statusColor =
+                                            criterionData?.status ===
+                                            'compliant'
+                                                ? 'bg-green-100 text-green-800'
+                                                : criterionData?.status ===
+                                                    'non-compliant'
+                                                  ? 'bg-red-100 text-red-800'
+                                                  : criterionData?.status ===
+                                                      'unsure'
+                                                    ? 'bg-yellow-100 text-yellow-800'
+                                                    : 'bg-gray-100 text-gray-800'
+                                        return (
+                                            <span
+                                                key={index}
+                                                className={`text-xs px-2 py-1 rounded ${statusColor}`}
+                                            >
+                                                {criterion.split(' ')[0]}
+                                            </span>
+                                        )
+                                    }
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Level AA */}
+                        <div>
+                            <h3 className="text-sm font-medium text-gray-900 mb-2">
+                                Level AA (Recommended)
+                            </h3>
+                            <div className="flex flex-wrap gap-2">
+                                {report.testMethodology.wcagLevels.AA.map(
+                                    (criterion, index) => {
+                                        const criterionData =
+                                            report.criteria.find((c) =>
+                                                criterion.startsWith(c.id)
+                                            )
+                                        const statusColor =
+                                            criterionData?.status ===
+                                            'compliant'
+                                                ? 'bg-green-100 text-green-800'
+                                                : criterionData?.status ===
+                                                    'non-compliant'
+                                                  ? 'bg-red-100 text-red-800'
+                                                  : criterionData?.status ===
+                                                      'unsure'
+                                                    ? 'bg-yellow-100 text-yellow-800'
+                                                    : 'bg-gray-100 text-gray-800'
+                                        return (
+                                            <span
+                                                key={index}
+                                                className={`text-xs px-2 py-1 rounded ${statusColor}`}
+                                            >
+                                                {criterion.split(' ')[0]}
+                                            </span>
+                                        )
+                                    }
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Level AAA */}
+                        <div>
+                            <h3 className="text-sm font-medium text-gray-900 mb-2">
+                                Level AAA (Enhanced)
+                            </h3>
+                            <div className="flex flex-wrap gap-2">
+                                {report.testMethodology.wcagLevels.AAA.map(
+                                    (criterion, index) => {
+                                        const criterionData =
+                                            report.criteria.find((c) =>
+                                                criterion.startsWith(c.id)
+                                            )
+                                        const statusColor =
+                                            criterionData?.status ===
+                                            'compliant'
+                                                ? 'bg-green-100 text-green-800'
+                                                : criterionData?.status ===
+                                                    'non-compliant'
+                                                  ? 'bg-red-100 text-red-800'
+                                                  : criterionData?.status ===
+                                                      'unsure'
+                                                    ? 'bg-yellow-100 text-yellow-800'
+                                                    : 'bg-gray-100 text-gray-800'
+                                        return (
+                                            <span
+                                                key={index}
+                                                className={`text-xs px-2 py-1 rounded ${statusColor}`}
+                                            >
+                                                {criterion.split(' ')[0]}
+                                            </span>
+                                        )
+                                    }
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Recommendations */}
+                <div className="bg-white border border-gray-200 rounded-lg p-6">
+                    <h2 className="text-xl font-semibold text-gray-900 mb-4">
+                        Recommendations
+                    </h2>
+                    <div className="space-y-3">
+                        {report.recommendations.map((recommendation, index) => (
+                            <div
+                                key={index}
+                                className="flex items-start gap-2 text-sm"
+                            >
+                                <span className="text-blue-600 mt-0.5">→</span>
+                                <span className="text-gray-700">
+                                    {recommendation}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+})
+
+ChatInputAccessibility.displayName = 'ChatInputAccessibility'
+
+export default ChatInputAccessibility