This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new cc01b42cfa0 [feature](website) refine homepage and profile analysis UI
(#4056)
cc01b42cfa0 is described below
commit cc01b42cfa09eaad0be8c4747c16271cf8730ee7
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Wed Aug 12 18:19:27 2026 +0800
[feature](website) refine homepage and profile analysis UI (#4056)
## What
- Add a compact rotating news ticker below the homepage hero for Profile
Analysis, Doris 101, and the community roadmap.
- Randomize the first ticker item, advance upward every three seconds,
and pause on hover or keyboard focus.
- Refine the Profile Analysis header and panel layout, including a Doris
Skills attribution link and responsive styling.
- Update desktop and mobile language-selector icons with semantic
coloring and accessible labeling.
- Respect reduced-motion preferences and keep the updated layouts
responsive across desktop and mobile themes.
## Validation
- `node --test src/components/profile-analysis/*.test.js
src/components/home-next/*.logic.test.js` (91 tests passed)
- `git diff --check upstream-apache/master...HEAD`
- `yarn start` with desktop and mobile browser verification
## Scope
- The PR branch matches the complete tracked-file state of
`fix-20260812`.
- No routes, sidebars, documentation versions, or localized
documentation paths are changed.
---------
Co-authored-by: morningman <[email protected]>
---
src/components/home-next/HomeNext.tsx | 2 +
src/components/home-next/NewsTicker.logic.d.ts | 3 +
src/components/home-next/NewsTicker.logic.js | 22 +++
src/components/home-next/NewsTicker.logic.test.js | 27 +++
src/components/home-next/NewsTicker.scss | 189 +++++++++++++++++++++
src/components/home-next/NewsTicker.tsx | 162 ++++++++++++++++++
src/components/profile-analysis/AiAnalysisForm.tsx | 14 +-
.../profile-analysis/ProfileAnalysis.scss | 55 +++++-
.../profile-analysis/ProfileAnalyzer.tsx | 5 -
.../profile-analysis.components.test.js | 3 +-
src/theme/DocItem/Layout/MobileSidebarDrawer.tsx | 6 +-
.../NavbarItem/LocaleDropdownNavbarItem/index.tsx | 14 +-
12 files changed, 476 insertions(+), 26 deletions(-)
diff --git a/src/components/home-next/HomeNext.tsx
b/src/components/home-next/HomeNext.tsx
index 6cfee20ae69..0702016d42a 100644
--- a/src/components/home-next/HomeNext.tsx
+++ b/src/components/home-next/HomeNext.tsx
@@ -7,6 +7,7 @@ import { EcosystemSection } from './sections/EcosystemSection';
import { DeploymentSection } from './sections/DeploymentSection';
import { CommunitySection } from './sections/CommunitySection';
import { StatsSection } from './sections/StatsSection';
+import { NewsTicker } from './NewsTicker';
import './HomeNext.scss';
export default function HomeNext(): JSX.Element {
@@ -16,6 +17,7 @@ export default function HomeNext(): JSX.Element {
description="Apache Doris is an open-source, real-time analytics
database built on MPP architecture. Run OLAP queries, lakehouse analytics, and
hybrid search at petabyte scale on a single engine."
>
<HeroSection />
+ <NewsTicker />
<UseCasesSection />
<StatsSection />
<FeaturesSection />
diff --git a/src/components/home-next/NewsTicker.logic.d.ts
b/src/components/home-next/NewsTicker.logic.d.ts
new file mode 100644
index 00000000000..01d6fc42043
--- /dev/null
+++ b/src/components/home-next/NewsTicker.logic.d.ts
@@ -0,0 +1,3 @@
+export function getRandomStartIndex(itemCount: number, randomValue?: number):
number;
+
+export function rotateItems<T>(items: readonly T[], startIndex: number): T[];
diff --git a/src/components/home-next/NewsTicker.logic.js
b/src/components/home-next/NewsTicker.logic.js
new file mode 100644
index 00000000000..adb6c37ce32
--- /dev/null
+++ b/src/components/home-next/NewsTicker.logic.js
@@ -0,0 +1,22 @@
+function getRandomStartIndex(itemCount, randomValue = Math.random()) {
+ if (!Number.isInteger(itemCount) || itemCount <= 0) {
+ return 0;
+ }
+
+ const normalizedRandom = Math.min(Math.max(randomValue, 0), 1 -
Number.EPSILON);
+ return Math.floor(normalizedRandom * itemCount);
+}
+
+function rotateItems(items, startIndex) {
+ if (items.length === 0) {
+ return [];
+ }
+
+ const normalizedStart = ((startIndex % items.length) + items.length) %
items.length;
+ return [...items.slice(normalizedStart), ...items.slice(0,
normalizedStart)];
+}
+
+module.exports = {
+ getRandomStartIndex,
+ rotateItems,
+};
diff --git a/src/components/home-next/NewsTicker.logic.test.js
b/src/components/home-next/NewsTicker.logic.test.js
new file mode 100644
index 00000000000..bd4c48bd3a6
--- /dev/null
+++ b/src/components/home-next/NewsTicker.logic.test.js
@@ -0,0 +1,27 @@
+const assert = require('node:assert/strict');
+const test = require('node:test');
+
+const { getRandomStartIndex, rotateItems } = require('./NewsTicker.logic');
+
+test('maps random values to a valid starting announcement', () => {
+ assert.equal(getRandomStartIndex(3, 0), 0);
+ assert.equal(getRandomStartIndex(3, 0.34), 1);
+ assert.equal(getRandomStartIndex(3, 0.99), 2);
+});
+
+test('keeps the random index inside the available range', () => {
+ assert.equal(getRandomStartIndex(3, -1), 0);
+ assert.equal(getRandomStartIndex(3, 1), 2);
+ assert.equal(getRandomStartIndex(0, 0.5), 0);
+});
+
+test('rotates announcements while preserving their circular order', () => {
+ assert.deepEqual(rotateItems(['profile', 'course', 'roadmap'], 1),
['course', 'roadmap', 'profile']);
+ assert.deepEqual(rotateItems(['profile', 'course', 'roadmap'], 2),
['roadmap', 'profile', 'course']);
+});
+
+test('normalizes out-of-range rotation indexes', () => {
+ assert.deepEqual(rotateItems(['a', 'b', 'c'], 4), ['b', 'c', 'a']);
+ assert.deepEqual(rotateItems(['a', 'b', 'c'], -1), ['c', 'a', 'b']);
+ assert.deepEqual(rotateItems([], 2), []);
+});
diff --git a/src/components/home-next/NewsTicker.scss
b/src/components/home-next/NewsTicker.scss
new file mode 100644
index 00000000000..47f08e3456c
--- /dev/null
+++ b/src/components/home-next/NewsTicker.scss
@@ -0,0 +1,189 @@
+@use '../shared/typography' as type;
+
+.homepage-news-ticker {
+ --hnt-row-height: 60px;
+
+ position: relative;
+ z-index: 5;
+ height: var(--hnt-row-height);
+ overflow: hidden;
+ background: var(--brand-primary-darker);
+ color: var(--brand-cream-light);
+ border-top: 1px solid rgb(var(--brand-primary-glow-rgb) / 18%);
+ border-bottom: 1px solid rgb(var(--brand-accent-rgb) / 22%);
+ font-family: var(--font-mono);
+
+ &__inner {
+ height: 100%;
+ display: grid;
+ grid-template-columns: 98px minmax(0, 1fr) 56px;
+ align-items: center;
+ gap: 20px;
+ }
+
+ &__prompt {
+ @include type.micro-label;
+ color: var(--brand-accent);
+ white-space: nowrap;
+
+ &::before {
+ content: '> ';
+ color: var(--brand-primary-glow);
+ }
+ }
+
+ &__viewport {
+ min-width: 0;
+ height: var(--hnt-row-height);
+ overflow: hidden;
+ }
+
+ &__track {
+ height: var(--hnt-row-height);
+ will-change: transform;
+
+ &--animated {
+ transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
+ }
+ }
+
+ &__item {
+ height: var(--hnt-row-height);
+ min-width: 0;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 24px;
+ color: var(--brand-cream-light);
+ text-decoration: none;
+
+ &:hover {
+ color: var(--brand-cream-light);
+ text-decoration: none;
+
+ .homepage-news-ticker__action {
+ color: var(--brand-cream-light);
+ }
+ }
+
+ &:focus-visible {
+ color: var(--brand-cream-light);
+ outline: 2px solid var(--brand-accent);
+ outline-offset: -4px;
+ text-decoration: none;
+ }
+ }
+
+ &__message {
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ &__tag {
+ flex: none;
+ @include type.mono-text(12px, 700, 1.2, 0.01em, uppercase);
+ color: var(--brand-accent);
+ }
+
+ &__copy {
+ min-width: 0;
+ overflow: hidden;
+ color: var(--brand-cream-light);
+ font-family: var(--font-mono);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.35;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &__action {
+ flex: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ @include type.micro-label;
+ color: var(--brand-accent);
+ transition: color 160ms ease;
+ white-space: nowrap;
+ }
+
+ &__sequence {
+ @include type.mono-text(10px, 700, 1.2, 0.08em, uppercase);
+ color: var(--brand-primary-glow);
+ text-align: right;
+ white-space: nowrap;
+ }
+
+ &--paused &__sequence {
+ color: var(--brand-accent);
+ }
+}
+
+@media (max-width: 820px) {
+ .homepage-news-ticker {
+ &__inner {
+ grid-template-columns: 28px minmax(0, 1fr) 44px;
+ gap: 12px;
+ }
+
+ &__prompt {
+ overflow: hidden;
+ font-size: 0;
+
+ &::before {
+ font-size: 13px;
+ }
+ }
+
+ &__item {
+ gap: 12px;
+ }
+
+ &__copy {
+ font-size: 13px;
+ }
+
+ &__action-label {
+ display: none;
+ }
+ }
+}
+
+@media (max-width: 480px) {
+ .homepage-news-ticker {
+ &__inner {
+ grid-template-columns: 14px minmax(0, 1fr) 36px;
+ gap: 8px;
+ }
+
+ &__message {
+ gap: 7px;
+ }
+
+ &__tag {
+ font-size: 11px;
+ }
+
+ &__action {
+ font-size: 12px;
+ }
+
+ &__sequence {
+ font-size: 9px;
+ letter-spacing: 0.02em;
+ }
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .homepage-news-ticker__track {
+ transition: none !important;
+ }
+
+ .homepage-news-ticker__action {
+ transition: none;
+ }
+}
diff --git a/src/components/home-next/NewsTicker.tsx
b/src/components/home-next/NewsTicker.tsx
new file mode 100644
index 00000000000..3537200c460
--- /dev/null
+++ b/src/components/home-next/NewsTicker.tsx
@@ -0,0 +1,162 @@
+import React, { CSSProperties, FocusEvent, JSX, TransitionEvent, useEffect,
useRef, useState } from 'react';
+import Link from '@docusaurus/Link';
+import { getRandomStartIndex, rotateItems } from './NewsTicker.logic';
+import './NewsTicker.scss';
+
+interface NewsAnnouncement {
+ tag: string;
+ text: string;
+ action: string;
+ href: string;
+}
+
+const ANNOUNCEMENTS: readonly NewsAnnouncement[] = [
+ {
+ tag: 'PROFILE',
+ text: 'Diagnose slow queries with the new Apache Doris Profile
Analysis workspace.',
+ action: 'Open',
+ href: '/profile-analysis',
+ },
+ {
+ tag: 'COURSE',
+ text: 'Learn the fundamentals with the new, free Apache Doris 101
course.',
+ action: 'Start',
+ href: '/course',
+ },
+ {
+ tag: 'ROADMAP',
+ text: 'See what we’re building next on the Apache Doris community
roadmap.',
+ action: 'Explore',
+ href: '/community/roadmap',
+ },
+];
+
+const AUTO_ADVANCE_MS = 3000;
+
+export function NewsTicker(): JSX.Element {
+ const [orderedAnnouncements, setOrderedAnnouncements] =
useState<NewsAnnouncement[]>(() => [...ANNOUNCEMENTS]);
+ const [position, setPosition] = useState(0);
+ const [isMotionReady, setIsMotionReady] = useState(false);
+ const [isInteractionPaused, setIsInteractionPaused] = useState(false);
+ const [isDocumentHidden, setIsDocumentHidden] = useState(false);
+ const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+ const resetAnimationFrame = useRef<number | undefined>(undefined);
+
+ useEffect(() => {
+ const motionQuery = window.matchMedia('(prefers-reduced-motion:
reduce)');
+ const syncMotionPreference = () =>
setPrefersReducedMotion(motionQuery.matches);
+
+ setOrderedAnnouncements(rotateItems(ANNOUNCEMENTS,
getRandomStartIndex(ANNOUNCEMENTS.length)));
+ syncMotionPreference();
+ resetAnimationFrame.current = window.requestAnimationFrame(() =>
setIsMotionReady(true));
+
+ motionQuery.addEventListener('change', syncMotionPreference);
+ return () => {
+ motionQuery.removeEventListener('change', syncMotionPreference);
+ if (resetAnimationFrame.current !== undefined) {
+ window.cancelAnimationFrame(resetAnimationFrame.current);
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ const handleVisibilityChange = () =>
setIsDocumentHidden(document.hidden);
+ document.addEventListener('visibilitychange', handleVisibilityChange);
+ return () => document.removeEventListener('visibilitychange',
handleVisibilityChange);
+ }, []);
+
+ useEffect(() => {
+ if (!isMotionReady || isInteractionPaused || isDocumentHidden ||
prefersReducedMotion) {
+ return undefined;
+ }
+
+ const timer = window.setInterval(() => {
+ setPosition(current => current + 1);
+ }, AUTO_ADVANCE_MS);
+
+ return () => window.clearInterval(timer);
+ }, [isDocumentHidden, isInteractionPaused, isMotionReady,
prefersReducedMotion]);
+
+ const handleTransitionEnd = (event: TransitionEvent<HTMLDivElement>) => {
+ if (event.currentTarget !== event.target || position !==
orderedAnnouncements.length) {
+ return;
+ }
+
+ setIsMotionReady(false);
+ setPosition(0);
+ resetAnimationFrame.current = window.requestAnimationFrame(() => {
+ resetAnimationFrame.current = window.requestAnimationFrame(() =>
setIsMotionReady(true));
+ });
+ };
+
+ const handleBlur = (event: FocusEvent<HTMLElement>) => {
+ if (!event.currentTarget.contains(event.relatedTarget)) {
+ setIsInteractionPaused(false);
+ }
+ };
+
+ const visiblePosition = position === orderedAnnouncements.length ? 0 :
position;
+ const sequenceLabel = `${String(visiblePosition + 1).padStart(2,
'0')}/${String(
+ orderedAnnouncements.length,
+ ).padStart(2, '0')}`;
+ const renderedAnnouncements = orderedAnnouncements.length > 0
+ ? [...orderedAnnouncements, orderedAnnouncements[0]]
+ : [];
+ const trackStyle = {
+ transform: `translate3d(0, -${position * 100}%, 0)`,
+ } satisfies CSSProperties;
+
+ return (
+ <aside
+ className={`homepage-news-ticker${isInteractionPaused ? '
homepage-news-ticker--paused' : ''}`}
+ aria-label="Latest Apache Doris updates"
+ onMouseEnter={() => setIsInteractionPaused(true)}
+ onMouseLeave={() => setIsInteractionPaused(false)}
+ onFocus={() => setIsInteractionPaused(true)}
+ onBlur={handleBlur}
+ >
+ <div className="home-next-container homepage-news-ticker__inner">
+ <span className="homepage-news-ticker__prompt"
aria-hidden="true">
+ Latest
+ </span>
+
+ <div className="homepage-news-ticker__viewport">
+ <div
+ className={`homepage-news-ticker__track${
+ isMotionReady && !prefersReducedMotion ? '
homepage-news-ticker__track--animated' : ''
+ }`}
+ style={trackStyle}
+ onTransitionEnd={handleTransitionEnd}
+ >
+ {renderedAnnouncements.map((announcement, index) => {
+ const isClone = index ===
orderedAnnouncements.length;
+ const isVisible = !isClone && index ===
visiblePosition;
+ return (
+ <Link
+ className="homepage-news-ticker__item"
+ href={announcement.href}
+ aria-hidden={!isVisible || undefined}
+ tabIndex={isVisible ? undefined : -1}
+ key={`${announcement.href}-${isClone ?
'clone' : 'original'}`}
+ >
+ <span
className="homepage-news-ticker__message">
+ <span
className="homepage-news-ticker__tag">[{announcement.tag}]</span>
+ <span
className="homepage-news-ticker__copy">{announcement.text}</span>
+ </span>
+ <span
className="homepage-news-ticker__action">
+ <span
className="homepage-news-ticker__action-label">{announcement.action}</span>
+ <span aria-hidden="true">↗</span>
+ </span>
+ </Link>
+ );
+ })}
+ </div>
+ </div>
+
+ <span className="homepage-news-ticker__sequence"
aria-hidden="true">
+ {isInteractionPaused ? 'Paused' : sequenceLabel}
+ </span>
+ </div>
+ </aside>
+ );
+}
diff --git a/src/components/profile-analysis/AiAnalysisForm.tsx
b/src/components/profile-analysis/AiAnalysisForm.tsx
index c47afb06d8b..1fe197b2c45 100644
--- a/src/components/profile-analysis/AiAnalysisForm.tsx
+++ b/src/components/profile-analysis/AiAnalysisForm.tsx
@@ -32,8 +32,18 @@ export function AiAnalysisForm({
return (
<div className="profile-analysis__panel">
- <p className="profile-analysis__panel-intro">
- The prepared Profile is uploaded only when you start this
action.
+ <p className="profile-analysis__skills-credit">
+ <a
+ href="https://github.com/apache/doris-skills";
+ target="_blank"
+ rel="noopener noreferrer"
+ aria-label="Powered by Doris Skills (opens in a new tab)"
+ >
+ Powered by <strong>Doris Skills</strong>
+ <svg viewBox="0 0 16 16" aria-hidden="true">
+ <path d="M6 3h7v7M13 3 5 11M11 9v4H3V5h4" />
+ </svg>
+ </a>
</p>
<fieldset className="profile-analysis__language"
disabled={disabled}>
diff --git a/src/components/profile-analysis/ProfileAnalysis.scss
b/src/components/profile-analysis/ProfileAnalysis.scss
index 3a4bf8bcc07..3c276519499 100644
--- a/src/components/profile-analysis/ProfileAnalysis.scss
+++ b/src/components/profile-analysis/ProfileAnalysis.scss
@@ -8,19 +8,11 @@
margin-bottom: 2rem;
h1 {
- margin-bottom: 0.75rem;
+ margin-bottom: 0;
color: var(--brand-ink);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.15;
}
-
- > p:last-child {
- max-width: 720px;
- margin: 0;
- color: var(--ifm-color-emphasis-700);
- font-size: 1.05rem;
- line-height: 1.7;
- }
}
&__eyebrow {
@@ -117,6 +109,51 @@
margin-top: 0;
}
+ &__skills-credit {
+ margin: 0 0 1.25rem;
+
+ a {
+ display: inline-flex;
+ gap: 0.35rem;
+ align-items: center;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid var(--brand-border-soft);
+ border-radius: 8px;
+ color: var(--brand-primary-deep);
+ background: var(--brand-surface-soft);
+ font-size: 0.95rem;
+ text-decoration: none;
+ transition: border-color 160ms ease, background-color 160ms ease,
transform 160ms ease;
+
+ &:hover {
+ border-color: var(--brand-primary);
+ color: var(--brand-primary-deep);
+ background: var(--brand-surface-callout);
+ text-decoration: none;
+ transform: translateY(-1px);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--brand-primary-glow);
+ outline-offset: 2px;
+ }
+
+ strong {
+ font-weight: 700;
+ }
+
+ svg {
+ width: 0.9rem;
+ height: 0.9rem;
+ fill: none;
+ stroke: currentColor;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 1.5;
+ }
+ }
+ }
+
&__help {
margin-bottom: 1rem;
color: var(--ifm-color-emphasis-700);
diff --git a/src/components/profile-analysis/ProfileAnalyzer.tsx
b/src/components/profile-analysis/ProfileAnalyzer.tsx
index 4acc8675701..d0fa49fc040 100644
--- a/src/components/profile-analysis/ProfileAnalyzer.tsx
+++ b/src/components/profile-analysis/ProfileAnalyzer.tsx
@@ -96,11 +96,6 @@ export function ProfileAnalyzer(): JSX.Element {
<header className="profile-analysis__header">
<p className="profile-analysis__eyebrow">Query diagnostics</p>
<h1>Apache Doris Profile Analysis</h1>
- <p>
- Choose one Query Profile to visualize its execution graph
locally or request an independent
- AI-assisted diagnosis. Each AI upload starts a new
analysis and does not create a conversation
- history.
- </p>
</header>
<ProfileUploader file={analysis.file} disabled={isAiBusy}
onFileChange={handleFileChange} />
diff --git
a/src/components/profile-analysis/profile-analysis.components.test.js
b/src/components/profile-analysis/profile-analysis.components.test.js
index da42774a28e..8586e3a423d 100644
--- a/src/components/profile-analysis/profile-analysis.components.test.js
+++ b/src/components/profile-analysis/profile-analysis.components.test.js
@@ -121,7 +121,8 @@ test('keeps local file selection independent from unchecked
AI consent and displ
assert.match(markup, /type="checkbox"/);
assert.doesNotMatch(markup, /type="checkbox"[^>]*checked/);
- assert.match(markup, /The prepared Profile is uploaded only when you start
this action\./);
+ assert.match(markup, /href="https:\/\/github\.com\/apache\/doris-skills"/);
+ assert.match(markup, /Powered by <strong>Doris Skills<\/strong>/);
assert.match(markup, /provided by VeloDB and third-party large language
model service providers/);
assert.match(markup, /not an official Apache Doris project feature/);
assert.match(markup, /Do not upload passwords, keys, access tokens,
personal information/);
diff --git a/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
b/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
index a366248a27b..c2939132adf 100644
--- a/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
+++ b/src/theme/DocItem/Layout/MobileSidebarDrawer.tsx
@@ -139,9 +139,11 @@ export default function MobileSidebarDrawer(): JSX.Element
| null {
fill="none"
aria-hidden="true"
>
+ <circle cx="8" cy="8" r="6.5"
stroke="currentColor" strokeWidth="1.25" />
<path
- d="M7.75756 14.3L10.5816 6.91667H11.8759L14.7
14.3H13.4057L12.7501 12.4167H9.74113L9.06873 14.3H7.75756ZM10.1109
11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908 12.45L1.97498
11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302 7.14133C3.80165
6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111 5.00635 6.39711
5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571 7.61667C6.43519 7.12778
6.81621 6.62511 7.11879 6.10867C7.42137 5. [...]
- fill="currentColor"
+ d="M1.5 8h13M8 1.5c1.75 1.78 2.7 4.03 2.7
6.5s-.95 4.72-2.7 6.5C6.25 12.72 5.3 10.47 5.3 8S6.25 3.28 8 1.5Z"
+ stroke="currentColor"
+ strokeWidth="1.25"
/>
</svg>
</button>
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index e3cd168bce7..39c57ed710a 100644
--- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -4,7 +4,6 @@ import { useAlternatePageUtils } from
'@docusaurus/theme-common/internal';
import { translate } from '@docusaurus/Translate';
import { useLocation } from '@docusaurus/router';
import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
-import IconLanguage from '@theme/Icon/Language';
import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem';
@@ -82,11 +81,8 @@ export default function LocaleDropdownNavbarItem({
<DropdownNavbarItem
{...props}
mobile={mobile}
+ aria-label={dropdownLabel}
label={
- // <>
- // <IconLanguage className={styles.iconLanguage} />
- // {dropdownLabel}
- // </>
<>
<svg
className="icon-language"
@@ -95,10 +91,14 @@ export default function LocaleDropdownNavbarItem({
height="16"
viewBox="0 0 16 16"
fill="none"
+ aria-hidden="true"
+ focusable="false"
>
+ <circle cx="8" cy="8" r="6.5" stroke="currentColor"
strokeWidth="1.25" />
<path
- d="M7.75756 14.3L10.5816 6.91667H11.8759L14.7
14.3H13.4057L12.7501 12.4167H9.74113L9.06873 14.3H7.75756ZM10.1109
11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908 12.45L1.97498
11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302 7.14133C3.80165
6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111 5.00635 6.39711
5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571 7.61667C6.43519 7.12778
6.81621 6.62511 7.11879 6.10867C7.42137 5.5917 [...]
- fill="#4C576C"
+ d="M1.5 8h13M8 1.5c1.75 1.78 2.7 4.03 2.7 6.5s-.95
4.72-2.7 6.5C6.25 12.72 5.3 10.47 5.3 8S6.25 3.28 8 1.5Z"
+ stroke="currentColor"
+ strokeWidth="1.25"
/>
</svg>
</>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
