fix(components): add color variables for breadcrumb (#740)

* fix(components): add color variables for breadcrumb

* test: update snapshots

* fix: improve stylelint

* test: increase test coverage

Author: mortalYoung

src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap

@@ -7,6 +7,8 @@ exports[`Test Breadcrumb Component Should render Breadcrumb multiply levels 1`]
   <a
     className="mo-breadcrumb__item"
     onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
   >
     <span
       className="mo-breadcrumb__label"
@@ -20,6 +22,8 @@ exports[`Test Breadcrumb Component Should render Breadcrumb multiply levels 1`]
   <a
     className="mo-breadcrumb__item"
     onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
   >
     <span
       className="mo-breadcrumb__label"
@@ -33,6 +37,8 @@ exports[`Test Breadcrumb Component Should render Breadcrumb multiply levels 1`]
   <a
     className="mo-breadcrumb__item"
     onClick={[Function]}
+    onContextMenu={[Function]}
+    tabIndex={0}
   >
     <span
       className="mo-breadcrumb__label"

src/components/breadcrumb/__tests__/breadcrumb.test.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { fireEvent, render } from '@testing-library/react';
+import { createEvent, fireEvent, render } from '@testing-library/react';
 import { Breadcrumb } from 'mo/components/breadcrumb';
 import type { IBreadcrumbItemProps } from 'mo/components/breadcrumb';
-import { breadcrumbLabelClassName, defaultBreadcrumbClassName } from '../base';
+import {
+    breadcrumbItemClassName,
+    breadcrumbLabelClassName,
+    defaultBreadcrumbClassName,
+} from '../base';
 
 const mockData: IBreadcrumbItemProps[] = new Array(3)
     .fill(1)
@@ -126,4 +130,18 @@ describe('Test Breadcrumb Component', () => {
         expect(container?.title).toBe('test');
         expect(container?.dataset.jest).toBe('test');
     });
+
+    test('Should forbid the default of contextMenu', () => {
+        const wrapper = render(<Breadcrumb routes={mockData} />);
+        const doms = wrapper.container.querySelectorAll(
+            `.${breadcrumbItemClassName}`
+        );
+        const breadcrumb = doms[0];
+
+        const myEvent = createEvent.contextMenu(breadcrumb);
+        Object.assign(myEvent, { preventDefault: jest.fn() });
+        fireEvent(breadcrumb, myEvent);
+
+        expect(myEvent.preventDefault).toBeCalledTimes(1);
+    });
 });

src/components/breadcrumb/index.tsx

@@ -74,6 +74,8 @@ export function Breadcrumb(props: IBreadcrumbProps) {
                         title={title}
                         style={style}
                         href={href}
+                        tabIndex={0}
+                        onContextMenu={(e) => e.preventDefault()}
                         onClick={(e) => onClick?.(e, route)}
                         {...getDataAttributionsFromProps(rest)}
                     >

src/components/breadcrumb/style.scss

@@ -5,12 +5,20 @@
 
     &__item {
         align-items: center;
+        background-color: var(--breadcrumb-background);
+        color: var(--breadcrumb-foreground);
         color: inherit;
         cursor: pointer;
         display: flex;
         justify-content: left;
         text-decoration: none;
 
+        &:focus {
+            color: var(--breadcrumb-focusForeground);
+            outline: 1px solid var(--list-focusOutline);
+            outline-offset: -1px;
+        }
+
         &:hover {
             opacity: 0.8;
         }