b147d16798
- Заполнены заглушки: user-friendly-messages, health, aria, keyboard - backend: core/auth.py, /api/v1/stats; cached-api → backend-client при USE_MOCK_DATA=false - .env.example, middleware auth (skip при USE_MOCK_DATA), убраны неиспользуемые deps - Страницы: airworthiness, maintenance, defects, modifications; AircraftAddModal, Sidebar - Главная страница: REFLY — Контроль лётной годности (вместо Numerology App) - Линт/скрипты: eslintrc, security, cleanup, logs, api inbox/knowledge Co-authored-by: Cursor <cursoragent@cursor.com>
103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
/**
|
||
* Страница для тестирования доступности (упрощённая)
|
||
*/
|
||
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import Sidebar from '@/components/Sidebar';
|
||
import { getWCAGLevel } from '@/lib/accessibility/colors';
|
||
|
||
export default function AccessibilityTestPage() {
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
const [contrastResult, setContrastResult] = useState<any>(null);
|
||
|
||
const testContrast = () => {
|
||
const result = getWCAGLevel('#1e3a5f', '#ffffff', false);
|
||
setContrastResult(result);
|
||
};
|
||
|
||
return (
|
||
<div style={{ display: 'flex', minHeight: '100vh' }}>
|
||
<Sidebar />
|
||
<div style={{ marginLeft: '280px', flex: 1, padding: '32px' }}>
|
||
<h1 style={{ fontSize: '32px', fontWeight: 'bold', marginBottom: '24px' }}>
|
||
Тестирование доступности
|
||
</h1>
|
||
|
||
<section aria-labelledby="keyboard-nav-heading" style={{ marginBottom: '32px' }}>
|
||
<h2 id="keyboard-nav-heading" style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
|
||
Навигация с клавиатуры
|
||
</h2>
|
||
<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
|
||
<button
|
||
onClick={() => alert('Кнопка 1')}
|
||
style={{ padding: '10px 20px', backgroundColor: '#1e3a5f', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
||
>
|
||
Кнопка 1
|
||
</button>
|
||
<button
|
||
onClick={() => setIsModalOpen(true)}
|
||
style={{ padding: '10px 20px', backgroundColor: '#2196f3', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
|
||
>
|
||
Открыть модальное окно
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section aria-labelledby="contrast-heading" style={{ marginBottom: '32px' }}>
|
||
<h2 id="contrast-heading" style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
|
||
Проверка контраста цветов
|
||
</h2>
|
||
<button
|
||
onClick={testContrast}
|
||
style={{
|
||
padding: '10px 20px',
|
||
backgroundColor: '#1e3a5f',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
Проверить контраст
|
||
</button>
|
||
{contrastResult && (
|
||
<div style={{ marginTop: '16px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
|
||
<p>Контраст: {contrastResult.ratio.toFixed(2)}:1</p>
|
||
<p>WCAG AA: {contrastResult.aa ? '✅' : '❌'}</p>
|
||
<p>WCAG AAA: {contrastResult.aaa ? '✅' : '❌'}</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
{isModalOpen && (
|
||
<div
|
||
style={{
|
||
position: 'fixed',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 1000,
|
||
}}
|
||
onClick={() => setIsModalOpen(false)}
|
||
>
|
||
<div
|
||
style={{ backgroundColor: 'white', padding: '24px', borderRadius: '8px', maxWidth: '400px' }}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<h3>Тестовое модальное окно</h3>
|
||
<p>Нажмите Escape или кликните вне окна для закрытия.</p>
|
||
<button onClick={() => setIsModalOpen(false)}>Закрыть</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|