24 lines
3.1 KiB
XML
24 lines
3.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 550" role="img" aria-labelledby="title desc">
|
|
<title id="title">Контракт семантики и состояния интерактивной панели</title>
|
|
<desc id="desc">Пять блоков показывают имя и роль trigger, группу вариантов, единый источник визуального и заявленного состояния, кнопку сохранения и заявленный status. Внизу отмечены не наблюдаемые моделью границы.</desc>
|
|
<rect width="900" height="550" fill="#fbfcfe"/>
|
|
<text x="54" y="60" font-family="Arial, sans-serif" font-size="29" font-weight="700" fill="#102a43">Semantic contract не состоит из одного aria-атрибута</text>
|
|
<g font-family="Arial, sans-serif" font-size="18" fill="#102a43">
|
|
<rect x="55" y="125" width="235" height="128" rx="12" fill="#d9eafd" stroke="#1f5f99" stroke-width="3"/>
|
|
<text x="78" y="160" font-weight="700">Trigger</text><text x="78" y="190">name: «Настроить…»</text><text x="78" y="218">role: button</text>
|
|
<rect x="332" y="125" width="235" height="128" rx="12" fill="#e4f7ed" stroke="#197149" stroke-width="3"/>
|
|
<text x="355" y="160" font-weight="700">Выбор канала</text><text x="355" y="190">name: «Канал…»</text><text x="355" y="218">role: radiogroup</text>
|
|
<rect x="610" y="125" width="235" height="128" rx="12" fill="#fff4d6" stroke="#a05a00" stroke-width="3"/>
|
|
<text x="633" y="160" font-weight="700">Apply</text><text x="633" y="190">name: «Сохранить…»</text><text x="633" y="218">role: button</text>
|
|
</g>
|
|
<path d="M290 189H319M567 189H597" stroke="#486581" stroke-width="4" marker-end="url(#a)"/>
|
|
<rect x="185" y="315" width="250" height="105" rx="12" fill="#e9eef5" stroke="#486581" stroke-width="3"/>
|
|
<text x="210" y="353" font-family="Arial, sans-serif" font-size="19" font-weight="700" fill="#102a43">Один source of truth</text><text x="210" y="384" font-family="Arial, sans-serif" font-size="18" fill="#334e68">channel → visual + checked</text>
|
|
<rect x="505" y="315" width="250" height="105" rx="12" fill="#fce8e6" stroke="#b42318" stroke-width="3"/>
|
|
<text x="530" y="353" font-family="Arial, sans-serif" font-size="19" font-weight="700" fill="#8a1c16">Declared status</text><text x="530" y="384" font-family="Arial, sans-serif" font-size="18" fill="#8a1c16">save / undo result text</text>
|
|
<path d="M450 253V300H310" fill="none" stroke="#486581" stroke-width="4" marker-end="url(#a)"/><path d="M727 253V300H630" fill="none" stroke="#486581" stroke-width="4" marker-end="url(#a)"/>
|
|
<rect x="55" y="467" width="790" height="46" rx="8" fill="#e9eef5"/>
|
|
<text x="450" y="497" font-family="Arial, sans-serif" font-size="17" text-anchor="middle" fill="#334e68">За границей модели: DOM, computed accessibility tree и фактическая речь screen reader.</text>
|
|
<defs><marker id="a" markerWidth="11" markerHeight="11" refX="9" refY="4" orient="auto"><path d="M0,0 L10,4 L0,8 Z" fill="#486581"/></marker></defs>
|
|
</svg>
|