Hasan/Pr 1872 lighthouse v11 accessibility issue

src/components/custom/_dhero-dmt5.tsx

@@ -137,7 +137,7 @@ const DCommonBanner = () => {
             <StyledContainer jc="flex-start">
                 <ContentWrapperStyle is_rtl={is_rtl}>
                     <Content>
-                        <StyledTradingLogin src={DerivMT5Logo} />
+                        <StyledTradingLogin src={DerivMT5Logo} alt="Deriv MT5 logo" />
                         <CommonHeaderSection
                             title="_t_The all-in-one CFD trading platform_t_"
                             title_font_size={is_mobile ? '32px' : '64px'}

src/components/custom/_dhero.tsx

@@ -167,7 +167,7 @@ const DHero = ({ join_us_for_free, is_live_demo, image_name }: DHeroProps) => {
             <StyledContainer jc="flex-start">
                 <ContentWrapperStyle is_rtl={is_rtl}>
                     <Content>
-                        <img width="237px" height="64px" src={DerivTLogo} />
+                        <img width="237px" height="64px" src={DerivTLogo} alt="dtrader logo" />
                         <CommonHeaderSection
                             title="_t_A user-friendly trading platform_t_"
                             title_font_size={`${is_mobile ? 32 : 64}px`}

src/components/elements/roadmap.tsx

@@ -92,7 +92,13 @@ const Roadmap = ({ portal: { frame, link, paragraph } }: RoadmapProps) => {
             </Container>
 
             <StyledFrame>
-                <iframe src={frame} frameBorder="0" height="100%" width="100%"></iframe>
+                <iframe
+                    src={frame}
+                    title="product board"
+                    frameBorder="0"
+                    height="100%"
+                    width="100%"
+                ></iframe>
                 <StyledButton tertiary external to={link} target="_blank" rel="noopener noreferrer">
                     <Localize translate_text="_t_Go to portal_t_" />
                 </StyledButton>

src/features/components/molecules/language-switcher/index.tsx

@@ -34,11 +34,11 @@ const LanguageSwitcher = () => {
             onOpenChange={setOpen}
         >
             <DropdownMenu.Trigger asChild>
-                <div className={styles.trigger}>
+                <button className={styles.trigger}>
                     <Typography.Paragraph size="medium" font_family={'UBUNTU'} weight="bold">
                         {currentLang.short_name}
                     </Typography.Paragraph>
-                </div>
+                </button>
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Content

src/features/components/molecules/language-switcher/language-switcher.module.scss

@@ -6,6 +6,9 @@
     padding-inline-start: 2rem;
     padding-block: 2rem;
     outline: none;
+    background: transparent;
+    border: none;
+    padding-inline-end: 0;
 
     &:focus,
     &:visited,

src/features/components/molecules/trade-item/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { trade_item } from './style.module.scss'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import Image from 'features/components/atoms/image'
 import Typography from 'features/components/atoms/typography'
 import Flex from 'features/components/atoms/flex-box'
@@ -29,7 +29,7 @@ const TradeItem = ({ data, ...rest }: TradeItemProps) => {
             className={trade_item}
             {...rest}
         >
-            <Image src={data.icon_src} width={48} height={48} />
+            <Image src={data.icon_src} width={48} height={48} alt={localize(data.heading)} />
             <Typography.Heading
                 as="h4"
                 align="center"

src/features/components/organisms/markets/greyed-container/trade-benefits.tsx

@@ -9,7 +9,7 @@ import Image from 'features/components/atoms/image'
 const TradeBenefit = ({ item }: { item: TradeBenefitType }) => {
     return (
         <Flex.Box className={item_container} direction="col" align="center" gap="5x">
-            <Image src={item.icon_src} width={48} height={48} />
+            <Image src={item.icon_src} width={48} height={48} alt="trade benefit icon" />
 
             <Flex.Item>
                 <Typography.Paragraph textcolor="inverted" align="center">

src/features/components/organisms/markets/market-banner/banner-text.tsx

@@ -60,7 +60,6 @@ const BannerText = ({ item }: HomepageBannerProps) => {
                     type={'button'}
                     aria-label="create free demo account"
                     onClick={handleSignup}
-                    id="dm-hero-signup"
                 >
                     <Localize translate_text={'_t_Create free demo account_t_'} />
                 </Button.Primary>

src/features/components/organisms/markets/markets-trade-steps/trade-steps-wrapper.tsx

@@ -59,7 +59,7 @@ const TradeStepsWrapper = ({ header, data }: TradeStepsType) => {
                 pt="20x"
                 lg={{ padding_block: '20x' }}
             >
-                <Button.Primary aria-label="Signup" id="dm-nav-signup" onClick={handleSignup}>
+                <Button.Primary aria-label="Signup" onClick={handleSignup}>
                     <Localize translate_text="_t_Sign up now_t_" />
                 </Button.Primary>
             </Flex.Box>

src/features/components/templates/navigation/career-nav/index.tsx

@@ -14,8 +14,12 @@ const CareerNav = () => {
     return (
         <NavTemplate
             renderLogo={() => (
-                <Link url={{ type: 'internal', to: '/' }}>
-                    <Image src={CareerNavLogo} className={careers_nav_logo} />
+                <Link url={{ type: 'internal', to: '/' }} aria-label="deriv careers logo link">
+                    <Image
+                        src={CareerNavLogo}
+                        className={careers_nav_logo}
+                        alt="deriv careers logo"
+                    />
                 </Link>
             )}
             items={career_nav_items}

src/features/components/templates/navigation/main-nav/main-nav-buttons/index.tsx

@@ -27,20 +27,14 @@ const MainNavButtons = () => {
             gap="8x"
         >
             {is_logged_in ? (
-                <Button.Primary
-                    disabled={is_region_loading}
-                    onClick={handleGetTrading}
-                    aria-label="Get trading"
-                    outlined
-                >
+                <Button.Primary disabled={is_region_loading} onClick={handleGetTrading} outlined>
                     <Localize translate_text="_t_Get trading_t_" />
                 </Button.Primary>
             ) : (
                 <>
                     <Button.Primary
                         disabled={is_region_loading}
                         id="dm-nav-login-button"
-                        aria-label="Login"
                         onClick={handleLogin}
                         outlined
                     >
@@ -49,7 +43,6 @@ const MainNavButtons = () => {
                     <Button.Primary
                         visible="larger-than-tablet"
                         disabled={is_region_loading}
-                        aria-label="Signup"
                         id="dm-nav-signup"
                         onClick={handleSignup}
                     >

src/features/components/templates/navigation/market-nav/index.tsx

@@ -23,8 +23,8 @@ const MarketNav = () => {
                 <NavTemplate
                     render_bottom_nav={() => <MarketBottomNav />}
                     renderLogo={() => (
-                        <Link url={{ type: 'internal', to: '/' }}>
-                            <Image src={LogoImage} className={market_nav_logo} />
+                        <Link url={{ type: 'internal', to: '/' }} aria-label="deriv logo link">
+                            <Image src={LogoImage} className={market_nav_logo} alt="deriv-logo" />
                         </Link>
                     )}
                     items={mainItems}

src/features/components/templates/navigation/payment-agent-nav/index.tsx

@@ -46,7 +46,6 @@ const PaymentAgentAffiliateNav = ({ is_prime_page = false }: { is_prime_page?: b
         ) : (
             <>
                 <Button.Primary
-                    id="dm-nav-affiliate-login-button"
                     onClick={() =>
                         window.open('https://login.deriv.com/signin.php?lang=0', '_blank')
                     }
@@ -57,7 +56,6 @@ const PaymentAgentAffiliateNav = ({ is_prime_page = false }: { is_prime_page?: b
                     <Localize translate_text={texts.login} />
                 </Button.Primary>
                 <Button.Primary
-                    id="dm-nav-affiliate-login-button"
                     onClick={() =>
                         window.open('https://login.deriv.com/signin.php?lang=0', '_blank')
                     }
@@ -86,11 +84,20 @@ const PaymentAgentAffiliateNav = ({ is_prime_page = false }: { is_prime_page?: b
                         type: 'internal',
                         to: is_prime_page ? '/partners/deriv-prime/' : '/partners/',
                     }}
+                    aria-label="deriv partners logo link"
                 >
                     {is_prime_page ? (
-                        <Image src={PrimeLogo} className={partners_nav_logo} />
+                        <Image
+                            src={PrimeLogo}
+                            className={partners_nav_logo}
+                            alt="deriv prime logo"
+                        />
                     ) : (
-                        <Image src={PartnerNavLogo} className={partners_nav_logo} />
+                        <Image
+                            src={PartnerNavLogo}
+                            className={partners_nav_logo}
+                            alt="deriv partners logo"
+                        />
                     )}
                 </Link>
             )}

src/features/components/templates/navigation/template/desktop-menu/index.tsx

@@ -32,9 +32,11 @@ const DesktopMenu = ({ has_centered_items }: IDesktopNavbarProps) => {
                 ))}
                 {link_items.map((item) => (
                     <NavigationMenu.Item key={item.id} value={item.data.title} asChild>
-                        <NavigationMenu.Link asChild>
-                            <NavSingleItem item={item.data} />
-                        </NavigationMenu.Link>
+                        <li>
+                            <NavigationMenu.Link asChild>
+                                <NavSingleItem item={item.data} />
+                            </NavigationMenu.Link>
+                        </li>
                     </NavigationMenu.Item>
                 ))}
             </NavigationMenu.List>

src/features/pages/home/live-pricing/index.tsx

@@ -38,7 +38,6 @@ const LivePricing = () => {
                 <Button.Primary
                     className={button_table}
                     onClick={is_logged_in ? handleRedirectToTradersHub : handleLogin}
-                    aria-label="Get trading"
                 >
                     <Localize translate_text="_t_Trade now_t_" />
                 </Button.Primary>

src/features/pages/home/live-pricing/market-tabs/market-tab.tsx

@@ -13,7 +13,7 @@ import useRegion from 'components/hooks/use-region'
 const MarketTab = () => {
     const [selected_market, setSelectedMarket] = useState<TAvailableLiveMarkets>('fx')
     const [tab_name, setTabName] = useState('Forex')
-    const [linkToMarketPage, setLinkToMarketPage] = useState('/markets/forex/')
+    const [linkToMarketPage, setLinkToMarketPage] = useState<`/${string}`>('/markets/forex/')
     const { is_eu } = useRegion()
     const updated_market_buttons = market_buttons.filter((items) => {
         if (!is_eu) return items

src/features/pages/home/live-pricing/table-component/live-market-table.tsx

@@ -18,7 +18,7 @@ import InitialLoader from 'components/elements/dot-loader'
 
 export type TLiveMarketTableProps = {
     selected_market: TAvailableLiveMarkets
-    link_to: string
+    link_to: `/${string}`
 }
 
 const LoaderView = (

src/features/pages/home/live-pricing/table-component/symbol-icon.tsx

@@ -2,12 +2,12 @@ import React from 'react'
 import * as icons from 'components/elements/symbols-shortcode'
 import Image from 'features/components/atoms/image'
 
-const SymbolIcon = ({ icon_src }: { icon_src: string }) => {
+const SymbolIcon = ({ icon_src, alt }: { icon_src: string;  alt?: string }) => {
     if (icon_src === 'Volatility_150_(1s)_Index')
-        return <Image src={icons['Vol_1HZ150V']} width="24px" height="24px" />
+        return <Image src={icons['Vol_1HZ150V']} width="24px" height="24px" alt={alt} />
     if (icon_src === 'Volatility_250_(1s)_Index')
-        return <Image src={icons['Vol_1HZ250V']} width="24px" height="24px" />
-    else return <Image src={icons[icon_src]} width="24px" height="24px" />
+        return <Image src={icons['Vol_1HZ250V']} width="24px" height="24px" alt={alt} />
+    else return <Image src={icons[icon_src]} width="24px" height="24px" alt={alt} />
 }
 
 export default SymbolIcon

src/features/pages/home/live-pricing/types.tsx

@@ -18,5 +18,5 @@ export type TMarketButtons = {
     button_text: string
     market_name: TAvailableLiveMarkets
     market_description: TString
-    to: string
+    to: `/${string}`
 }

src/features/pages/home/live-pricing/use-live-columns.tsx

@@ -30,15 +30,15 @@ const useLiveColumns = () => {
                 cell: (info) => (
                     <Flex.Box>
                         {info.row.original.mkt !== 'etfs' ? (
-                            <SymbolIcon icon_src={info.getValue()} />
+                            <SymbolIcon icon_src={info.getValue()} alt="Instrument Icon" />
                         ) : (
-                            <SymbolIcon icon_src="ETFSICON" />
+                            <SymbolIcon icon_src="ETFSICON" alt="Instrument Icon" />
                         )}
                     </Flex.Box>
                 ),
             }),
             liveMarketColumnHelper.accessor('sym', {
-                header: () => <Flex.Box></Flex.Box>,
+                header: () => <Flex.Box><p className="sr-only">Symbol</p></Flex.Box>,
                 cell: (info) => (
                     <Flex.Box>
                         <Typography.Paragraph size={is_mobile ? 'small' : 'medium'}>

src/features/pages/home/our-platforms/sliders/platform-main/main-slider.item.tsx

@@ -5,7 +5,7 @@ import { main_item_active, main_item, description_grid_item } from './platforms-
 import Flex from 'features/components/atoms/flex-box'
 import Typography from 'features/components/atoms/typography'
 import Link from 'features/components/atoms/link'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import dclsx from 'features/utils/dclsx'
 import Image from 'features/components/atoms/image'
 
@@ -21,7 +21,7 @@ const MainSliderItem = ({ item }: MainSliderItemProps) => {
                 [main_item_active]: swiperSlide.isActive,
             })}
         >
-            <Image src={item.icon} width={40} height={40} />
+            <Image src={item.icon} width={40} height={40} alt={localize(item.title)} />
             <Typography.Heading as="h3" size="xxs">
                 <Localize translate_text={item.title} />
             </Typography.Heading>

src/features/styles/app.scss

@@ -16,3 +16,4 @@
 @import './theme/inputs/text.styles.scss';
 @import './theme/inputs/checkbox.styles.scss';
 @import './theme/visibility.scss';
+@import './theme/utility.scss';

src/features/styles/theme/utility.scss

@@ -0,0 +1,10 @@
+.sr-only {
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}

src/pages/dbot/_hero.tsx

@@ -8,7 +8,7 @@ import useBreakpoints from 'components/hooks/use-breakpoints'
 import useHandleSignup from 'components/hooks/use-handle-signup'
 import useAuthCheck from 'components/hooks/use-auth-check'
 import { LinkButton } from 'components/form'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import { handleGetTrading } from 'components/custom/utils'
 import Shape from 'components/custom/_hero-shape'
 import Button from 'components/custom/_button'
@@ -172,7 +172,7 @@ const DHero = ({ join_us_for_free, is_live_demo, image_name }: DHeroProps) => {
             <StyledContainer jc="flex-start">
                 <ContentWrapperStyle is_rtl={is_rtl}>
                     <Content>
-                        <StyledLogo src={BotBannerLogo} />
+                        <StyledLogo src={BotBannerLogo} alt={localize('_t_dbot logo_t_')} />
                         <CommonHeaderSection
                             title="_t_Automate your trading ideas without writing code_t_"
                             font_family_title={

src/pages/deriv-go/_banner.tsx

@@ -12,6 +12,7 @@ import Shape from 'components/custom/_hero-shape'
 import Button from 'components/custom/_button'
 import { useIsRtl } from 'components/hooks/use-isrtl'
 import { Container } from 'components/containers'
+import { localize } from 'components/localization'
 
 //TODO: (deriv-rebranding) to make the content section reusable .
 
@@ -116,7 +117,10 @@ const DHero = () => {
             <StyledContainer jc="flex-start">
                 <ContentWrapperStyle is_rtl={is_rtl}>
                     <Content>
-                        <StyledTradingLogin src={DerivGOLogo} />
+                        <StyledTradingLogin
+                            src={DerivGOLogo}
+                            alt={localize('_t_Deriv Go logo_t_')}
+                        />
                         <CommonHeaderSection
                             title="_t_A trading platform for on-the-go traders_t_"
                             title_font_size={`${is_mobile ? 32 : 64}px`}

src/pages/derivx/_hero.tsx

@@ -132,7 +132,7 @@ const DCommonBanner = () => {
             <StyledContainer jc="flex-start">
                 <ContentWrapperStyle is_rtl={is_rtl}>
                     <Content>
-                        <StyledTradingLogin src={DerivXBannerLogo} />
+                        <StyledTradingLogin src={DerivXBannerLogo} alt="Deriv X logo" />
                         <CommonHeaderSection
                             title="_t_The trading platform to fit your style_t_"
                             title_font_size={`${is_mobile ? 32 : 64}px`}

src/pages/dmt5/_download-app.tsx

@@ -112,7 +112,7 @@ const DerivMT5GetApp = () => {
                         margin_title="0 0 18px"
                     />
                     <Flex jc="stretch" ai="flex-start" height="auto">
-                        <StyledInfoIcon src={InfoIcon} />
+                        <StyledInfoIcon src={InfoIcon} alt="Info icon" />
                         <InfoText>
                             <Localize
                                 translate_text="_t_For mobile app sign-ups, set the broker code to <0>Deriv Holdings (Guernsey) Limited.<0>_t_"

src/pages/help-centre/components/_questions-category.tsx

@@ -83,9 +83,11 @@ const QuestionsCategory = ({ data, topic_number }: TQuestionsCategory) => {
                 {questions_to_show.map(({ question, label }) => {
                     const to = convertToHash(getUntranslatedCategory(category), label, platform)
                     return (
-                        <Link key={label} to={to} onClick={handleLinkClick}>
-                            <Localize translate_text={question} />
-                        </Link>
+                        <li key={label}>
+                            <Link to={to} onClick={handleLinkClick}>
+                                <Localize translate_text={question} />
+                            </Link>
+                        </li>
                     )
                 })}
             </StyledList>