ENG-8741: Web improvements

assets/fonts.css

@@ -0,0 +1,18 @@
+@font-face {
+	font-family: 'Instrument Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-stretch: 100%;
+	font-display: swap;
+	src: local('Instrument Sans'),
+		url("/fonts/instrument-sans.woff2") format("woff2");
+}
+
+@font-face {
+	font-family: 'JetBrains Mono';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: local('JetBrains Mono'),
+		url("/fonts/jetbrains-mono.woff2") format("woff2");
+}

pcweb/components/docpage/navbar/buttons/discord.py

@@ -9,10 +9,11 @@ def discord() -> rx.Component:
     return ui.link(
         render_=ui.button(
             get_icon(icon="discord_navbar", class_name="shrink-0 text-secondary-11"),
-            custom_attrs={"aria-label": "Discord link"},
+            custom_attrs={"aria-label": "Join Reflex Discord community"},
             size="icon-sm",
             variant="outline",
             class_name="text-secondary-11",
         ),
         to=DISCORD_URL,
+        custom_attrs={"aria-label": "Join Reflex Discord community"},
     )

pcweb/components/docpage/navbar/buttons/github.py

@@ -10,10 +10,15 @@ def github() -> rx.Component:
         render_=ui.button(
             get_icon(icon="github_navbar", class_name="shrink-0 text-secondary-11"),
             f"{GITHUB_STARS // 1000}K",
-            custom_attrs={"aria-label": "Github link"},
+            custom_attrs={
+                "aria-label": f"View Reflex on GitHub - {GITHUB_STARS // 1000}K stars"
+            },
             size="sm",
             variant="outline",
             class_name="text-secondary-11",
         ),
         to=GITHUB_URL,
+        custom_attrs={
+            "aria-label": f"View Reflex on GitHub - {GITHUB_STARS // 1000}K stars"
+        },
     )

pcweb/components/docpage/navbar/buttons/sidebar.py

@@ -16,12 +16,18 @@ def social_menu_item(
     url="/",
     border: bool = False,
 ) -> rx.Component:
+    aria_labels = {
+        "github": "Visit Reflex on GitHub",
+        "twitter": "Follow Reflex on X",
+        "discord": "Join Reflex Discord community",
+    }
     return rx.link(
         get_icon(icon=icon, class_name="!text-slate-9"),
         class_name="flex justify-center items-center gap-2 hover:bg-slate-3 px-4 py-[0.875rem] w-full h-[47px] transition-bg overflow-hidden"
         + (" border-slate-4 border-x border-solid border-y-0" if border else ""),
         href=url,
         is_external=True,
+        custom_attrs={"aria-label": aria_labels.get(icon, f"Visit {icon}")},
     )
 
 
@@ -90,6 +96,7 @@ def navbar_sidebar_drawer(trigger) -> rx.Component:
                         ),
                         on_click=toggle_color_mode,
                         class_name="flex flex-row justify-center items-center px-3 py-0.5 w-full h-[47px]",
+                        custom_attrs={"aria-label": "Toggle color mode"},
                     ),
                     class_name="flex flex-col items-center bg-slate-1 w-full h-full",
                 ),

pcweb/components/docpage/navbar/navbar.py

@@ -678,15 +678,14 @@ def new_component_section() -> rx.Component:
                     class_name="flex flex-row gap-x-0 items-center",
                     unstyled=True,
                 ),
+                custom_attrs={"role": "menuitem"},
             ),
-            ui.navigation_menu.list(
-                ui.navigation_menu.item(
-                    new_menu_trigger("Product", active_str="products"),
-                    products_section(),
-                    class_name="cursor-pointer",
-                    unstyled=True,
-                ),
-                class_name="xl:flex hidden flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
+            ui.navigation_menu.item(
+                new_menu_trigger("Product", active_str="products"),
+                products_section(),
+                class_name="cursor-pointer",
+                unstyled=True,
+                custom_attrs={"role": "menuitem"},
             ),
             ui.navigation_menu.item(
                 new_menu_trigger("Docs"),
@@ -700,38 +699,43 @@ def new_component_section() -> rx.Component:
                 ),
                 class_name="cursor-pointer",
                 unstyled=True,
+                custom_attrs={"role": "menuitem"},
             ),
             ui.navigation_menu.item(
                 new_menu_trigger("Resources"),
                 new_resource_section(),
                 class_name="cursor-pointer",
                 unstyled=True,
+                custom_attrs={"role": "menuitem"},
             ),
             ui.navigation_menu.item(
                 new_menu_trigger("Solutions", active_str="use-cases"),
                 solutions_section(),
                 class_name="cursor-pointer",
                 unstyled=True,
+                custom_attrs={"role": "menuitem"},
             ),
             ui.navigation_menu.item(
-                ui.navigation_menu.item(
-                    render_=link_item(
-                        "Pricing",
-                        "/pricing",
-                        "pricing",
-                    ),
-                    unstyled=True,
+                link_item(
+                    "Pricing",
+                    "/pricing",
+                    "pricing",
                 ),
-                class_name="xl:flex hidden",
+                class_name="cursor-pointer",
+                custom_attrs={"role": "menuitem"},
                 unstyled=True,
             ),
             class_name="flex flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
             custom_attrs={"role": "menubar"},
         ),
         ui.navigation_menu.list(
-            ui.navigation_menu.item(search_bar()),
-            ui.navigation_menu.item(github()),
-            ui.navigation_menu.item(discord(), class_name="xl:flex hidden"),
+            ui.navigation_menu.item(search_bar(), custom_attrs={"role": "menuitem"}),
+            ui.navigation_menu.item(github(), custom_attrs={"role": "menuitem"}),
+            ui.navigation_menu.item(
+                discord(),
+                class_name="xl:flex hidden",
+                custom_attrs={"role": "menuitem"},
+            ),
             ui.navigation_menu.item(
                 rx.link(
                     ui.button(
@@ -745,6 +749,7 @@ def new_component_section() -> rx.Component:
                     href=f"{REFLEX_CLOUD_URL.strip('/')}/?redirect_url={REFLEX_BUILD_URL}",
                 ),
                 class_name="desktop-only",
+                custom_attrs={"role": "menuitem"},
             ),
             ui.navigation_menu.item(
                 demo_form_dialog(
@@ -757,11 +762,13 @@ def new_component_section() -> rx.Component:
                 ),
                 unstyled=True,
                 class_name="xl:flex hidden",
+                custom_attrs={"role": "menuitem"},
             ),
             ui.navigation_menu.item(
                 navbar_sidebar_button(),
                 class_name="xl:hidden flex",
                 unstyled=True,
+                custom_attrs={"role": "menuitem"},
             ),
             class_name="flex flex-row gap-2 m-0 h-full list-none items-center",
             custom_attrs={"role": "menubar"},

pcweb/components/docpage/sidebar/sidebar.py

@@ -332,6 +332,7 @@ def sidebar_category(name: str, url: str, icon: str, index: int):
                 to=url,
                 on_click=rx.prevent_default,
                 class_name="inset-0 absolute z-[-1]",
+                aria_label=f"Navigate to {name}",
             ),
             class_name="w-full text-slate-9 hover:!text-slate-9 relative",
             on_click=[SidebarState.set_sidebar_index(index), rx.redirect(url)],
@@ -353,7 +354,7 @@ def create_sidebar_section(
     index = index.to(list)
     return rx.el.li(
         rx.link(
-            rx.el.h5(
+            rx.el.h2(
                 section_title,
                 class_name="font-smbold text-[0.875rem] text-slate-12 hover:text-violet-9 leading-5 tracking-[-0.01313rem] transition-color",
             ),

pcweb/pages/landing/views/app_build.py

@@ -85,7 +85,7 @@ def user_profile():
     return rx.el.div(
         rx.el.div(
             rx.image(
-                src="/landing/app_build/user.webp",
+                src="/landing/app_build/user.avif",
                 loading="lazy",
                 alt="User profile image",
                 class_name="object-cover pointer-events-none",
@@ -316,14 +316,14 @@ def graph_overview():
                     rx.el.div(
                         rx.el.span(class_name="size-4 rounded-sm bg-violet-8"),
                         "Peak Performance",
-                        class_name="flex flex-row items-center gap-2 text-xs font-medium text-slate-10",
+                        class_name="flex flex-row items-center gap-2 text-xs font-medium text-secondary-11",
                     ),
                     rx.el.div(
                         rx.el.span(
                             class_name="size-4 rounded-sm bg-violet-4 dark:bg-[#151618]"
                         ),
                         "Capacity Per Day",
-                        class_name="flex flex-row items-center gap-2 text-xs font-medium text-slate-10",
+                        class_name="flex flex-row items-center gap-2 text-xs font-medium text-secondary-11",
                     ),
                     class_name="flex flex-row items-center gap-4",
                 ),
@@ -333,7 +333,7 @@ def graph_overview():
                 "24 June ",
                 rx.el.span(" - ", class_name="text-slate-8 ml-0.5"),
                 " Today",
-                class_name="text-slate-10 dark:text-secondary-11 text-sm font-medium rounded-lg px-3.5 h-8 border border-slate-4 dark:border-[#1C2024] bg-white-1 flex items-center",
+                class_name="text-secondary-11 text-sm font-medium rounded-lg px-3.5 h-8 border border-slate-4 dark:border-[#1C2024] bg-white-1 flex items-center",
             ),
             class_name="flex flex-row justify-between items-baseline w-full",
         ),

pcweb/pages/landing/views/hero.py

@@ -291,7 +291,7 @@ def prompt_box() -> rx.Component:
                     type="button",
                     variant="ghost",
                     on_click=show_default_prompt.set_value(False),
-                    class_name="rounded-[10px] font-semibold text-slate-10 dark:text-secondary-11",
+                    class_name="rounded-[10px] font-semibold text-secondary-11",
                 ),
                 on_drop=SubmitPromptState.handle_upload(
                     rx.upload_files(
@@ -310,7 +310,6 @@ def prompt_box() -> rx.Component:
                 max_size=MAX_FILE_SIZE_BYTES,
                 multiple=True,
                 id="upload-image-button",
-                aria_label="Upload images",
             ),
             ui.button(
                 "Build with AI",
@@ -331,6 +330,14 @@ def prompt_box() -> rx.Component:
             if (window.innerWidth < 1024) {{
                 {show_default_prompt.set}(false);
             }}
+            const uploadContainer = document.getElementById('upload-image-button');
+            if (uploadContainer) {{
+                const fileInput = uploadContainer.querySelector('input[type="file"]');
+                if (fileInput) {{
+                    fileInput.setAttribute('aria-label', 'Upload images for AI builder');
+                    fileInput.setAttribute('title', 'Upload images');
+                }}
+            }}
         """
         ),
         on_submit=SubmitPromptState.redirect_to_ai_builder,

pcweb/pcweb.py

@@ -35,17 +35,18 @@
     + favicons_links()
     + [
         rx.el.link(
-            rel="preconnect",
-            href="https://fonts.googleapis.com",
+            rel="preload",
+            href="/fonts/instrument-sans.woff2",
+            custom_attrs={"as": "font"},
+            type="font/woff2",
+            cross_origin="anonymous",
         ),
         rx.el.link(
-            rel="preconnect",
-            href="https://fonts.gstatic.com",
-            cross_origin="",
-        ),
-        rx.el.link(
-            href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap",
-            rel="stylesheet",
+            rel="preload",
+            href="/fonts/jetbrains-mono.woff2",
+            custom_attrs={"as": "font"},
+            type="font/woff2",
+            cross_origin="anonymous",
         ),
     ],
 )

pcweb/styles/styles.py

@@ -66,6 +66,7 @@ def get_code_style_rdx(color: str):
 
 # Fonts to include.
 STYLESHEETS = [
+    "fonts.css",
     "custom-colors.css",
     "tailwind-theme.css",
 ]

pcweb/templates/docpage/docpage.py

@@ -242,6 +242,7 @@ def feedback_button() -> rx.Component:
                     class_name="w-full gap-2 border-r-0 px-3 py-0.5 rounded-[20px_0_0_20px]"
                     + thumb_cn,
                 ),
+                aria_label="Yes",
                 on_click=FeedbackState.set_score(1),
             ),
             rx.popover.trigger(
@@ -253,6 +254,7 @@ def feedback_button() -> rx.Component:
                     class_name="w-full gap-2 px-3 py-0.5 rounded-[0_20px_20px_0]"
                     + thumb_cn,
                 ),
+                aria_label="No",
                 on_click=FeedbackState.set_score(0),
             ),
             class_name="w-full lg:w-auto items-center flex flex-row",

pcweb/views/footer.py

@@ -48,6 +48,7 @@ def social_menu_item(icon: str, url: str = "/", class_name: str = "") -> rx.Comp
         + class_name,
         href=url,
         is_external=True,
+        aria_label=f"Social link for {icon}",
     )