feat(a11y): Add meta tags, robots.txt, and enhance accessibility with aria-labels

Poulphunter · Poulphunter · commit f161ca8fa956 · 2025-10-20T00:45:58.000+02:00
Updated viewport meta tag to remove scale settings, added description meta tag, created robots.txt, and enhanced accessibility by adding aria-labels to buttons in App, ConversationList, Header, and Presets components for better localization and screen reader support.
diff --git a/index.html b/index.html
@@ -2,11 +2,12 @@
 <html lang="">
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="color-scheme" content="light dark" />
     <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
+      name="description"
+      content="LLaMA.cpp Web UI - Multilingual chat interface with conversation management, preset configurations, and experimental Python code execution. Built with React, TailwindCSS, and Vite for fast development."
     />
-    <meta name="color-scheme" content="light dark" />
     <link rel="icon" type="image/png" href="assets/favicon.png" />
     <title>llama.cpp - chat</title>
   </head>
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/src/App.tsx b/src/App.tsx
@@ -44,7 +44,12 @@ function AppLayout() {
       >
         <SettingDialog />
       </div>
-      <button type="button" id="dropdown-close-helper" className="h-0 w-0" />
+      <button
+        type="button"
+        aria-label="Close helper, not visible button"
+        id="dropdown-close-helper"
+        className="h-0 w-0"
+      />
     </div>
   );
 }
diff --git a/src/components/ConversationList.tsx b/src/components/ConversationList.tsx
@@ -286,7 +286,7 @@ export default function ConversationList() {
           dir="auto"
         >
           <span className="truncate">{conv.name}</span>
-          <button
+          <span
             className={'absolute tooltip tooltip-bottom z-100 top-0 right-0'}
             data-tip={t('ConversationList.deleteBtn')}
             aria-label={t('ConversationList.deleteBtn')}
@@ -301,7 +301,7 @@ export default function ConversationList() {
             <span className="btn">
               <BiX className="h-6 w-6" />
             </span>
-          </button>
+          </span>
         </button>
       ))}
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -29,6 +29,7 @@ export function HeaderThemeBlock({ id }: Readonly<{ id: string }>) {
   return (
     <div
       className="tooltip tooltip-bottom z-100"
+      aria-label={t('Header.tooltipTheme')}
       data-tip={t('Header.tooltipTheme')}
     >
       <div id={id} className="dropdown dropdown-end dropdown-bottom">
@@ -73,6 +74,7 @@ export function HeaderLanguageBlock({ id }: Readonly<{ id: string }>) {
   return (
     <div
       className="tooltip tooltip-bottom z-100"
+      aria-label={t('Header.tooltipLanguage')}
       data-tip={t('Header.tooltipLanguage')}
     >
       <div id={id} className="dropdown dropdown-end dropdown-bottom">
@@ -118,6 +120,7 @@ export default function Header() {
       <div className="flex items-center">
         <button
           className="hidden xl:block tooltip tooltip-bottom z-100"
+          aria-label={t('Header.tooltipSettings')}
           data-tip={t('Header.tooltipSettings')}
           onClick={() => {
             const elem = document.getElementById('settingBlock');
@@ -133,6 +136,7 @@ export default function Header() {
         </button>
         <button
           className="xl:hidden tooltip tooltip-bottom z-100"
+          aria-label={t('Header.tooltipSettings')}
           data-tip={t('Header.tooltipSettings')}
           onClick={() => {
             const elem = document.getElementById('settingBlock');
diff --git a/src/components/Presets.tsx b/src/components/Presets.tsx
@@ -91,6 +91,7 @@ export const PresetsButtonSave = () => {
   return (
     <button
       className="tooltip tooltip-top z-100"
+      aria-label={t('Settings.saveBtn')}
       data-tip={t('Settings.saveBtn')}
       onClick={() => {
         handleSave();
@@ -118,6 +119,7 @@ export const PresetsButtonResetConfig = () => {
   return (
     <button
       className="tooltip tooltip-top z-100"
+      aria-label={t('Settings.resetBtn')}
       data-tip={t('Settings.resetBtn')}
       onClick={() => {
         resetConfig();
@@ -213,6 +215,7 @@ export const Presets = () => {
       <div className="block sm:flex justify-end">
         <button
           className="tooltip tooltip-bottom z-100"
+          aria-label={t('Settings.deletePresetBtn')}
           data-tip={t('Settings.deletePresetBtn')}
           onClick={deletePresets}
           onKeyDown={deletePresets}
@@ -225,6 +228,7 @@ export const Presets = () => {
         </button>
         <button
           className="tooltip tooltip-bottom z-100"
+          aria-label={t('Settings.loadPresetBtn')}
           data-tip={t('Settings.loadPresetBtn')}
           onClick={() => {
             document?.getElementById('configJsonInput')?.click();
@@ -250,6 +254,7 @@ export const Presets = () => {
         </button>
         <button
           className="tooltip tooltip-bottom z-100"
+          aria-label={t('Settings.savePresetBtn')}
           data-tip={t('Settings.savePresetBtn')}
           onClick={downloadPresets}
           onKeyDown={downloadPresets}
diff --git a/src/components/SettingDialog.tsx b/src/components/SettingDialog.tsx
@@ -274,6 +274,7 @@ export default function SettingDialog() {
       <div className="flex flex-row items-center justify-between mt-4 absolute top-0 right-0 z-50">
         <button
           className="tooltip tooltip-bottom z-100"
+          aria-label={t('Settings.CloseBtn')}
           data-tip={t('Settings.CloseBtn')}
           onClick={() => {
             const elem = document.getElementById('settingBlock');
diff --git a/src/utils/app.context.tsx b/src/utils/app.context.tsx
@@ -402,9 +402,7 @@ export const AppContextProvider = ({
     };
     // send request
     const fetchResponse = await fetch(
-      import.meta.env.DEV
-        ? '/demo-conversation'
-        : `${BASE_URL}/v1/chat/completions`,
+      isDev ? '/demo-conversation' : `${BASE_URL}/v1/chat/completions`,
       {
         method: 'POST',
         headers: {

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,12 @@ function AppLayout() {`
`44`	`44`	`>`
`45`	`45`	`<SettingDialog />`
`46`	`46`	`</div>`
`47`		`- <button type="button" id="dropdown-close-helper" className="h-0 w-0" />`
	`47`	`+ <button`
	`48`	`+ type="button"`
	`49`	`+ aria-label="Close helper, not visible button"`
	`50`	`+ id="dropdown-close-helper"`
	`51`	`+ className="h-0 w-0"`
	`52`	`+ />`
`48`	`53`	`</div>`
`49`	`54`	`);`
`50`	`55`	`}`