Skip to content

Datetime widget a11y #6808

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Wagner3UB wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Datetime widget a11y #6808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
de4ba08
fix: added ariaLabel and set a defaultMessage to the component Single…
Wagner3UB Mar 4, 2025
9776e87
chore: 6808.bugfix
Wagner3UB Mar 4, 2025
79ffd95
Update packages/volto/news/6808.bugfix
Wagner3UB Mar 4, 2025
d6e8cdf
Merge branch 'main' into datetime-widget-a11y-v18
Wagner3UB Apr 8, 2025
b86b8d9
chore: snapshots
Wagner3UB Apr 8, 2025
1980e68
chore: translation
Wagner3UB Apr 8, 2025
1168529
Merge branch 'main' into datetime-widget-a11y-v18
pnicolli Apr 10, 2025
6a50ef0
Merge branch 'main' into datetime-widget-a11y-v18
pnicolli Apr 15, 2025
968ce14
Merge branch 'main' into datetime-widget-a11y-v18
pnicolli May 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/volto/locales/ca/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4887,6 +4887,11 @@ msgstr ""
msgid "private"
msgstr "privat"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Navega cap endavant per interactuar amb el calendari i seleccionar una data. Prem la tecla de signe d’interrogació per obtenir les dreceres de teclat per canviar les dates."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/de/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4886,6 +4886,11 @@ msgstr "Wählen Sie ein vorhandenes Bild"
msgid "private"
msgstr "Privat"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Navigieren Sie vorwärts, um mit dem Kalender zu interagieren und ein Datum auszuwählen. Drücken Sie die Fragezeichen-Taste, um die Tastaturkürzel zum Ändern von Daten zu erhalten"

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/en/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4881,6 +4881,11 @@ msgstr ""
msgid "private"
msgstr ""

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr ""

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/es/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4888,6 +4888,11 @@ msgstr ""
msgid "private"
msgstr "Privado"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Navega hacia adelante para interactuar con el calendario y seleccionar una fecha. Presiona la tecla de interrogación para obtener los atajos de teclado para cambiar las fechas."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/eu/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4888,6 +4888,11 @@ msgstr ""
msgid "private"
msgstr "Pribatua"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Aurrera nabigatu egutegiarekin elkarreragiteko eta data bat hautatzeko. Sakatu galdera ikurra data aldatzeko teklatuko lasterbideak lortzekos"

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/fi/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4886,6 +4886,11 @@ msgstr ""
msgid "private"
msgstr "yksityinen"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Siirry eteenpäin ollaksesi vuorovaikutuksessa kalenterin kanssa ja valitaksesi päivämäärän. Paina kysymysmerkkinäppäintä saadaksesi näppäinoikotiet päivämäärien muuttamiseen."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/fr/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4888,6 +4888,11 @@ msgstr ""
msgid "private"
msgstr "Privé"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Naviguez vers l’avant pour interagir avec le calendrier et sélectionner une date. Appuyez sur la touche point d’interrogation pour obtenir les raccourcis clavier permettant de changer les dates."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/hi/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4881,6 +4881,11 @@ msgstr ""
msgid "private"
msgstr "निजी"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "कैलेंडर के साथ इंटरैक्ट करने और तारीख चुनने के लिए आगे बढ़ें। तारीख बदलने के लिए कीबोर्ड शॉर्टकट देखने के लिए प्रश्नवाचक चिह्न कुंजी दबाएं।"

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/it/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4881,6 +4881,11 @@ msgstr "Seleziona un'immagine esistente"
msgid "private"
msgstr "Privato"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Naviga in avanti per interagire con il calendario e selezionare una data. Premi il tasto del punto interrogativo per ottenere le scorciatoie da tastiera per cambiare le date."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/ja/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4886,6 +4886,11 @@ msgstr ""
msgid "private"
msgstr "非表示"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "カレンダーを操作して日付を選択するには、前に進んでください。日付を変更するためのキーボードショートカットを表示するには、クエスチョンマークキーを押してください"

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/nl/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4885,6 +4885,11 @@ msgstr "Kies een bestaande afbeelding"
msgid "private"
msgstr "Privé"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Navigeer vooruit om met de kalender te interageren en een datum te selecteren. Druk op de vraagteken-toets om de sneltoetsen voor het wijzigen van datums te bekijken"

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/pt/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4886,6 +4886,11 @@ msgstr ""
msgid "private"
msgstr ""

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Navegue para a frente para interagir com o calendário e selecionar uma data. Pressione a tecla de interrogação para ver os atalhos de teclado para alterar as datas."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/pt_BR/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4887,6 +4887,11 @@ msgstr "Selecione uma imagem existente"
msgid "private"
msgstr "Privado"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Navegue para frente para interagir com o calendário e selecionar uma data. Pressione a tecla de interrogação para ver os atalhos de teclado para alterar as datas."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/ro/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4887,6 +4887,11 @@ msgstr "Alegeți o imagine existentă"
msgid "private"
msgstr "privat"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Navigați înainte pentru a interacționa cu calendarul și a selecta o dată. Apăsați tasta semn de întrebare pentru a obține comenzile rapide de la tastatură pentru schimbarea datelor."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/ru/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4886,6 +4886,11 @@ msgstr "Выберите существующее изображение"
msgid "private"
msgstr "Приватный"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "Перейдите вперёд, чтобы взаимодействовать с календарём и выбрать дату. Нажмите клавишу с вопросительным знаком, чтобы узнать сочетания клавиш для изменения даты."

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/volto.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4883,6 +4883,11 @@ msgstr ""
msgid "private"
msgstr ""

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."

@stevepiercy stevepiercy Mar 4, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand. How do I "navigate forward"? Is that a mouse click, tap, or keyboard shortcut?

@Wagner3UB Wagner3UB Mar 4, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @stevepiercy , I did not change the phrase, I just placed it inside our code to translate it into other languages. This message is read when we enter the date picker.
Screenshot 2025-03-04 alle 15 21 16

I can’t tell you what the logic behind it, it comes from the react-dates library: https://github.com/react-dates/react-dates/blob/master/src/defaultPhrases.js

@stevepiercy stevepiercy Mar 4, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the library we're using for a date picker? Sorry, I don't know.

See this line and its key.

https://github.com/react-dates/react-dates/blob/b7bad38dcff024d374ee98f972b55b3de9e61289/src/defaultPhrases.js#L26C7-L26C44

const keyboardForwardNavigationInstructions = 'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';

We also have existing messages for what appears to be the same thing.

It has a backward counterpart in the next line.

Move backward to switch to the previous month.

Screenshot 2025-03-04 at 1 22 03 PM

I assume that navigation messages should be more descriptive and only for the icon. If so, then I'd use something like the following messages.

  • back: Tap or left arrow key to navigate backward in the calendar. On a selected date, tap or enter or return key to pick it.
  • forward: Tap or right arrow key to navigate forward in the calendar. On a selected date, tap or enter or return key to pick it.
  • info: Tap or question mark key to reveal keyboard shortcuts. Tap the close or "X" icon or the esc key to hide keyboard shortcuts.

I'm not sure whether we've adopted "tap", "press", or "click" for that gesture to satisfy both desktop and mobile UIs. Another thing for the accessibility guide! I'm also not sure whether we do anything to the names of keys to make them more accessible, such as in MyST I would do the following.

{kbd}`Return`

#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr ""

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
5 changes: 5 additions & 0 deletions packages/volto/locales/zh_CN/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4887,6 +4887,11 @@ msgstr ""
msgid "private"
msgstr "保密"

#. Default: "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
#: components/manage/Widgets/DatetimeWidget
msgid "publicationDateMessage"
msgstr "向前导航以与日历交互并选择日期。按问号键可获取更改日期的键盘快捷键。向前导航以与日历交互并选择日期。按问号键可获取更改日期的键盘快捷键。"

#. Default: "Published"
#: components/manage/Contents/ContentsItem
msgid "published"
Expand Down
1 change: 1 addition & 0 deletions packages/volto/news/6808.bugfix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Improved accessibility for the `Datetime-Widget` component by adding an `aria-label` and a translation for the `screenReaderInputMessage`. @Wagner3UB
11 changes: 11 additions & 0 deletions packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ const messages = defineMessages({
id: 'Time',
defaultMessage: 'Time',
},
publicationDateMessage: {
id: 'publicationDateMessage',
defaultMessage:
'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.',
},
});

const PrevIcon = () => (
Expand Down Expand Up @@ -151,6 +156,10 @@ const DatetimeWidgetComponent = (props) => {
const datetime = getInternalValue();
const isDateOnly = getDateOnly();

const screenReaderInputMessage = intl.formatMessage(
messages.publicationDateMessage,
);

return (
<FormFieldWrapper {...props}>
<div className="date-time-widget-wrapper">
Expand All @@ -175,6 +184,8 @@ const DatetimeWidgetComponent = (props) => {
navNext={<NextIcon />}
id={`${id}-date`}
placeholder={intl.formatMessage(messages.date)}
ariaLabel={props.title}
screenReaderInputMessage={screenReaderInputMessage}
/>
</div>
{!isDateOnly && (
Expand Down
4 changes: 2 additions & 2 deletions packages/volto/src/components/manage/Widgets/__snapshots__/DatetimeWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ exports[`datetime widget converts UTC date and adapts to local datetime 1`] = `
>
<input
aria-describedby="DateInput__screen-reader-message-my-field-date"
aria-label="Date"
aria-label="My field"
autocomplete="off"
class="DateInput_input DateInput_input_1"
id="my-field-date"
Expand Down Expand Up @@ -154,7 +154,7 @@ exports[`renders a datetime widget component 1`] = `
>
<input
aria-describedby="DateInput__screen-reader-message-my-field-date"
aria-label="Date"
aria-label="My field"
autocomplete="off"
class="DateInput_input DateInput_input_1"
id="my-field-date"
Expand Down