diff --git a/src/components/codeKeywords/keywordSelector.tsx b/src/components/codeKeywords/keywordSelector.tsx index ab2bd2084fd1d..820f4307c587a 100644 --- a/src/components/codeKeywords/keywordSelector.tsx +++ b/src/components/codeKeywords/keywordSelector.tsx @@ -44,6 +44,7 @@ export function KeywordSelector({ const [dropdownEl, setDropdownEl] = useState(null); const [isAnimating, setIsAnimating] = useState(false); const [orgFilter, setOrgFilter] = useState(''); + const [showProjectPreview, setShowProjectPreview] = useState(false); const {resolvedTheme: theme} = useTheme(); const isDarkMode = theme === 'dark'; @@ -134,8 +135,18 @@ export function KeywordSelector({ role="button" tabIndex={0} title={currentSelection?.title} + aria-label={ + currentSelection?.title + ? `${currentSelection?.title}: ${currentSelection[keyword]}. Click to select different project.` + : `Click to select project` + } + aria-expanded={isOpen} onClick={() => setIsOpen(!isOpen)} onKeyDown={e => e.key === 'Enter' && setIsOpen(!isOpen)} + onMouseEnter={() => setShowProjectPreview(true)} + onMouseLeave={() => setShowProjectPreview(false)} + onFocus={() => setShowProjectPreview(true)} + onBlur={() => setShowProjectPreview(false)} > - {!isOpen && showPreview && currentSelection?.title && ( - {currentSelection.title} + {!isOpen && showProjectPreview && showPreview && currentSelection?.title && ( + )}