diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx index 3874571ad..985477cdb 100644 --- a/Client/src/Pages/Account/index.jsx +++ b/Client/src/Pages/Account/index.jsx @@ -1,3 +1,4 @@ +import React, { useState } from "react"; import PropTypes from "prop-types"; import { useNavigate } from "react-router"; import { useSelector } from "react-redux"; @@ -14,10 +15,10 @@ import "./index.css"; * @param {string} [props.open] - Specifies the initially open tab: 'profile', 'password', or 'team'. * @returns {JSX.Element} */ - const Account = ({ open = "profile" }) => { const theme = useTheme(); const navigate = useNavigate(); + const [focusedTab, setFocusedTab] = useState(null); // Track focused tab const tab = open; const handleTabChange = (event, newTab) => { navigate(`/account/${newTab}`); @@ -33,9 +34,24 @@ const Account = ({ open = "profile" }) => { // Remove password for demo if (user.role.includes("demo")) { - tabList = ["Profile"]; + tabList = ["Profile", "Password", "Team"]; } + const handleKeyDown = (event) => { + const currentIndex = tabList.findIndex((label) => label.toLowerCase() === tab); + if (event.key === "Tab") { + const nextIndex = (currentIndex + 1) % tabList.length; + setFocusedTab(tabList[nextIndex].toLowerCase()); + } else if (event.key === "Enter") { + event.preventDefault(); + navigate(`/account/${focusedTab}`); + } + }; + + const handleFocus = (tabName) => { + setFocusedTab(tabName); + }; + return ( { label={label} key={index} value={label.toLowerCase()} + onKeyDown={handleKeyDown} + onFocus={() => handleFocus(label.toLowerCase())} + tabIndex={index} sx={{ fontSize: 13, color: theme.palette.text.tertiary, @@ -74,7 +93,11 @@ const Account = ({ open = "profile" }) => { fontWeight: 400, marginRight: theme.spacing(8), "&:focus": { - outline: "none", + borderBottom: `2px solid ${theme.palette.border.light}`, + }, + + "&:hover": { + borderBottom: `2px solid ${theme.palette.border.light}`, }, }} />