mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make DeleteServerButton more accessible

Browse source
This commit is contained in:
Alejandro Celaya 2023-09-02 10:48:02 +02:00
parent b20698ecb2
commit 1ef96662a3
4 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/index.scss
View file

@ -2,7 +2,3 @@
@import 'node_modules/bootstrap/scss/bootstrap.scss'; @import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overwrites @import 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overwrites
@import 'node_modules/@shlinkio/shlink-web-component/dist/index'; @import 'node_modules/@shlinkio/shlink-web-component/dist/index';
* {
outline: none !important;
}

5
src/servers/DeleteServerButton.tsx
View file

@ -1,6 +1,7 @@
import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons'; import { faMinusCircle as deleteIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useToggle } from '@shlinkio/shlink-frontend-kit'; import { useToggle } from '@shlinkio/shlink-frontend-kit';
import classNames from 'classnames';
import type { FC, PropsWithChildren } from 'react'; import type { FC, PropsWithChildren } from 'react';
import type { ServerWithId } from './data'; import type { ServerWithId } from './data';
import type { DeleteServerModalProps } from './DeleteServerModal'; import type { DeleteServerModalProps } from './DeleteServerModal';
@ -18,10 +19,10 @@ export const DeleteServerButton = (DeleteServerModal: FC<DeleteServerModalProps>
return ( return (
<> <>
<span className={className} onPointerDown={showModal}> <button type="button" className={classNames(className, 'p-0 bg-transparent border-0')} onClick={showModal}>
{!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />} {!children && <FontAwesomeIcon fixedWidth icon={deleteIcon} />}
<span className={textClassName}>{children ?? 'Remove this server'}</span> <span className={textClassName}>{children ?? 'Remove this server'}</span>
</span> </button>
<DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} /> <DeleteServerModal server={server} isOpen={isModalOpen} toggle={hideModal} />
</> </>

2
src/servers/helpers/ServerError.scss
View file

@ -9,7 +9,7 @@
.server-error__delete-btn { .server-error__delete-btn {
color: $dangerColor; color: $dangerColor;
cursor: pointer; font-weight: inherit;
} }
.server-error__delete-btn:hover { .server-error__delete-btn:hover {

28
test/servers/__snapshots__/DeleteServerButton.test.tsx.snap
View file

@ -1,37 +1,49 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<DeleteServerButton /> > renders expected content 1`] = ` exports[`<DeleteServerButton /> > renders expected content 1`] = `
<span> <button
class="p-0 bg-transparent border-0"
type="button"
>
<span <span
class="button" class="button"
> >
Foo bar Foo bar
</span> </span>
</span> </button>
`; `;
exports[`<DeleteServerButton /> > renders expected content 2`] = ` exports[`<DeleteServerButton /> > renders expected content 2`] = `
<span> <button
class="p-0 bg-transparent border-0"
type="button"
>
<span <span
class="button" class="button"
> >
baz baz
</span> </span>
</span> </button>
`; `;
exports[`<DeleteServerButton /> > renders expected content 3`] = ` exports[`<DeleteServerButton /> > renders expected content 3`] = `
<span> <button
class="p-0 bg-transparent border-0"
type="button"
>
<span <span
class="button" class="button"
> >
something something
</span> </span>
</span> </button>
`; `;
exports[`<DeleteServerButton /> > renders expected content 4`] = ` exports[`<DeleteServerButton /> > renders expected content 4`] = `
<span> <button
class="p-0 bg-transparent border-0"
type="button"
>
<svg <svg
aria-hidden="true" aria-hidden="true"
class="svg-inline--fa fa-circle-minus fa-fw " class="svg-inline--fa fa-circle-minus fa-fw "
@ -52,5 +64,5 @@ exports[`<DeleteServerButton /> > renders expected content 4`] = `
> >
Remove this server Remove this server
</span> </span>
</span> </button>
`; `;