댓글 검색 목록

[기타] 듀엣 날짜 선택기(Duet Date Picker)

페이지 정보

작성자 운영자 작성일 20-10-09 21:52 조회 785 댓글 0

Duet Date Picker는 Duet Design System의 액세스 가능한 날짜 선택기의 오픈 소스 버전입니다.

https://duetds.github.io/date-picker/에서 라이브 예제를 사용해보십시오.

https://github.com/duetds/date-picker

https://www.duetds.com/

Duet Date Picker는 Duet Design System의 액세스 가능한 날짜 선택기의 오픈 소스 버전입니다. Duet Date Picker는 모든 JavaScript 프레임 워크 또는 프레임 워크에서 구현 및 사용할 수 있습니다. 표준화 된 웹 플랫폼 API 및 웹 구성 요소를 사용하여 이를 수행합니다.

왜 또 다른 날짜 선택 도구입니까? Duet Design System을 작업하는 우리 팀은 접근성에 대한 모든 요구 사항 (WCAG 2.1 지원)을 모두 확인할 수 있는 기존 날짜 선택기를 찾을 수 없었기 때문에 하나를 만들고 오픈 소스로 결정했습니다. 다른 사람들도 이 작업으로 혜택을 볼 수 있습니다.

Duet Date Picker에는 최소 및 최대 허용 날짜를 설정할 수 있는 기능이 내장되어 있습니다. 이러한 설정은 필요에 따라 결합하거나 단독으로 사용할 수 있습니다. 날짜 값은 IS0-8601 형식 (YYYY-MM-DD)으로 전달되어야 합니다.

Duet Date Picker

Live demo

https://duetds.github.io/date-picker/

Browser support

Google Chrome 61+
Apple Safari 10+
Firefox 63+
Microsoft Edge 17+
Opera 63+
Samsung Browser 8.2+
Internet Explorer 11

스크린 리더 지원

다음 스크린 리더에 대한 지원을 제공합니다. 지원 수준 및 구현과 관련된 가능한 문제에 대한 자세한 내용은 포함 된 접근성 감사를 참조하십시오.

VoiceOver on macOS and iOS
TalkBack on Android
NVDA on Windows
Jaws on Windows

키보드 지원

Duet Date Picker의 키보드 지원은 예를 들어 몇 가지 작은 예외를 제외하고 W3C Date Picker Dialog 예제를 밀접하게 따르도록 구축되었습니다. iOS VoiceOver 및 Android TalkBack을 더 잘 지원합니다.

날짜 선택 버튼

Space, Enter : 날짜 선택기 대화 상자를 열고 대화 상자의 첫 번째 선택 메뉴로 초점을 이동합니다.

날짜 선택기 대화 상자

Esc: 날짜 선택기 대화 상자를 닫고 초점을 "날짜 선택"단추로 다시 이동합니다.
Tab: 대화 상자의 다음 요소로 초점을 이동합니다. 캘린더는 role = "grid"를 사용하기 때문에 캘린더 그리드의 버튼 하나만 탭 순서에 있습니다. 또한 포커스가 마지막 포커스 가능한 요소에 있는 경우 포커스는 날짜 선택 대화 상자 내의 첫 번째 포커스 가능한 요소로 다시 이동됩니다.
Shift + Tab: 위와 같지만 역순입니다.

날짜 선택 대화 상자 : 월 / 년 버튼

Space, Enter : 표시되는 월 및 / 또는 연도를 변경합니다.

Date picker dialog: Date grid

Space, Enter: 날짜를 선택하고 대화 상자를 닫은 다음 포커스를 "Choose Date"버튼으로 다시 이동합니다. 또한 선택한 날짜로 Duet Date Picker 입력 값을 업데이트하고 선택한 날짜를 "Choose Date"단추 레이블에 추가합니다.
Arrow up: 지난주의 같은 날로 초점을 이동합니다.
Arrow down: 다음주의 같은 날로 초점을 이동합니다.
Arrow right: 다음 날로 초점을 이동합니다.
Arrow left: 전날로 초점을 이동합니다.
Home: 현재 주의 첫 번째 날 (예 : 월요일)로 초점을 이동합니다.
End: 현재 주의 마지막 날 (예 : 일요일)로 초점을 이동합니다.
Page Up: 날짜 그리드를 이전 달로 변경하고 같은 주의 같은 날에 포커스를 설정합니다.
Shift + Page Up: 날짜 그리드를 전년도로 변경하고 같은 주의 같은 요일에 초점을 설정합니다.
Page Down: 날짜 그리드를 다음 달로 변경하고 같은 주의 같은 날에 초점을 맞춥니 다.
Shift + Page Down: 날짜 그리드를 내년으로 변경하고 같은 주의 같은 날에 초점을 맞춥니 다.

날짜 선택기 대화 상자 : 닫기 버튼

Space, Enter : 대화 상자를 닫고 초점을 "날짜 선택"버튼으로 이동하지만 입력 한 날짜는 업데이트하지 않습니다.

시작하기

Duet Date Picker를 JavaScript 프레임 워크없이 프로젝트에 통합하는 것은 매우 간단합니다. 간단한 HTML 페이지에서 작업하는 경우 <head>에 다음 태그를 추가하여 Duet Date Picker를 즉시 사용할 수 있습니다.

<script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.0.4/dist/duet/duet.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.0.4/dist/duet/duet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/date-picker@1.0.4/dist/duet/themes/default.css" />

포함되면 Duet Date Picker를 다른 일반 HTML 요소와 마찬가지로 마크 업에 사용할 수 있습니다.

<label for="date">Choose a date</label>
<duet-date-picker identifier="date"></duet-date-picker>

참고 : CSS 파일 가져 오기는 선택 사항이며 기본 테마를 사용하려는 경우에만 필요합니다. 자세한 내용은 테마 섹션을 참조하십시오. 또한 위의 방법이 가장 쉽고 빠른 시작 방법이지만 NPM을 통해 Duet Date Picker를 설치할 수도 있습니다. 설치 지침을 보려면 아래로 스크롤 하십시오.