ver4a/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

webui : improve accessibility for visually impaired people (#13551)

Browse source 
* webui : improve accessibility for visually impaired people

* add a11y for extra contents

* fix some labels being read twice

* add skip to main content
This commit is contained in:
Xuan-Son Nguyen 2025-05-16 21:49:01 +02:00 • committed by GitHub
parent 06c1e4abc1
commit aea9f8b4e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 147 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

34
tools/server/webui/src/components/ChatInputExtraContextItem.tsx
View file

@ -18,16 +18,26 @@ export default function ChatInputExtraContextItem({
if (!items) return null;
return (
<div className="flex flex-row gap-4 overflow-x-auto py-2 px-1 mb-1">
<div
className="flex flex-row gap-4 overflow-x-auto py-2 px-1 mb-1"
role="group"
aria-description="Selected files"
>
{items.map((item, i) => (
<div
className="indicator"
key={i}
onClick={() => clickToShow && setShow(i)}
tabIndex={0}
aria-description={
clickToShow ? `Click to show: ${item.name}` : undefined
}
role={clickToShow ? 'button' : 'menuitem'}
>
{removeItem && (
<div className="indicator-item indicator-top">
<button
aria-label="Remove file"
className="btn btn-neutral btn-sm w-4 h-4 p-0 rounded-full"
onClick={() => removeItem(i)}
>
@ -46,13 +56,16 @@ export default function ChatInputExtraContextItem({
<>
<img
src={item.base64Url}
alt={item.name}
alt={`Preview image for ${item.name}`}
className="w-14 h-14 object-cover rounded-md"
/>
</>
) : (
<>
<div className="w-14 h-14 flex items-center justify-center">
<div
className="w-14 h-14 flex items-center justify-center"
aria-description="Document icon"
>
<DocumentTextIcon className="h-8 w-14 text-base-content/50" />
</div>
@ -66,16 +79,25 @@ export default function ChatInputExtraContextItem({
))}
{showingItem && (
<dialog className="modal modal-open">
<dialog
className="modal modal-open"
aria-description={`Preview ${showingItem.name}`}
>
<div className="modal-box">
<div className="flex justify-between items-center mb-4">
<b>{showingItem.name ?? 'Extra content'}</b>
<button className="btn btn-ghost btn-sm">
<button
className="btn btn-ghost btn-sm"
aria-label="Close preview dialog"
>
<XMarkIcon className="h-5 w-5" onClick={() => setShow(-1)} />
</button>
</div>
{showingItem.type === 'imageFile' ? (
<img src={showingItem.base64Url} alt={showingItem.name} />
<img
src={showingItem.base64Url}
alt={`Preview image for ${showingItem.name}`}
/>
) : (
<div className="overflow-x-auto">
<pre className="whitespace-pre-wrap break-words text-sm">