Anna Yeddi
7374c54201
This patch makes the time picker panel accessible by implementing proper ARIA roles and properties, and ensuring the navigation with keyboard and assistive technology is working as expected. Accessibility improvements: - Time picker panel uses dialog role with an informative accessible name (when shown alone, as a timepicker) - Spinbuttons and their increment/decrement controls on the timepicker have accessible names - All the timepicker's ARIA labels are localized - L10n files for datetimepickers are merged and migration script provided for the existing datepicker strings - Datetimepicker dialog markup is adjusted to accommodate both date and time pickers when they are visible together Interaction improvements: - Time picker panel respects prefers-reduced-motion preference - Keyboard focus is managed on the timepicker's initialization and during interaction - Timepicker handles `Space`/`Enter` and `Escape` keys as expected - Keyboard events between the date and time picker sections in a combined datetimepicker panel are isolated Tests are added for time picker panel and `fail-if` expectation is removed from the timepicker mochitest manifest. Differential Revision: https://phabricator.services.mozilla.com/D167463
77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
|
|
|
|
<!DOCTYPE html [ <!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
%htmlDTD; ]>
|
|
<html
|
|
xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
|
>
|
|
<head>
|
|
<meta http-equiv="Content-Security-Policy" content="default-src chrome:;" />
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://global/skin/datetimeinputpickers.css"
|
|
/>
|
|
<link rel="localization" href="toolkit/global/datetimepicker.ftl" />
|
|
<script src="chrome://global/content/bindings/datekeeper.js"></script>
|
|
<script src="chrome://global/content/bindings/spinner.js"></script>
|
|
<script src="chrome://global/content/bindings/calendar.js"></script>
|
|
<script src="chrome://global/content/bindings/datepicker.js"></script>
|
|
|
|
<script src="chrome://global/content/bindings/timekeeper.js"></script>
|
|
<script src="chrome://global/content/bindings/timepicker.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="datetime-picker">
|
|
<div
|
|
id="date-picker"
|
|
hidden="true"
|
|
class="picker"
|
|
role="dialog"
|
|
data-l10n-id="date-picker-label"
|
|
aria-modal="true"
|
|
>
|
|
<div class="calendar-container">
|
|
<div class="month-year-nav" data-l10n-id="date-spinner-label">
|
|
<button class="prev" data-l10n-id="date-picker-previous" />
|
|
<div class="month-year-container">
|
|
<button
|
|
class="month-year"
|
|
id="month-year-label"
|
|
aria-live="polite"
|
|
/>
|
|
</div>
|
|
<button class="next" data-l10n-id="date-picker-next" />
|
|
<div class="month-year-view"></div>
|
|
</div>
|
|
<table role="grid" aria-labelledby="month-year-label">
|
|
<thead class="week-header"></thead>
|
|
<tbody class="days-view"></tbody>
|
|
</table>
|
|
</div>
|
|
<button id="clear-button" data-l10n-id="date-picker-clear-button" />
|
|
</div>
|
|
|
|
<div
|
|
id="time-picker"
|
|
hidden="true"
|
|
class="picker"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
data-l10n-id="time-picker-label"
|
|
></div>
|
|
</div>
|
|
<template id="spinner-template">
|
|
<div class="spinner-container">
|
|
<button class="prev" tabindex="-1" />
|
|
<div class="spinner"></div>
|
|
<button class="next" tabindex="-1" />
|
|
</div>
|
|
</template>
|
|
</body>
|
|
</html>
|