frontend/aria: page in general, lighthouse accessibility testing, ...

Author: haraldschilly

src/dev/ARIA.md

@@ -234,7 +234,13 @@ const Avatar0: React.FC<Props> = (props) => {
 
   function render_inside() {
     if (image) {
-      return <img style={{ borderRadius: "50%", width: "100%" }} src={image} />;
+      return (
+        <img
+          alt={`User ${get_name()}`}
+          style={{ borderRadius: "50%", width: "100%" }}
+          src={image}
+        />
+      );
     } else {
       return render_letter();
     }

src/packages/frontend/account/avatar/avatar.tsx

@@ -52,7 +52,7 @@ export function useShowI18NBanner() {
   const i18n = other_settings?.get(OTHER_SETTINGS_LOCALE_KEY);
 
   return useMemo(() => {
-    // we show the banner, if the default locale is set and the browser langauge is not english
+    // we show the banner, if the default locale is set and the browser language is not english
     // user's can dismiss this, which sets the locale to "en-keep".
     if (i18n === DEFAULT_LOCALE) {
       if (!navigator.language.toLowerCase().startsWith("en")) {

src/packages/frontend/app/i18n-banner.tsx

@@ -53,6 +53,11 @@ export function Localize({ children }: { children: React.ReactNode }) {
     setAntdLoc(await loadAntdLocale(locale));
   }, [locale]);
 
+  // Update HTML lang attribute for screen readers (WCAG AA)
+  useAsyncEffect(async () => {
+    document.documentElement.lang = locale;
+  }, [locale]);
+
   function renderApp() {
     // NOTE: the locale will be set from the other_settings, on the "page".
     // So, for the default (english) we always have to render it, and then, maybe, a locale is set...

src/packages/frontend/app/localize.tsx

@@ -28,14 +28,15 @@ export const AppLogo: React.FC<Props> = React.memo((props: Props) => {
 
   const logo_square: string | undefined = useTypedRedux(
     "customize",
-    "logo_square"
+    "logo_square",
   );
 
   const backgroundImage = `url('${logo_square ? logo_square : APP_ICON}')`;
 
   return (
     <A
       href={appBasePath}
+      aria-label="CoCalc homepage"
       style={{
         height: dimension,
         width: dimension,

src/packages/frontend/app/logo.tsx

@@ -230,6 +230,7 @@ export const Page: React.FC = () => {
           icon={"users"}
           active_top_tab={active_top_tab}
           hide_label={!show_label}
+          aria-label="Admin"
         />
       );
     }

src/packages/frontend/app/page.tsx

@@ -40,3 +40,31 @@ export function set_window_title(title?: string): void {
     document.title = site_name;
   }
 }
+
+// Set the meta description tag dynamically (WCAG AA)
+export function set_meta_description(): void {
+  const customize = redux.getStore("customize");
+  const site_name = customize.get("site_name");
+  const site_description = customize.get("site_description");
+
+  let description = "";
+  if (site_name && site_description) {
+    description = `${site_name}: ${site_description}`;
+  } else if (site_name) {
+    description = site_name;
+  } else if (site_description) {
+    description = site_description;
+  }
+
+  if (description.length > 0) {
+    let metaTag = document.querySelector(
+      'meta[name="description"]',
+    ) as HTMLMetaElement | null;
+    if (metaTag == null) {
+      metaTag = document.createElement("meta");
+      metaTag.name = "description";
+      document.head.appendChild(metaTag);
+    }
+    metaTag.content = description;
+  }
+}

src/packages/frontend/browser.ts

@@ -20,6 +20,7 @@ interface AProps {
   style?: CSSProperties;
   onClick?: (any) => void;
   onMouseDown?: (any) => void;
+  "aria-label"?: string;
 }
 
 export function A({
@@ -30,6 +31,7 @@ export function A({
   placement,
   onClick,
   onMouseDown,
+  "aria-label": ariaLabel,
 }: AProps) {
   if (title) {
     // use nicer antd tooltip.
@@ -40,6 +42,7 @@ export function A({
           target={"_blank"}
           rel={"noopener"}
           style={style}
+          aria-label={ariaLabel}
           onClick={onClick}
           onMouseDown={onMouseDown}
         >
@@ -55,6 +58,7 @@ export function A({
       rel={"noopener"}
       style={style}
       title={title}
+      aria-label={ariaLabel}
       onClick={onClick}
       onMouseDown={onMouseDown}
     >

src/packages/frontend/components/A.tsx

@@ -45,9 +45,10 @@ export function LanguageModelVendorAvatar(
     return fallback();
   }
 
-  function renderImgIcon(icon: string) {
+  function renderImgIcon(icon: string, vendorName: string) {
     return (
       <img
+        alt={`${vendorName} language model`}
         width={size}
         height={size}
         src={icon}
@@ -69,7 +70,7 @@ export function LanguageModelVendorAvatar(
           "icon",
         ]);
         if (useIcon && typeof icon === "string") {
-          return renderImgIcon(icon);
+          return renderImgIcon(icon, vendorName);
         } else {
           return <OpenAIAvatar size={size} style={style} />;
         }
@@ -92,7 +93,7 @@ export function LanguageModelVendorAvatar(
       case "ollama": {
         const icon = ollama?.getIn([fromOllamaModel(model), "icon"]);
         if (useIcon && typeof icon === "string") {
-          return renderImgIcon(icon);
+          return renderImgIcon(icon, vendorName);
         } else {
           return <OllamaAvatar size={size} style={style} />;
         }

src/packages/frontend/components/language-model-icon.tsx

@@ -112,7 +112,7 @@ export function SortableTabs(props: Props) {
   }, [resize.width, items.length, divRef.current, isOver]);
 
   return (
-    <div style={{ width: "100%", ...style }} ref={divRef}>
+    <div role="tablist" style={{ width: "100%", ...style }} ref={divRef}>
       <ItemContext.Provider value={{ width: itemWidth }}>
         <DndContext
           onDragStart={onDragStart}