moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fix-anchor-used-as-button' into 'main' 

Fix warning about anchor

See merge request soapbox-pub/soapbox!3184
This commit is contained in:
Alex Gleason 2024-11-11 14:53:32 +00:00
parent 8a4e85010d 2222271550
commit 6be7209cbc
9 changed files with 94 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/autosuggest-input.tsx
View File

@ -233,7 +233,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
}
return menu.map((item, i) => (
<a
<a // eslint-disable-line jsx-a11y/anchor-is-valid
className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
href='#'
role='button'

12
src/components/sidebar-menu.tsx
View File

@ -147,11 +147,13 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
};
const renderAccount = (account: AccountEntity) => (
<a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
<div className='pointer-events-none'>
<Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
</div>
</a>
<Link to={'/'} className='inline-flex'>
<button className='!block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleSwitchAccount(account)} key={account.id}>
<div className='pointer-events-none max-w-[288px]'>
<Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
</div>
</button>
</Link>
);
useEffect(() => {

22
src/features/about/index.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useParams } from 'react-router-dom';
import { Link, useParams } from 'react-router-dom';
import { fetchAboutPage } from 'soapbox/actions/about.ts';
import { Navlinks } from 'soapbox/components/navlinks.tsx';
@ -44,18 +44,22 @@ const AboutPage: React.FC = () => {
{' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
<ul className='inline list-none p-0'>
<li className="inline after:content-['_·_']">
<a href='#' onClick={() => setLocale(defaultLocale)}>
{/* @ts-ignore */}
{languages[defaultLocale] || defaultLocale}
</a>
<Link to={'/'} className='inline-flex'>
<button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(defaultLocale)}>
{/* @ts-ignore */}
{languages[defaultLocale] || defaultLocale}
</button>
</Link>
</li>
{
pageLocales?.map(locale => (
<li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
<a href='#' onClick={() => setLocale(locale)}>
{/* @ts-ignore */}
{languages[locale] || locale}
</a>
<Link to={'/'} className='inline-flex'>
<button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(locale)}>
{/* @ts-ignore */}
{languages[locale] || locale}
</button>
</Link>
</li>
))
}

13
src/features/backups/index.tsx
View File

@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
import { FormattedDate, defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { fetchBackups, createBackup } from 'soapbox/actions/backups.ts';
import Button from 'soapbox/components/ui/button.tsx';
@ -86,11 +87,13 @@ const Backups = () => {
<Card variant='rounded' size='lg'>
{intl.formatMessage(messages.emptyMessage, {
action: (
<a href='#' onClick={handleCreateBackup}>
<Text tag='span' theme='primary' size='sm' className='hover:underline'>
{intl.formatMessage(messages.emptyMessageAction)}
</Text>
</a>
<Link to={'/'} className='inline-flex'>
<button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleCreateBackup}>
<Text tag='span' theme='primary' size='sm' className='hover:underline'>
{intl.formatMessage(messages.emptyMessageAction)}
</Text>
</button>
</Link>
),
})}
</Card>

39
src/features/compose/components/reply-mentions.tsx
View File

@ -1,5 +1,6 @@
import { useCallback } from 'react';
import { FormattedList, FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { openModal } from 'soapbox/actions/modals.ts';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
@ -33,7 +34,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
const parentTo = status && statusToMentionsAccountIdsArray(status, account!);
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
dispatch(openModal('REPLY_MENTIONS', {
@ -47,19 +48,21 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
if (to.size === 0) {
return (
<a href='#' className='reply-mentions' onClick={handleClick}>
<FormattedMessage
id='reply_mentions.reply_empty'
defaultMessage='Replying to post'
/>
</a>
<Link to={'/'} className='inline-flex'>
<button className='mb-1 cursor-pointer space-x-2 !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
<FormattedMessage
id='reply_mentions.reply_empty'
defaultMessage='Replying to post'
/>
</button>
</Link>
);
}
const accounts = to.slice(0, 2).map((acct: string) => {
const username = acct.split('@')[0];
return (
<span className='reply-mentions__account'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
<span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
@{shortenNostr(username)}
</span>
);
@ -72,15 +75,17 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
}
return (
<a href='#' className='reply-mentions' onClick={handleClick}>
<FormattedMessage
id='reply_mentions.reply'
defaultMessage='Replying to {accounts}'
values={{
accounts: <FormattedList type='conjunction' value={accounts} />,
}}
/>
</a>
<Link to={'/'} className='inline-flex'>
<button className='mb-1 cursor-pointer space-x-2 !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent focus:ring-offset-0 dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
<FormattedMessage
id='reply_mentions.reply'
defaultMessage='Replying to {accounts}'
values={{
accounts: <FormattedList type='conjunction' value={accounts} />,
}}
/>
</button>
</Link>
);
};

13
src/features/crypto-donate/components/crypto-address.tsx
View File

@ -1,11 +1,12 @@
import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
import { Link } from 'react-router-dom';
import { openModal } from 'soapbox/actions/modals.ts';
import CopyableInput from 'soapbox/components/copyable-input.tsx';
import HStack from 'soapbox/components/ui/hstack.tsx';
import Icon from 'soapbox/components/ui/icon.tsx';
import Stack from 'soapbox/components/ui/stack.tsx';
import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
import Text from 'soapbox/components/ui/text.tsx';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
@ -45,13 +46,15 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
<Text weight='bold'>{title || ticker.toUpperCase()}</Text>
<HStack alignItems='center' className='ml-auto'>
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
<Icon src={qrcodeIcon} size={20} />
</a>
<Link to={'/'} className='inline-flex'>
<button className='!ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' onClick={handleModalClick}>
<SvgIcon src={qrcodeIcon} size={20} />
</button>
</Link>
{explorerUrl && (
<a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
<Icon src={externalLinkIcon} size={20} />
<SvgIcon src={externalLinkIcon} size={20} />
</a>
)}
</HStack>

33
src/features/event/components/event-header.tsx
View File

@ -35,7 +35,6 @@ import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions
import { initMuteModal } from 'soapbox/actions/mutes.ts';
import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
import { deleteStatus } from 'soapbox/actions/statuses.ts';
import Icon from 'soapbox/components/icon.tsx';
import StillImage from 'soapbox/components/still-image.tsx';
import Button from 'soapbox/components/ui/button.tsx';
import HStack from 'soapbox/components/ui/hstack.tsx';
@ -451,7 +450,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
<Stack space={1}>
<HStack alignItems='center' space={2}>
<Icon src={flag3Icon} />
<SvgIcon src={flag3Icon} />
<span>
<FormattedMessage
id='event.organized_by'
@ -471,26 +470,28 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
</HStack>
<HStack alignItems='center' space={2}>
<Icon src={usersIcon} />
<a href='#' className='hover:underline' onClick={handleParticipantsClick}>
<span>
<FormattedMessage
id='event.participants'
defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
values={{
rawCount: event.participants_count || 0,
count: shortNumberFormat(event.participants_count || 0),
}}
/>
</span>
</a>
<SvgIcon src={usersIcon} />
<Link to={'/'} className='inline-flex'>
<button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleParticipantsClick}>
<span>
<FormattedMessage
id='event.participants'
defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
values={{
rawCount: event.participants_count || 0,
count: shortNumberFormat(event.participants_count || 0),
}}
/>
</span>
</button>
</Link>
</HStack>
<EventDate status={status} />
{event.location && (
<HStack alignItems='center' space={2}>
<Icon src={mapPinIcon} />
<SvgIcon src={mapPinIcon} />
<span>
{event.location.get('name')}
</span>

11
src/features/event/event-information.tsx
View File

@ -3,6 +3,7 @@ import linkIcon from '@tabler/icons/outline/link.svg';
import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
import { Fragment, useCallback, useEffect, useState } from 'react';
import { FormattedDate, FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { openModal } from 'soapbox/actions/modals.ts';
import { fetchStatus } from 'soapbox/actions/statuses.ts';
@ -56,7 +57,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
setShowMedia(!showMedia);
};
const handleShowMap: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
const handleShowMap: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();
dispatch(openModal('EVENT_MAP', {
@ -98,9 +99,11 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
text.push(
<Fragment key='event-map'>
<br />
<a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</a>
<Link to={'/'} className='inline-flex'>
<button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleShowMap}>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</button>
</Link>
</Fragment>,
);
}

19
src/features/federation-restrictions/components/restricted-instance.tsx
View File

@ -2,8 +2,9 @@ import caretDownIcon from '@tabler/icons/outline/caret-down.svg';
import caretRightIcon from '@tabler/icons/outline/caret-right.svg';
import clsx from 'clsx';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import Icon from 'soapbox/components/icon.tsx';
import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
@ -20,19 +21,21 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
const [expanded, setExpanded] = useState(false);
const toggleExpanded: React.MouseEventHandler<HTMLAnchorElement> = e => {
const toggleExpanded: React.MouseEventHandler<HTMLButtonElement> = e => {
setExpanded((value) => !value);
e.preventDefault();
};
return (
<div>
<a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
<Icon src={expanded ? caretDownIcon : caretRightIcon} />
<div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
{remoteInstance.host}
</div>
</a>
<Link to={'/'} className='inline-flex'>
<button className='flex items-center gap-1 space-x-2 !border-none !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={toggleExpanded}>
<SvgIcon src={expanded ? caretDownIcon : caretRightIcon} />
<div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
{remoteInstance.host}
</div>
</button>
</Link>
<div
className={clsx({
'h-0 overflow-hidden': !expanded,