Date Picker

The calendar view should use button semantics for days, with grid semantics for keyboard navigation and announcements.

<div class="tng-calendar">
  <div class="tng-calendar-header">
    <button class="tng-icon-button is-ghost">
      <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
    </button>
    <h2 class="tng-text-body">March 2026</h2>
    <button class="tng-icon-button is-ghost">
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </button>
  </div>
  <div class="tng-calendar-weekdays">
    <div>Mon</div>
    <div>Tue</div>
    <div>Wed</div>
    <div>Thu</div>
    <div>Fri</div>
    <div>Sat</div>
    <div>Sun</div>
  </div>
  <div class="tng-calendar-week">
    <button disabled>23</button>
    <button disabled>24</button>
    <button disabled>25</button>
    <button disabled>26</button>
    <button disabled>27</button>
    <button disabled>28</button>
    <button>1</button>
  </div>
  <div class="tng-calendar-week">
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
  </div>
  <div class="tng-calendar-week">
    <button>9</button>
    <button>10</button>
    <button class="is-selected">11</button>
    <button>12</button>
    <button>13</button>
    <button>14</button>
    <button>15</button>
  </div>
  <div class="tng-calendar-week">
    <button>16</button>
    <button>17</button>
    <button>18</button>
    <button>19</button>
    <button>20</button>
    <button>21</button>
    <button>22</button>
  </div>
  <div class="tng-calendar-week">
    <button>23</button>
    <button>24</button>
    <button>25</button>
    <button class="is-today">26</button>
    <button>27</button>
    <button>28</button>
    <button>29</button>
  </div>
  <div class="tng-calendar-week">
    <button>30</button>
    <button>31</button>
    <button disabled>1</button>
    <button disabled>2</button>
    <button disabled>3</button>
    <button disabled>4</button>
    <button disabled>5</button>
  </div>
</div>

March 2026

Mon

Tue

Wed

Thu

Fri

Sat

Sun

23 24 25 26 27 28 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 1 2 3 4 5

Recipe

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Choose a date

DD/MM/YYYY

March 2026

Mon

Tue

Wed

Thu

Fri

Sat

Sun

23

24

25

26

27

28

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

1

2

3

4

5

source code

Accessibility

The date picker follows the WAI-ARIA Date Picker Dialog pattern.

Roles and attributes

Element	Attributes
Trigger button	aria-haspopup="dialog", aria-expanded, aria-controls, and an accessible name (for example, aria-label="Choose date").
Popup container	role="dialog", clear labeling via aria-label or aria-labelledby.
Calendar grid	role="grid" and aria-labelledby pointing to the visible month/year heading.
Week rows	role="row"
Day cells / button	Cell wrapper with role="gridcell"; day as a native <button>. Use aria-selected="true" for the chosen date and aria-current="date" for today.

Keyboard interaction

Key	Action
Enter / Space	Open picker from trigger, or select focused day
Arrow keys	Move day focus in the calendar grid
Home / End	Move focus to first / last focusable day
Escape	Close the popup and return focus to the trigger button

Announcements

• Update the trigger label to the selected date after selection.
• Keep month/year text connected to the grid with aria-labelledby so context is announced while navigating.
• Ensure disabled days are not focusable and keep native disabled semantics. DatePickerRecipe