mirror of
https://github.com/usebruno/bruno.git
synced 2024-11-24 17:03:47 +01:00
fix: accessibility issue in side bar's footer (#3130)
* fix: accessibility issues in side bar footer icons * small accessibility changes & formatting * chore: fixed misspell * chore: code cleanup * added proper aria-labels and added with the footer as `ul` * chore: code cleanup --------- Co-authored-by: Shrilakshmi Shastry <shrilakshmi.shastry@smallcase.com>
This commit is contained in:
Pragadesh-45
GitHub
parent
563683b5c1
commit
b60c799645
@ -93,10 +93,12 @@ const Notifications = () => {
|
||||
dispatch(fetchNotifications());
|
||||
setShowNotificationsModal(true);
|
||||
}}
|
||||
aria-label="Check all Notifications"
|
||||
>
|
||||
<ToolHint text="Notifications" toolhintId="Notifications" offset={8} >
|
||||
<ToolHint text="Notifications" toolhintId="Notifications" offset={8}>
|
||||
<IconBell
|
||||
size={18}
|
||||
aria-hidden
|
||||
strokeWidth={1.5}
|
||||
className={`mr-2 ${unreadNotifications?.length > 0 ? 'bell' : ''}`}
|
||||
/>
|
||||
@ -133,8 +135,9 @@ const Notifications = () => {
|
||||
{notifications?.slice(notificationsStartIndex, notificationsEndIndex)?.map((notification) => (
|
||||
<li
|
||||
key={notification.id}
|
||||
className={`p-4 flex flex-col justify-center ${selectedNotification?.id == notification.id ? 'active' : notification.read ? 'read' : ''
|
||||
}`}
|
||||
className={`p-4 flex flex-col justify-center ${
|
||||
selectedNotification?.id == notification.id ? 'active' : notification.read ? 'read' : ''
|
||||
}`}
|
||||
onClick={handleNotificationItemClick(notification)}
|
||||
>
|
||||
<div className="notification-title w-full">{notification?.title}</div>
|
||||
@ -144,8 +147,9 @@ const Notifications = () => {
|
||||
</ul>
|
||||
<div className="w-full pagination flex flex-row gap-4 justify-center p-2 items-center text-xs">
|
||||
<button
|
||||
className={`pl-2 pr-2 py-3 select-none ${pageNumber <= 1 ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
|
||||
}`}
|
||||
className={`pl-2 pr-2 py-3 select-none ${
|
||||
pageNumber <= 1 ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
|
||||
}`}
|
||||
onClick={handlePrev}
|
||||
>
|
||||
{'Prev'}
|
||||
@ -161,8 +165,9 @@ const Notifications = () => {
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={`pl-2 pr-2 py-3 select-none ${pageNumber == totalPages ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
|
||||
}`}
|
||||
className={`pl-2 pr-2 py-3 select-none ${
|
||||
pageNumber == totalPages ? 'opacity-50' : 'text-link cursor-pointer hover:underline'
|
||||
}`}
|
||||
onClick={handleNext}
|
||||
>
|
||||
{'Next'}
|
||||
|
||||
@ -82,16 +82,12 @@ const TitleBar = () => {
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center cursor-pointer" onClick={handleTitleClick}>
|
||||
<Bruno width={30} />
|
||||
</div>
|
||||
<div
|
||||
onClick={handleTitleClick}
|
||||
className="flex items-center font-medium select-none cursor-pointer"
|
||||
style={{ fontSize: 14, paddingLeft: 6, position: 'relative', top: -1 }}
|
||||
>
|
||||
<button className="flex items-center gap-2 text-sm font-medium" onClick={handleTitleClick}>
|
||||
<span aria-hidden>
|
||||
<Bruno width={30} />
|
||||
</span>
|
||||
bruno
|
||||
</div>
|
||||
</button>
|
||||
<div className="collection-dropdown flex flex-grow items-center justify-end">
|
||||
<Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
|
||||
<div
|
||||
|
||||
@ -20,7 +20,7 @@ const MAX_LEFT_SIDEBAR_WIDTH = 600;
|
||||
const Sidebar = () => {
|
||||
const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
|
||||
const preferencesOpen = useSelector((state) => state.app.showPreferences);
|
||||
const [goldenEditonOpen, setGoldenEditonOpen] = useState(false);
|
||||
const [goldenEditionOpen, setGoldenEditionOpen] = useState(false);
|
||||
|
||||
const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
|
||||
const [cookiesOpen, setCookiesOpen] = useState(false);
|
||||
@ -83,10 +83,43 @@ const Sidebar = () => {
|
||||
return (
|
||||
<StyledWrapper className="flex relative h-screen">
|
||||
<aside>
|
||||
{goldenEditonOpen && <GoldenEdition onClose={() => setGoldenEditonOpen(false)} />}
|
||||
{goldenEditionOpen && (
|
||||
<GoldenEdition
|
||||
onClose={() => {
|
||||
setGoldenEditionOpen(false);
|
||||
document.querySelector('[data-trigger="golden-edition"]').focus();
|
||||
}}
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
aria-labelledby="golden-edition-title"
|
||||
aria-describedby="golden-edition-description"
|
||||
/>
|
||||
)}
|
||||
<div className="flex flex-row h-screen w-full">
|
||||
{preferencesOpen && <Preferences onClose={() => dispatch(showPreferences(false))} />}
|
||||
{cookiesOpen && <Cookies onClose={() => setCookiesOpen(false)} />}
|
||||
{preferencesOpen && (
|
||||
<Preferences
|
||||
onClose={() => {
|
||||
dispatch(showPreferences(false));
|
||||
document.querySelector('[data-trigger="preferences"]').focus();
|
||||
}}
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
aria-labelledby="preferences-title"
|
||||
aria-describedby="preferences-description"
|
||||
/>
|
||||
)}
|
||||
{cookiesOpen && (
|
||||
<Cookies
|
||||
onClose={() => {
|
||||
setCookiesOpen(false);
|
||||
document.querySelector('[data-trigger="cookies"]').focus();
|
||||
}}
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
aria-labelledby="cookies-title"
|
||||
aria-describedby="cookies-description"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col w-full" style={{ width: asideWidth }}>
|
||||
<div className="flex flex-col flex-grow">
|
||||
@ -96,30 +129,50 @@ const Sidebar = () => {
|
||||
|
||||
<div className="footer flex px-1 py-2 absolute bottom-0 left-0 right-0 items-center select-none">
|
||||
<div className="flex items-center ml-1 text-xs ">
|
||||
<a className="mr-2 cursor-pointer" onClick={() => dispatch(showPreferences(true))}>
|
||||
<ToolHint text="Preferences" toolhintId="Preferences" effect='float' place='top-start' offset={8}>
|
||||
<IconSettings size={18} strokeWidth={1.5} />
|
||||
</ToolHint>
|
||||
</a>
|
||||
<a
|
||||
className="mr-2 cursor-pointer"
|
||||
onClick={() => setCookiesOpen(true)}
|
||||
>
|
||||
<ToolHint text="Cookies" toolhintId="Cookies" offset={8}>
|
||||
<IconCookie size={18} strokeWidth={1.5} />
|
||||
</ToolHint>
|
||||
</a>
|
||||
<a
|
||||
className="mr-2 cursor-pointer"
|
||||
onClick={() => setGoldenEditonOpen(true)}
|
||||
>
|
||||
<ToolHint text="Golden Edition" toolhintId="Golden Edition" offset={8} >
|
||||
<IconHeart size={18} strokeWidth={1.5} />
|
||||
</ToolHint>
|
||||
</a>
|
||||
<a>
|
||||
<Notifications />
|
||||
</a>
|
||||
<ul role="menubar" className="flex space-x-2">
|
||||
<li role="menuitem">
|
||||
<a
|
||||
className="cursor-pointer"
|
||||
data-trigger="preferences"
|
||||
onClick={() => dispatch(showPreferences(true))}
|
||||
tabIndex={0}
|
||||
aria-label="Open Preferences"
|
||||
>
|
||||
<ToolHint text="Preferences" toolhintId="Preferences" effect="float" place="top-start" offset={8}>
|
||||
<IconSettings size={18} strokeWidth={1.5} aria-hidden="true" />
|
||||
</ToolHint>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a
|
||||
className="cursor-pointer"
|
||||
data-trigger="cookies"
|
||||
onClick={() => setCookiesOpen(true)}
|
||||
tabIndex={0}
|
||||
aria-label="Open Cookies Settings"
|
||||
>
|
||||
<ToolHint text="Cookies" toolhintId="Cookies" offset={8}>
|
||||
<IconCookie size={18} strokeWidth={1.5} aria-hidden="true" />
|
||||
</ToolHint>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a
|
||||
className="cursor-pointer"
|
||||
data-trigger="golden-edition"
|
||||
onClick={() => setGoldenEditionOpen(true)}
|
||||
tabIndex={0}
|
||||
aria-label="Open Golden Edition"
|
||||
>
|
||||
<ToolHint text="Golden Edition" toolhintId="Golden Edition" offset={8}>
|
||||
<IconHeart size={18} strokeWidth={1.5} aria-hidden="true" />
|
||||
</ToolHint>
|
||||
</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<Notifications />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="pl-1" style={{ position: 'relative', top: '3px' }}>
|
||||
{/* This will get moved to home page */}
|
||||
@ -137,10 +190,11 @@ const Sidebar = () => {
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="absolute drag-sidebar h-full" onMouseDown={handleDragbarMouseDown}>
|
||||
<div className="drag-request-border" />
|
||||
</div>
|
||||
</StyledWrapper >
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user