fix(home): focus outlines and decorations
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 33s

This commit is contained in:
enes 2024-08-09 12:00:36 +02:00
parent 15aa98e9db
commit 72d0e065ea
4 changed files with 27 additions and 12 deletions

View File

@ -56,7 +56,9 @@ a {
text-decoration: none; text-decoration: none;
text-decoration-color: inherit; text-decoration-color: inherit;
transition: ease 0.4s; transition: ease 0.4s;
outline: none;
&:focus,
&:hover { &:hover {
color: $primary-light; color: $primary-light;
text-decoration: underline; text-decoration: underline;

View File

@ -136,7 +136,7 @@ export const HomePage = () => {
const [sort, setSort] = useState<Sort>('desc') const [sort, setSort] = useState<Sort>('desc')
return ( return (
<div {...getRootProps()}> <div {...getRootProps()} tabIndex={-1}>
<Container className={styles.container}> <Container className={styles.container}>
<div className={styles.header}> <div className={styles.header}>
<div className={styles.filters}> <div className={styles.filters}>
@ -212,26 +212,27 @@ export const HomePage = () => {
borderBottomLeftRadius: 0 borderBottomLeftRadius: 0
}} }}
variant={'contained'} variant={'contained'}
aria-label="Submit Search" aria-label="submit search"
> >
<FontAwesomeIcon icon={faSearch} /> <FontAwesomeIcon icon={faSearch} />
</Button> </Button>
</form> </form>
</div> </div>
</div> </div>
<div <button
className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`} className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
tabIndex={0}
onClick={open} onClick={open}
type="button"
aria-label="upload files"
> >
<div>
<input {...getInputProps()} /> <input {...getInputProps()} />
{isDragActive ? ( {isDragActive ? (
<p>Drop the files here ...</p> <p>Drop the files here ...</p>
) : ( ) : (
<p>Click or drag files to upload!</p> <p>Click or drag files to upload!</p>
)} )}
</div> </button>
</div>
<div className={styles.submissions}> <div className={styles.submissions}>
{Object.keys(parsedSigits) {Object.keys(parsedSigits)
.filter((s) => { .filter((s) => {

View File

@ -76,6 +76,7 @@
inset: 15px; inset: 15px;
} }
&:focus,
&.isDragActive, &.isDragActive,
&:hover { &:hover {
&::before { &::before {
@ -83,6 +84,14 @@
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
} }
} }
// Override button styles
padding: 0;
border: none;
outline: none;
letter-spacing: 1px;
font-weight: 500;
font-family: inherit;
} }
.submissions { .submissions {

View File

@ -33,6 +33,9 @@ export const theme = extendTheme({
boxShadow: 'unset', boxShadow: 'unset',
lineHeight: 'inherit', lineHeight: 'inherit',
borderRadius: '4px', borderRadius: '4px',
':focus': {
textDecoration: 'none'
},
':hover': { ':hover': {
background: 'var(--primary-light)', background: 'var(--primary-light)',
boxShadow: 'unset' boxShadow: 'unset'