search

microsoft / pxt-microbit

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

[Keyboard Navigation – Make Code - Import File] Keyboard focus indicator is not visible on 'Go ahead' under 'Import File' pop-up. #3568

Closed Shalini3457 closed 3 years ago

Shalini3457 commented 3 years ago

User Experience: If the desired component, on which keyboard operations will interact at any point in time is not visually determined, people with attention limitations, short term memory limitations, or limitations in executive processes will find it difficult to discover where the focus is located.

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

Repro Steps:

  1. Launch application URL.
  2. Home page will open.
  3. Navigate to "Import" button and select it.
  4. Navigate through the controls appearing under "Import" dialog.
  5. Navigate to import file option and navigate through the all the controls of dialog.
  6. Verify that keyboard focus indicator is visible on 'Go ahead' button or not.

Actual Result: Keyboard focus indicator is not visible on 'Go ahead' button under 'Import File' pop-up window and due to this, visual impaired user is unable to see the keyboard focus on that control and also he/she is unable to perform functionality over such control.

Expected Result: Keyboard focus indicator should be visible on 'Go ahead' button under 'Import File' pop-up window, so that visual impaired user could easily see the keyboard focus on that control to perform functionality over such control.

Note:

  1. Same issue appear under Chrome & Firefox.
  2. Same issue exists under 'Add custom blocks' pop-up window.
  3. Same issue exists throughout the application where this type of control appears.

WCAG Reference: WCAG 2.4.7 - Focus Visible

Test Environments: Version: 20H2 (OS Build: 19042.508) Browser: Edge chromium DEV Build (Version 87.0.654.0), Firefox(75.0), Chrome

Shalini3457 commented 3 years ago

Labels:

Accessibility;#A11ySev2;#HCL;#HCL-MakeCode-New;#WCAG2.4.7;#Win10-Edge(Chromium)

WCAG2.4.7_Import File_Go ahead.zip

WCAG2.4.7_Add Custome blocks_Focus is not visible at Go ahead and Cancel buttons.zip

jwunderl commented 3 years ago

By default the buttons darken for selection per sui styling, in high contrast mode they display focus outline. image