Skip to content

feat: enhance notification sidebar header with back navigation and st… #8412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rbshh wants to merge 1 commit into
base: preview
Choose a base branch
from
Open

feat: enhance notification sidebar header with back navigation and st… #8412

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 26 additions & 12 deletions apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { observer } from "mobx-react";
import Link from "next/link";
// plane imports
import { useTranslation } from "@plane/i18n";
import { InboxIcon } from "@plane/propel/icons";
import { getButtonStyling } from "@plane/propel/button";
import { ChevronLeftIcon, InboxIcon } from "@plane/propel/icons";
import { Breadcrumbs, Header } from "@plane/ui";
import { cn } from "@plane/utils";
// components
import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
// local imports
Expand All @@ -22,17 +25,28 @@ export const NotificationSidebarHeader = observer(function NotificationSidebarHe
return (
<Header className="my-auto bg-surface-1">
<Header.LeftItem>
<Breadcrumbs>
<Breadcrumbs.Item
component={
<BreadcrumbLink
label={t("notification.label")}
icon={<InboxIcon className="h-4 w-4 text-primary" />}
disableTooltip
/>
}
/>
</Breadcrumbs>
<div className="flex items-center gap-2">
<Link
href={`/${workspaceSlug}`}
className={cn(
getButtonStyling("secondary", "base"),
"flex items-center justify-center gap-2 text-tertiary rounded-lg h-6 w-6 p-1 hover:bg-surface-2 hover:text-secondary"
)}
>
<ChevronLeftIcon className="h-4 w-4" />
</Link>
Comment on lines +29 to +37
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add accessible label for screen reader users.

The back navigation button contains only a visual icon without any accessible text or aria-label. Screen readers cannot announce the button's purpose, violating WCAG 2.1 Level A (Success Criterion 2.4.4 - Link Purpose).

🔎 Proposed fix to add aria-label 
 <Link
   href={`/${workspaceSlug}`}
+  aria-label={t("notification.back_to_workspace")}
   className={cn(
     getButtonStyling("secondary", "base"),
     "flex items-center justify-center gap-2 text-tertiary rounded-lg h-6 w-6 p-1 hover:bg-surface-2 hover:text-secondary"
   )}
 >
   <ChevronLeftIcon className="h-4 w-4" />
 </Link>

Note: You'll need to add the translation key "notification.back_to_workspace" to the i18n files, or use an existing appropriate translation.

Consider simplifying the button styling approach.

The implementation combines getButtonStyling("secondary", "base") with extensive custom className overrides (rounded-lg, h-6, w-6, p-1, text colors, hover states). This pattern suggests either:

  • The custom classes are unnecessary and conflict with getButtonStyling output
  • Or getButtonStyling is not the right abstraction for this use case

Consider using only custom classes or creating a dedicated icon-button variant in the design system.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
around lines 29-37, the Link back button only contains an icon and lacks an
accessible label; add an aria-label prop that uses the i18n key
"notification.back_to_workspace" (or an existing appropriate translation) so
screen readers can announce the link, and ensure the translation key is added to
locale files. Also simplify styling: either remove getButtonStyling and keep the
explicit icon-button classes (rounded-lg, h-6, w-6, p-1, text/hover classes) or
replace the combined classes with a dedicated "icon-button" variant in
getButtonStyling to avoid class conflicts; pick one approach and apply it
consistently to this component.

<Breadcrumbs>
<Breadcrumbs.Item
component={
<BreadcrumbLink
label={t("notification.label")}
icon={<InboxIcon className="h-4 w-4 text-primary" />}
disableTooltip
/>
}
/>
</Breadcrumbs>
</div>
</Header.LeftItem>
<Header.RightItem>
<NotificationSidebarHeaderOptions workspaceSlug={workspaceSlug} />
Expand Down
Loading