Skip to content

F
frontend
Commit 03f8d8a6 authored by tom's avatar tom
Browse files
Options

accessibility fixes

parent fd0fbe8a
Hide whitespace changes
Inline Side-by-side
Showing with 12 additions and 8 deletions
pages/_document.tsx
View file @ 03f8d8a6
...@@ -7,7 +7,7 @@ import theme from 'theme'; ...@@ -7,7 +7,7 @@ import theme from 'theme';
class MyDocument extends Document { class MyDocument extends Document {
render() { render() {
return ( return (
<Html> <Html lang="en">
<Head> <Head>
<link <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
......
ui/blocks/header/ColorModeToggler.tsx
View file @ 03f8d8a6
...@@ -57,8 +57,9 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref) ...@@ -57,8 +57,9 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
<chakra.label <chakra.label
{ ...getRootProps({ onChange: toggleColorMode }) } { ...getRootProps({ onChange: toggleColorMode }) }
className={ styles.root } className={ styles.root }
htmlFor="color-mode-toggler"
> >
<input className={ styles.input } { ...getInputProps({}, ref) }/> <input id="color-mode-toggler" className={ styles.input } { ...getInputProps({}, ref) }/>
<chakra.div <chakra.div
{ ...getCheckboxProps() } { ...getCheckboxProps() }
className={ styles.track } className={ styles.track }
......
ui/blocks/navigation/NavFooter.tsx
View file @ 03f8d8a6
...@@ -9,10 +9,10 @@ import useIsMobile from 'lib/hooks/useIsMobile'; ...@@ -9,10 +9,10 @@ import useIsMobile from 'lib/hooks/useIsMobile';
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps'; import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
const SOCIAL_LINKS = [ const SOCIAL_LINKS = [
{ link: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK, icon: ghIcon }, { link: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK, icon: ghIcon, label: 'Github link' },
{ link: process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK, icon: twIcon }, { link: process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK, icon: twIcon, label: 'Twitter link' },
{ link: process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK, icon: tgIcon }, { link: process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK, icon: tgIcon, label: 'Telegram link' },
{ link: process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK, icon: statsIcon }, { link: process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK, icon: statsIcon, label: 'Staking analytic link' },
].filter(({ link }) => link !== undefined); ].filter(({ link }) => link !== undefined);
const BLOCKSCOUT_VERSION = process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION; const BLOCKSCOUT_VERSION = process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION;
...@@ -51,7 +51,7 @@ const NavFooter = ({ isCollapsed }: Props) => { ...@@ -51,7 +51,7 @@ const NavFooter = ({ isCollapsed }: Props) => {
<Stack direction={ isCollapsed ? 'column' : 'row' }> <Stack direction={ isCollapsed ? 'column' : 'row' }>
{ SOCIAL_LINKS.map(sl => { { SOCIAL_LINKS.map(sl => {
return ( return (
<Link href={ sl.link } key={ sl.link } variant="secondary" w={ 5 } h={ 5 }> <Link href={ sl.link } key={ sl.link } variant="secondary" w={ 5 } h={ 5 } aria-label={ sl.label }>
<Icon as={ sl.icon } boxSize={ 5 }/> <Icon as={ sl.icon } boxSize={ 5 }/>
</Link> </Link>
); );
......
ui/blocks/networkMenu/NetworkMenuButton.tsx
View file @ 03f8d8a6
...@@ -26,6 +26,8 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick }: Props, ref: React.Fo ...@@ -26,6 +26,8 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick }: Props, ref: React.Fo
borderRadius="base" borderRadius="base"
backgroundColor={ isActive ? bgColorMobile : 'none' } backgroundColor={ isActive ? bgColorMobile : 'none' }
onClick={ onClick } onClick={ onClick }
aria-label="Network menu"
aria-roledescription="menu"
> >
<Icon <Icon
as={ networksIcon } as={ networksIcon }
......
ui/watchlist/WatchlistTable/WatchListItem.tsx
View file @ 03f8d8a6
...@@ -56,7 +56,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => { ...@@ -56,7 +56,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
<Flex alignItems="center" justifyContent="space-between" mt={ 6 } w="100%"> <Flex alignItems="center" justifyContent="space-between" mt={ 6 } w="100%">
<HStack spacing={ 3 }> <HStack spacing={ 3 }>
<Text fontSize="sm" fontWeight={ 500 }>Email notification</Text> <Text fontSize="sm" fontWeight={ 500 }>Email notification</Text>
<Switch colorScheme="blue" size="md" isChecked={ notificationEnabled } onChange={ onSwitch }/> <Switch colorScheme="blue" size="md" isChecked={ notificationEnabled } onChange={ onSwitch } aria-label="Email notification"/>
</HStack> </HStack>
<TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/> <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
</Flex> </Flex>
......
ui/watchlist/WatchlistTable/WatchListTableItem.tsx
View file @ 03f8d8a6
...@@ -84,6 +84,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => { ...@@ -84,6 +84,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
isChecked={ notificationEnabled } isChecked={ notificationEnabled }
onChange={ onSwitch } onChange={ onSwitch }
isDisabled={ switchDisabled } isDisabled={ switchDisabled }
aria-label="Email notification"
/> />
</Td> </Td>
<Td> <Td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment