Skip to content

Commit e0239ce

Browse files
committed
Solve warning about missing dialog title
In the layout picker, we are using ShadCN's Drawer component, which is using Dialog under the hood. On the browser console, there was a message: > `DialogContent` requires a `DialogTitle` > for the component to be accessible for screen reader users. etc. This change fixes that, by wrapping the already existing app logo with the required DrawerTitle tag.
1 parent 4cbfd9f commit e0239ce

2 files changed

Lines changed: 7 additions & 3 deletions

File tree

.changelog/2168.internal.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Solve warning about missing dialog title

src/app/components/LayerPicker/index.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { styled } from '@mui/material/styles'
1818
import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
1919
import { useScreenSize } from '../../hooks/useScreensize'
2020
import { MobileNetworkButton } from '../PageLayout/NetworkButton'
21+
import { DrawerTitle } from '../../../../ui-library/src'
2122

2223
type LayerPickerProps = {
2324
onClose: () => void
@@ -106,9 +107,11 @@ const LayerPickerContent: FC<LayerPickerContentProps> = ({ isOutOfDate, onClose,
106107

107108
return (
108109
<StyledLayerPickerContent>
109-
<Box sx={{ mb: isTablet ? 0 : 5, position: 'relative' }}>
110-
<HomePageLink color="#0500e2" showText={!isMobile} />
111-
</Box>
110+
<DrawerTitle>
111+
<Box sx={{ mb: isTablet ? 0 : 5, position: 'relative' }}>
112+
<HomePageLink color="#0500e2" showText={!isMobile} />
113+
</Box>
114+
</DrawerTitle>
112115
{isTablet && (
113116
<TabletActionBar>
114117
<div>

0 commit comments

Comments
 (0)