User is unable to navigate through the calendar window using calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown). User finds difficulty to navigate the calendar if calendar shortcut keys not provided.
Test Environment:
OS: Windows 10 (1909 OS Build 18363.476))
Browser: Chrome Browser
Issue1: User is unable to navigate through the calendar window using calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown)
Actual Result:
User is unable to navigate through the calendar window using calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown) in the Date Picker.
When user press PageUp, PageDown keys page is getting scrolled instead of month changing in the calendar.
When user press Alt + PageUp, Alt + PageDown keys browser tab is getting changed instead of year changing in the calendar.
Observation: When user press 'Up, Down, Left & Right' keys page is getting scrolled instead of dates changing in the calendar.
Note 1: Observing that focus is not visible while navigating using keyboard TAB key and Calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown)
Note 2: Same issue is observed when screen reader enabled.
Expected Result:
User should be able to navigate through the calendar window using calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown) in the Date Picker, and user should be able to select the date.
When user press PageUp, PageDown keys in the calendar focus should move to the same day in the previous/ next month.
When user press Alt + PageUp, Alt + PageDown keys in the calendar focus should move to the same day in the previous/ next year month.
When user press 'Up, down' keys in the calendar focus should move to the previous/ next week
When user press Left, Right keys in the calendar focus should move to the previous/ next day.
Note: Focus should be clearly visible inside the Caledar Control while navigating uisng keyboard TAB key and calendar short cut keys(PageUp, PageDown, Alt + PageUp, Alt + PageDown).
Ensure That:
1.When screen reader enabled calendar shortcut keys should work.
2.After using the calendar shortcut keys screen reader should narrate the changed month and focused date information descriptively
Issue2: NVDA focus is not immediately moving to the ‘Previous/Next’ months button present in the calendar window, whle navigating using NVDA browse mode(Down arrow).
Actual Result:
NVDA focus is not immediately moving to the ‘Previous/Next’ months button after december 2019 present in the calendar window, while navigating using NVDA browse mode(Down arrow).
Ex: After pressing Down arrow from the Calendar Month ‘December 2019’, NVDA focus is not immediately moving to the ‘Previous/Next’ month buttons present in the calendar window, Focus is directly moved to the calendar Week Headers in the window.
Expected Result:
NVDA focus should move to the ‘Previous/Next’ months button after pressing down arrow key from December 2019 present in the calendar window, while navigating using NVDA browse mode(Down arrow).
Ex: After pressing Down arrow from the Calendar Month ‘December 2019’, NVDA focus should move to the ‘Previous/Next’ month buttons present in the calendar window.
Note:Ensure that when the focus is moved to the ‘Previous/Next’ month buttons, NVDA should narrate the Name and Role for that,and after invoking the buttons focus should be in the same interactive element.
Ex:When the Focus is on the ‘Previous’ month, NVDA should narrate as ‘Previous Month’ button.
Issue3: Screen Readers(NVDA,JAWS,Narrator) focus is moving twice to the ‘Previous/Next’ month buttons present in the calendar window.
Actual Result:
Screen Readers(NVDA,JAWS,Narrator) focus is moving twice for the ‘Previous/Next’ month buttons present in the calendar window.
Ex: After pressing Down arrow from the Calendar Month ‘December 2019’, (JAWS,Narrator)focus is moving twice to the ‘Previous/Next’ month buttons present in the calendar window. And after reacing the calendar last date again focus is moving to the ‘Previous/Next’ month buttons present in the calendar window.
Chrome+NVDA behavior: For the first time NVDA focus is not moving to the ‘Previous/Next’ month buttons, after reaching the last date from the calendar NVDA focus is moving the ‘Previous/Next’ month buttons present in the calendar window.
Expected Result:
Screen Readers(NVDA,JAWS,Narrator) focus shoud move only once to the ‘Previous/Next’ month buttons present in the calendar window, and screen readers should narrate proper name and role for them.
Ex: After pressing Down arrow from the Calendar Month ‘December 2019’, (JAWS,Narrator,NVDA0) focus should move only once to the ‘Previous/Next’ month buttons present in the calendar window.
Issue4: Screen Readers(NVDA,JAWS,Narrator) are not narrating the Role and disabled state for the Calendar dates buttons present in the calendar window.
Actual Result:
Screen Readers(NVDA,JAWS,Narrator) are not narrating the Role and disabled state for the Calendar dates buttons present in the calendar window.
Chrome+NVDA behavior: When the focus is on the Calendar date ‘January 1 2020’, NVDA is not narrating the Role and Disabled state, it is narrating as ‘W column 1’.
Chrome+JAWS Behavior: When the focus is on the Calendar date ‘January 1 2020’, JAWS is not narrating the Role and Disabled state, it is narrating as ‘1 January’.
Edge+Narrator Behavior: When the focus is on the Calendar date ‘July 1 2020’, Narrator is narrating as ‘Non Selected Editable 1’.
Expected Result:
Screen Readers(NVDA,JAWS,Narrator) should narrate the Role and disabled state for the Calendar dates buttons present in the calendar window.
Ex: When the focus Is on the ‘1 January 2020’, Screen readers should narrate the proper Role and disabled state, and also it should narrate the proper weekday information as ‘Row 6 Column 4 Wednesday 1 January 2020' button disabled.
Issue5: JAWS focus is moving to all the Months in the Month section in single stretch and narrating the all the Month information in single Stretch in the calendar window, while navigating usi
Tools Used : JAWS 2019.1909.28
Actual Result:
JAWS focus is moving to all the Months in the Month section in single stretch and narrating the all the Month information in single Stretch in the calendar window, while navigating using JAWS cursor mode(Down arrow).
Ex: When the focus is on the ‘2019’ and after pressing Down arrow, JAWS focus is moving to Month elements and narrating all the months information in single stretch.
Expected Result:
JAWS focus should move separately to all the Months in the Month section and it should narrate its proper Name, Role and State in the calendar window, while navigating using JAWS cursor mode(Down arrow).
Ex: When the focus is on the ‘2019’ and after pressing Down arrow, JAWS focus should move to ‘JAN’, and it should narrate its proper Name, Role and State as button ‘January’ selected, if it is current selected
Issue6: Screen Readers(NVDA,JAWS,Narrator) are not narrating the descriptive Week and Date information for the calendar Dates present in the calendar window.
Tools Used : NVDA 2019.2.1,JAWS 2019.1909.28,Narrator
Actual Result:
Screen Readers(NVDA, JAWS, Narrator) are not narrating the descriptive Week and Date information for the calendar Dates present in the calendar window.
Ex: When the focus is on the week headers ‘S,M,T,W,T,F,S’, NVDA narrating only them as ‘S,M,T,W,T,F,S’ and when the focus is on the calendar date ‘1’ (i.e. December 1), NVDA is narrating as ‘Row 2 S Column 1 1’. And when using table short cut keys(Ctrl+Alt+Arrow keys) also NVDA is not narrating the mapped row and column information, it is narrating as ‘Row 3 11’
Expected Result:
Screen Readers(NVDA, JAWS, Narrator) should narrate the descriptive Week and Date information for the calendar Dates present in the calendar window.
Ex: When the focus is on the week headers ‘S,M,T,W,T,F,S’, screen readers(NVDA, JAWS, Narrator) should narrate as ‘Sunday, Monday, Tuesday ,Wednesday, Thursday, Friday, Saturady’ and when the focus is on the calendar date ‘1’ (i.e. December 1), screen readers(NVDA, JAWS, Narrator) should narrate as ‘Row 2 Sunday Column 1 December 1’. And when using table short cut keys(Ctrl+Alt+Arrow keys) also screen readers(NVDA, JAWS, Narrator) should narrate the mapped row and column information as ‘Row 1 Column 1 Sunday December 1’ after pressing Ctrl+Alt+Arrow Keys to navigate the next date, it should narrate as ‘‘Row 1 Column 2 Sunday December 2’.
Issue7: Screen Readers(NVDA,JAWS,Narrator) are not narrating "Current/Today's" information for the today's date in the calendar picker window present in the page.
Tools Used : NVDA 2019.2.1,JAWS 2019.1909.28,Narrator
Actual Result:
Screen Readers(NVDA,JAWS,Narrator) are not narrating "Current/Today's" information for the today's date in the calendar picker window present in the page.
Ex: Non-Selected Date: When the focus is on the calendar date ‘1’ (i.e. December 1), NVDA is narrating as ‘Row 2 S Column 1 1’.
Selected Date: When the focus is on the calendar date ‘5 (i.e. December 5), NVDA is narrating as ‘Row 2 T Column 5 5’.
Expected Result:
Screen Readers(NVDA,JAWS,Narrator) should narrate the "Current/Today's" information for the today's date in the calendar picker window present in the page.
Ex: Non-Selected Date: When the focus is on the calendar date ‘1’ (i.e. December 1), NVDA should narrate as ‘Row 2 Sunday Column 1 December 1 2019’.
Selected Date: When the focus is on the calendar date ‘5 (i.e. December 5), NVDA should narrate as Today’s/Current Date ‘Row 2 Thursday Column 5 December 5 2019’.
User is unable to navigate through the calendar window using calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown). User finds difficulty to navigate the calendar if calendar shortcut keys not provided.
Test Environment:
OS: Windows 10 (1909 OS Build 18363.476))
Browser: Chrome Browser
Issue1: User is unable to navigate through the calendar window using calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown)
User is unable to navigate through the calendar window using calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown) in the Date Picker.
When user press PageUp, PageDown keys page is getting scrolled instead of month changing in the calendar.
When user press Alt + PageUp, Alt + PageDown keys browser tab is getting changed instead of year changing in the calendar.
Observation: When user press 'Up, Down, Left & Right' keys page is getting scrolled instead of dates changing in the calendar.
Note 1: Observing that focus is not visible while navigating using keyboard TAB key and Calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown)
Note 2: Same issue is observed when screen reader enabled.
User should be able to navigate through the calendar window using calendar shortcut keys (PageUp, PageDown, Alt + PageUp, Alt + PageDown) in the Date Picker, and user should be able to select the date.
When user press PageUp, PageDown keys in the calendar focus should move to the same day in the previous/ next month.
When user press Alt + PageUp, Alt + PageDown keys in the calendar focus should move to the same day in the previous/ next year month.
When user press 'Up, down' keys in the calendar focus should move to the previous/ next week
When user press Left, Right keys in the calendar focus should move to the previous/ next day.
Note: Focus should be clearly visible inside the Caledar Control while navigating uisng keyboard TAB key and calendar short cut keys(PageUp, PageDown, Alt + PageUp, Alt + PageDown).
Ensure That:
1.When screen reader enabled calendar shortcut keys should work.
2.After using the calendar shortcut keys screen reader should narrate the changed month and focused date information descriptively
WCAG Reference:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html
Issue2: NVDA focus is not immediately moving to the ‘Previous/Next’ months button present in the calendar window, whle navigating using NVDA browse mode(Down arrow).
NVDA focus is not immediately moving to the ‘Previous/Next’ months button after december 2019 present in the calendar window, while navigating using NVDA browse mode(Down arrow). Ex: After pressing Down arrow from the Calendar Month ‘December 2019’, NVDA focus is not immediately moving to the ‘Previous/Next’ month buttons present in the calendar window, Focus is directly moved to the calendar Week Headers in the window.
NVDA focus should move to the ‘Previous/Next’ months button after pressing down arrow key from December 2019 present in the calendar window, while navigating using NVDA browse mode(Down arrow). Ex: After pressing Down arrow from the Calendar Month ‘December 2019’, NVDA focus should move to the ‘Previous/Next’ month buttons present in the calendar window. Note:Ensure that when the focus is moved to the ‘Previous/Next’ month buttons, NVDA should narrate the Name and Role for that,and after invoking the buttons focus should be in the same interactive element. Ex:When the Focus is on the ‘Previous’ month, NVDA should narrate as ‘Previous Month’ button.
WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence
Issue3: Screen Readers(NVDA,JAWS,Narrator) focus is moving twice to the ‘Previous/Next’ month buttons present in the calendar window.
Screen Readers(NVDA,JAWS,Narrator) focus is moving twice for the ‘Previous/Next’ month buttons present in the calendar window. Ex: After pressing Down arrow from the Calendar Month ‘December 2019’, (JAWS,Narrator)focus is moving twice to the ‘Previous/Next’ month buttons present in the calendar window. And after reacing the calendar last date again focus is moving to the ‘Previous/Next’ month buttons present in the calendar window. Chrome+NVDA behavior: For the first time NVDA focus is not moving to the ‘Previous/Next’ month buttons, after reaching the last date from the calendar NVDA focus is moving the ‘Previous/Next’ month buttons present in the calendar window.
Screen Readers(NVDA,JAWS,Narrator) focus shoud move only once to the ‘Previous/Next’ month buttons present in the calendar window, and screen readers should narrate proper name and role for them. Ex: After pressing Down arrow from the Calendar Month ‘December 2019’, (JAWS,Narrator,NVDA0) focus should move only once to the ‘Previous/Next’ month buttons present in the calendar window.
WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence
Issue4: Screen Readers(NVDA,JAWS,Narrator) are not narrating the Role and disabled state for the Calendar dates buttons present in the calendar window.
Screen Readers(NVDA,JAWS,Narrator) are not narrating the Role and disabled state for the Calendar dates buttons present in the calendar window.
Chrome+NVDA behavior: When the focus is on the Calendar date ‘January 1 2020’, NVDA is not narrating the Role and Disabled state, it is narrating as ‘W column 1’.
Chrome+JAWS Behavior: When the focus is on the Calendar date ‘January 1 2020’, JAWS is not narrating the Role and Disabled state, it is narrating as ‘1 January’.
Edge+Narrator Behavior: When the focus is on the Calendar date ‘July 1 2020’, Narrator is narrating as ‘Non Selected Editable 1’.
Screen Readers(NVDA,JAWS,Narrator) should narrate the Role and disabled state for the Calendar dates buttons present in the calendar window.
Ex: When the focus Is on the ‘1 January 2020’, Screen readers should narrate the proper Role and disabled state, and also it should narrate the proper weekday information as ‘Row 6 Column 4 Wednesday 1 January 2020' button disabled.
WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
Issue5: JAWS focus is moving to all the Months in the Month section in single stretch and narrating the all the Month information in single Stretch in the calendar window, while navigating usi
JAWS focus is moving to all the Months in the Month section in single stretch and narrating the all the Month information in single Stretch in the calendar window, while navigating using JAWS cursor mode(Down arrow). Ex: When the focus is on the ‘2019’ and after pressing Down arrow, JAWS focus is moving to Month elements and narrating all the months information in single stretch.
JAWS focus should move separately to all the Months in the Month section and it should narrate its proper Name, Role and State in the calendar window, while navigating using JAWS cursor mode(Down arrow). Ex: When the focus is on the ‘2019’ and after pressing Down arrow, JAWS focus should move to ‘JAN’, and it should narrate its proper Name, Role and State as button ‘January’ selected, if it is current selected
WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence
Issue6: Screen Readers(NVDA,JAWS,Narrator) are not narrating the descriptive Week and Date information for the calendar Dates present in the calendar window.
Screen Readers(NVDA, JAWS, Narrator) are not narrating the descriptive Week and Date information for the calendar Dates present in the calendar window. Ex: When the focus is on the week headers ‘S,M,T,W,T,F,S’, NVDA narrating only them as ‘S,M,T,W,T,F,S’ and when the focus is on the calendar date ‘1’ (i.e. December 1), NVDA is narrating as ‘Row 2 S Column 1 1’. And when using table short cut keys(Ctrl+Alt+Arrow keys) also NVDA is not narrating the mapped row and column information, it is narrating as ‘Row 3 11’
Screen Readers(NVDA, JAWS, Narrator) should narrate the descriptive Week and Date information for the calendar Dates present in the calendar window. Ex: When the focus is on the week headers ‘S,M,T,W,T,F,S’, screen readers(NVDA, JAWS, Narrator) should narrate as ‘Sunday, Monday, Tuesday ,Wednesday, Thursday, Friday, Saturady’ and when the focus is on the calendar date ‘1’ (i.e. December 1), screen readers(NVDA, JAWS, Narrator) should narrate as ‘Row 2 Sunday Column 1 December 1’. And when using table short cut keys(Ctrl+Alt+Arrow keys) also screen readers(NVDA, JAWS, Narrator) should narrate the mapped row and column information as ‘Row 1 Column 1 Sunday December 1’ after pressing Ctrl+Alt+Arrow Keys to navigate the next date, it should narrate as ‘‘Row 1 Column 2 Sunday December 2’.
WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence
Issue7: Screen Readers(NVDA,JAWS,Narrator) are not narrating "Current/Today's" information for the today's date in the calendar picker window present in the page.
Screen Readers(NVDA,JAWS,Narrator) are not narrating "Current/Today's" information for the today's date in the calendar picker window present in the page. Ex: Non-Selected Date: When the focus is on the calendar date ‘1’ (i.e. December 1), NVDA is narrating as ‘Row 2 S Column 1 1’. Selected Date: When the focus is on the calendar date ‘5 (i.e. December 5), NVDA is narrating as ‘Row 2 T Column 5 5’.
Screen Readers(NVDA,JAWS,Narrator) should narrate the "Current/Today's" information for the today's date in the calendar picker window present in the page. Ex: Non-Selected Date: When the focus is on the calendar date ‘1’ (i.e. December 1), NVDA should narrate as ‘Row 2 Sunday Column 1 December 1 2019’. Selected Date: When the focus is on the calendar date ‘5 (i.e. December 5), NVDA should narrate as Today’s/Current Date ‘Row 2 Thursday Column 5 December 5 2019’.
WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value