C2LC-669: In high contrast theme, focus is difficult to see on program blocks on which the program is paused

Description

Steps to reproduce:

• Make a program with a loop and non-loop blocks, such as: startLoopA, forward, forward, endLoopA with 3 iterations
• Use High Contrast theme
• https://develop-1-5--c2lc-build.netlify.app/?v=1.5&t=contrast&w=Sketchpad&p=sA3s11z&c=abb&d=&s=abb
• Play the program and pause on either the startLoop block or one of the movement blocks
• Focus the block that the program is paused on

Comments

• Simon Bates commented 2022-08-18T13:08:08.345-0400

  In addition to focus being hard to see in high contrast on paused blocks, it is also not possible to distinguish between focus and action selection in the action panel in high contrast as they are both styled the same.

• Simon Bates commented 2022-08-18T13:14:10.283-0400

  Sepideh and I tried out some options yesterday and we are thinking that a good solution would be to use a colour to indicate focus in high contrast.

  Sepideh suggested the blue that we use for the grid lines in the scene: #0078FF

  And for the background of the active loop, we would use a pattern, such as a light grey on black diagonal stripe.

  Contrast of the proposed blue colour against black and white:

  • White: 4.09:1
    • https://webaim.org/resources/contrastchecker/?fcolor=0078FF&bcolor=FFFFFF
    • Normal Text AA: Fail
    • Normal Text AAA: Fail
    • Large Text AA: Pass
    • Large Text AAA: Fail
    • UI Components AA: Pass
  • Black: 5.13: 1
    • https://webaim.org/resources/contrastchecker/?fcolor=0078FF&bcolor=000000
    • Normal Text AA: Pass
    • Normal Text AAA: Fail
    • Large Text AA: Pass
    • Large Text AAA: Pass
    • UI Components AA: Pass

• Simon Bates commented 2022-08-18T13:21:10.615-0400

  https://github.com/sbates-idrc/c2lc-coding-environment/commits/C2LC-669-WIP

• Simon Bates commented 2024-04-24T10:32:38.639-0400

  Moved to GitHub: https://github.com/codelearncreate/c2lc-coding-environment/issues/462