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,35 +98,39 @@ const TitleBar = () => {
             </Link>
           </Nav.Item>
           <Nav.Item className='align-self-center'>
-            <DropdownButton
+            <Dropdown className='mr-4 custom-drop-down-btn'>
-              title=''
+              <Dropdown.Toggle as={CustomToggle} />
-              className='mr-4 custom-drop-down-btn'
+
-              menuAlign='right'
+              <Dropdown.Menu alignRight>
-            >
+                <Dropdown.Item
-              <Dropdown.Item
+                  as={Link}
-                as={Link}
+                  to={profileLink}
-                to={profileLink}
+                  onClick={closeFriendsListPage}
-                onClick={closeFriendsListPage}
+                >
-              >
+                  <ProfileLink
-                <ProfileLink
+                    user={user}
-                  user={user}
+                    size='60'
-                  size='60'
+                    fullname='true'
-                  fullname='true'
+                    bold='true'
-                  bold='true'
+                  />
-                />
+                </Dropdown.Item>
-              </Dropdown.Item>
+
-              <Dropdown.Divider />
+                <Dropdown.Divider />
-              <Dropdown.Item
+
-                as={Link}
+                <Dropdown.Item
-                to='/'
+                  as={Link}
-                onClick={handleClick}
+                  to='/'
-                className='p-0'
+                  onClick={handleClick}
-              >
+                  className='p-0'
-                <ImExit fontSize='1.5em' className='mx-4' />
+                >
-                <span>Log Out</span>
+                  <ImExit fontSize='1.5em' className='mx-4' />
-                <div style={{ width: "20em" }}></div>
+
-              </Dropdown.Item>
+                  <span>Log Out</span>
-            </DropdownButton>
+
+                  <div style={{ width: "20em" }}></div>
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
           </Nav.Item>
         </Nav>
       </Navbar>