Add title for screen reader only to dropdown button

src/components/CustomToggle.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+// For Bootstrap 4: use "sr-only" for visually hidden text
+
+const CustomToggle = React.forwardRef(({ onClick }, ref) => (
+  <button
+    ref={ref}
+    className='btn dropdown-toggle custom-drop-down-btn'
+    aria-label='Account menu'
+    data-toggle='dropdown'
+    aria-haspopup='true'
+    aria-expanded='false'
+    type='button'
+    onClick={(e) => {
+      e.preventDefault();
+
+      onClick(e);
+    }}
+  >
+    <span className='sr-only'>Account menu</span>
+
+    {/* Bootstrap's caret will appear via .dropdown-toggle CSS */}
+  </button>
+));
+
+export default CustomToggle;

src/components/Titlebar.css

@@ -45,6 +45,37 @@
   left: 0;
 }
 
+.custom-drop-down-btn .dropdown-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.7em; /* as in your original custom-drop-down-btn styling */
+  height: 1.7em;
+  padding: 0 !important; /* Remove Bootstrap padding */
+  background: #e9ecef !important;
+  border-radius: 1.7em;
+  border: 1px solid #e9ecef !important;
+  box-shadow: none;
+  /* You can adjust height/width for your visual design */
+}
+
+/* Target the caret in the dropdown toggle and move it left and down */
+
+.custom-drop-down-btn .dropdown-toggle::after {
+  margin-left: 0 !important; /* Remove any left margin */
+  transform: translate(0, 2px); /* Move caret left (0px) and down (+2px) */
+  /* Try larger/smaller values if needed */
+}
+
+/* If you want to be very precise... */
+
+.custom-drop-down-btn .dropdown-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+}
+
 @media (max-width: 640px) {
   .spaceing,
   .first {

src/components/Titlebar.jsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { Navbar, Nav, Dropdown, DropdownButton } from "react-bootstrap";
+import { Navbar, Nav, Dropdown } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { VscHome } from "react-icons/vsc";
 import { FaFacebook } from "react-icons/fa";
@@ -14,6 +14,7 @@ import { useEffect } from "react";
 import { handleClickLink } from "./helper";
 import { linkUpdated } from "../features/link/linkSlice";
 import { friendsListPageSet } from "../features/accountPage/accountPageSlice";
+import CustomToggle from "./CustomToggle";
 
 const TitleBar = () => {
   const refs = {
@@ -97,11 +98,10 @@ const TitleBar = () => {
             </Link>
           </Nav.Item>
           <Nav.Item className='align-self-center'>
-            <DropdownButton
-              title=''
-              className='mr-4 custom-drop-down-btn'
-              menuAlign='right'
-            >
+            <Dropdown className='mr-4 custom-drop-down-btn'>
+              <Dropdown.Toggle as={CustomToggle} />
+
+              <Dropdown.Menu alignRight>
                 <Dropdown.Item
                   as={Link}
                   to={profileLink}
@@ -114,7 +114,9 @@ const TitleBar = () => {
                     bold='true'
                   />
                 </Dropdown.Item>
+
                 <Dropdown.Divider />
+
                 <Dropdown.Item
                   as={Link}
                   to='/'
@@ -122,10 +124,13 @@ const TitleBar = () => {
                   className='p-0'
                 >
                   <ImExit fontSize='1.5em' className='mx-4' />
+
                   <span>Log Out</span>
+
                   <div style={{ width: "20em" }}></div>
                 </Dropdown.Item>
-            </DropdownButton>
+              </Dropdown.Menu>
+            </Dropdown>
           </Nav.Item>
         </Nav>
       </Navbar>