microsoft / pxt-microbit

A Blocks / JavaScript code editor for the micro:bit built on Microsoft MakeCode
https://makecode.microbit.org
Other
711 stars 589 forks source link

[Screen reader - Make code - Share project]: Screen reader announces incorrect state information while navigating tab items present under 'Embed code' button. #5488

Closed vroopea closed 4 months ago

vroopea commented 7 months ago

User Experience:

Screen reader dependent people will get impacted if screen reader announce incorrect state information as selected for the unselected tab items. Due to which the end user will not be aware of which tab is selected and cannot navigate efficiently.

Note: User credentials should NOT be included in the bug.

Repro Steps:

  1. Launch application URL : https://makecode.microbit.org/.
  2. Home page will open.
  3. Navigate "New Project" option and select it.
  4. Editor screen will open.
  5. Navigate to "Share" option appearing in header section and select it.
  6. Navigate through all the controls of "Share Project" dialog and invoke share project.
  7. Navigate to the 'Embed code' button and expand it.
  8. Turn on the screen reader (JAWS) and navigate the tab items. Observe whether screen reader announces correct state or not.

Actual Result:

Issue: Screen reader announces incorrect state information while navigating tab items present under 'Embed code' button.

Observation:

Expected Result:

Screen reader should announce the correct state information while navigating tab items present under 'Embed code' button.

Example: When focus is on the 'Code' tab, by pressing right arrow, the screen reader should announce as 'Editor tab 2 of 3 not selected' and by invoking it with 'Enter key', it should announce as 'Editor tab selected 2 of 3'.

MAS Reference:

MAS 4.1.2 – Name, Role, Value

ARIA Authoring Ref Link/Fluent Patterns Guidance /HITS Guidance:

NA

UIA/DOM details available:

Yes (Refer the attachment)

Reference Links:

Test Environment:

https://github.com/microsoft/pxt-microbit/assets/158465724/2113bc4f-cec2-471a-b36a-e2a231957568

MAS4 1 2_Screen reader announces incorrect state information while navigating tab items present under 'Embed code' button
vroopea commented 7 months ago

Accessibility;#A11yMAS;#A11ySev2;#MAS4.1.2;#AILimited;#HCL;#Benchmark;#Win11-Chrome;#E2E-HCL-MakeCode-Feb2024;