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';
class MyDocument extends Document {
render() {
return (
<Html>
<Html lang="en">
<Head>
<link
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)
<chakra.label
{ ...getRootProps({ onChange: toggleColorMode }) }
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
{ ...getCheckboxProps() }
className={ styles.track }
......
ui/blocks/navigation/NavFooter.tsx
View file @ 03f8d8a6
......@@ -9,10 +9,10 @@ import useIsMobile from 'lib/hooks/useIsMobile';
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
const SOCIAL_LINKS = [
{ link: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK, icon: ghIcon },
{ link: process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK, icon: twIcon },
{ link: process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK, icon: tgIcon },
{ link: process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK, icon: statsIcon },
{ link: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK, icon: ghIcon, label: 'Github link' },
{ link: process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK, icon: twIcon, label: 'Twitter link' },
{ link: process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK, icon: tgIcon, label: 'Telegram link' },
{ link: process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK, icon: statsIcon, label: 'Staking analytic link' },
].filter(({ link }) => link !== undefined);
const BLOCKSCOUT_VERSION = process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION;
......@@ -51,7 +51,7 @@ const NavFooter = ({ isCollapsed }: Props) => {
<Stack direction={ isCollapsed ? 'column' : 'row' }>
{ SOCIAL_LINKS.map(sl => {
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 }/>
</Link>
);
......
ui/blocks/networkMenu/NetworkMenuButton.tsx
View file @ 03f8d8a6
......@@ -26,6 +26,8 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick }: Props, ref: React.Fo
borderRadius="base"
backgroundColor={ isActive ? bgColorMobile : 'none' }
onClick={ onClick }
aria-label="Network menu"
aria-roledescription="menu"
>
<Icon
as={ networksIcon }
......
ui/watchlist/WatchlistTable/WatchListItem.tsx
View file @ 03f8d8a6
......@@ -56,7 +56,7 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
<Flex alignItems="center" justifyContent="space-between" mt={ 6 } w="100%">
<HStack spacing={ 3 }>
<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>
<TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
</Flex>
......
ui/watchlist/WatchlistTable/WatchListTableItem.tsx
View file @ 03f8d8a6
......@@ -84,6 +84,7 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
isChecked={ notificationEnabled }
onChange={ onSwitch }
isDisabled={ switchDisabled }
aria-label="Email notification"
/>
</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