fix: address breadcrumb review feedback

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: asizikov

src/App.css

@@ -1329,12 +1329,29 @@ td.cost-centers-view__num {
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.user-details__breadcrumbItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-details__breadcrumbItem:not(:last-child)::after {
+  content: '/';
+  font-size: 18px;
+  font-weight: 600;
+  color: #8c959f;
 }
 
 .user-details__breadcrumb {
+  font: inherit;
   font-size: 18px;
   font-weight: 600;
-  color: #0969da;
+  color: #57606a;
   background: transparent;
   border: none;
   padding: 0;
@@ -1343,6 +1360,7 @@ td.cost-centers-view__num {
 }
 
 .user-details__breadcrumb--link {
+  color: #0969da;
   cursor: pointer;
 }
 
@@ -1356,10 +1374,12 @@ td.cost-centers-view__num {
   border-radius: 4px;
 }
 
-.user-details__breadcrumb-separator {
-  font-size: 18px;
-  font-weight: 600;
-  color: #8c959f;
+.user-details__breadcrumbItem--current {
+  color: #1f2328;
+}
+
+.user-details__breadcrumbItem--current .user-details__heading {
+  color: inherit;
 }
 
 .user-details__heading {

src/views/UserDetailsView.tsx

@@ -147,18 +147,21 @@ export function UserDetailsView({ user, rangeStart, rangeEnd, onBackToUsers }: U
     <section className="user-details">
       <div className="user-details__header">
         <div className="user-details__titleGroup">
-          <nav className="user-details__breadcrumbs" aria-label="Breadcrumb">
-            {onBackToUsers ? (
-              <button type="button" className="user-details__breadcrumb user-details__breadcrumb--link" onClick={onBackToUsers}>
-                users
-              </button>
-            ) : (
-              <span className="user-details__breadcrumb">users</span>
-            )}
-            <span className="user-details__breadcrumb-separator" aria-hidden="true">
-              /
-            </span>
-            <h2 className="user-details__heading">{user.username}</h2>
+          <nav aria-label="Breadcrumb">
+            <ol className="user-details__breadcrumbs">
+              <li className="user-details__breadcrumbItem">
+                {onBackToUsers ? (
+                  <button type="button" className="user-details__breadcrumb user-details__breadcrumb--link" onClick={onBackToUsers}>
+                    users
+                  </button>
+                ) : (
+                  <span className="user-details__breadcrumb">users</span>
+                )}
+              </li>
+              <li className="user-details__breadcrumbItem user-details__breadcrumbItem--current" aria-current="page">
+                <h2 className="user-details__heading">{user.username}</h2>
+              </li>
+            </ol>
           </nav>
         </div>