Skip to content

Commit

Permalink
chore: add note about hidden input
Browse files Browse the repository at this point in the history
  • Loading branch information
olavis committed Aug 30, 2023
1 parent a109f03 commit b5527b0
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions src/features/FileUploader/FileUploader.styled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@ import { Typography } from '@equinor/eds-core-react'
import styled from 'styled-components'
import { spacings } from '../../tokens/spacings'

/*
Note: Hiding the input element because it is ugly,
difficult to style and inconsistent in design
across browsers. It can be activated by clicking the label,
so we style the label like a styled link Typography, so
the user will know to interact with it to upload files.
opacity is used to hide the input, because assistive
tech interprets visibility: hidden or display: none
to mean that the file input isn't interactive
*/

const FileUpload = styled.label`
display: flex;
align-items: center;
Expand Down

0 comments on commit b5527b0

Please sign in to comment.