view
html
1
2
3
4
5
6
<div class="c-attachment" data-js="attachFile"> <!-- [D] 파일 첨부시 is-loaded 클래스 생성 -->
<input type="file" class="c-attachment__handler" data-js="attachFile__handler" title="파일첨부">
<span class="c-attachment__button" aria-hidden="true">파일 선택</span>
<div class="c-attachment__text" aria-hidden="true" data-js="attachFile__render">선택된 파일 없음</div>
<button type="button" class="c-attachment__delete" data-js="attachFile__delete">첨부파일 삭제</button>
</div>
Screen Reader 음성 출력
- Sense Reader
선택된 파일 없음, 파일 선택: 선택된 파일 없음 버튼
…
첨부파일 삭제 버튼 - NVDA
선택된 파일 없음, 파일 선택 버튼 파일첨부
…
첨부파일 삭제 버튼 - VoiceOver
파일 선택, 선택한 파일 없음, 버튼, 파일첨부
…
첨부파일 삭제 버튼 - TalkBack
선택된 파일 없음, 파일 선택 버튼, 파일첨부
…
첨부파일 삭제 버튼
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.c-attachment {
position: relative;
width: 100%;
font-size: 0;
&__handler {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100px;
height: 30px;
}
&__button {
display: inline-block;
width: 100px;
height: 30px;
border: 1px solid #ddd;
background-color: #fff;
font-size: 13px;
text-align: center;
line-height: 28px;
}
&__text {
display: inline-block;
margin-left: 10px;
font-size: 13px;
line-height: 30px;
}
&__delete {
display: none;
position: absolute;
top: 0;
right: 0;
}
&.is-loaded &__delete {
display: block;
}
}