added landmarks and semantic structure

2026-02-18 23:43:48 +02:00
parent a7759b5bc2
commit bb10a14a56
3 changed files with 26 additions and 23 deletions
@@ -313,7 +313,7 @@ export const Preview: React.FC<PreviewProps> = ({
    // Inject CSS directly as inline style tag
    const html = `
      <!DOCTYPE html>
-      <html>
+      <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -390,9 +390,9 @@ export const Preview: React.FC<PreviewProps> = ({

          <div className="flex flex-col sm:flex-row items-center gap-6">
            <FontList fonts={usedFonts} />
-            <div className="h-4 w-px bg-zinc-800 hidden sm:block" />
+            <div className="h-4 w-px bg-zinc-800 hidden sm:block" aria-hidden="true" />
            <ZoomControl zoom={uiZoom} onZoomChange={onZoomChange} />
-            <div className="h-4 w-px bg-zinc-800 hidden sm:block" />
+            <div className="h-4 w-px bg-zinc-800 hidden sm:block" aria-hidden="true" />
            <div className="flex items-center gap-4">
              <span className="text-zinc-400 text-sm hidden sm:inline">Format: {paperSize}</span>
              <motion.button