Design of checkboxes in monochrome mode - proposal

[xbarbie]

Current checkboxes in accessibility menu look like circles, that do not clearly reflect their state in monochrome mode. They are differentiated only by color, which is acceptable in color mode, but in monochrome they're a little confusing:

I propose to use some check marks to make them more clear. For example, I tested it by modifying the SVGs in HTML like this:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m 16.371092,6.6210937 c 0.513245,0.5203285 0.507123,1.3583198 -0.01367,1.8710938 L 9.8535158,14.896484 c -0.5147559,0.506589 -1.3407128,0.506589 -1.8554687,0 L 3.6425783,10.607422 C 3.1217848,10.094649 3.1156616,9.2566574 3.6289063,8.7363283 4.1416797,8.2155349 4.9796709,8.2094117 5.5,8.7226563 L 8.9257813,12.097656 14.5,6.6074219 c 0.519236,-0.5121001 1.35949,-0.5058647 1.871092,0.013672 z M 10,20 C 15.5228,20 20,15.5228 20,10 20,4.47715 15.5228,0 10,0 4.47715,0 0,4.47715 0,10 0,15.5228 4.47715,20 10,20 Z" fill="currentColor"></path></svg>

The result:

[DeviSriSaiCharan]

Hello @limzykenneth , I'd like to work on this issue. Could you please assign it to me?

[limzykenneth]

@stefanietam @tyler-yin Do you have some ideas around how to make this part of the UI clearer? Shall we go with the suggested solution?

I'm not 100% sure about SVG either in terms of how accessible they are inline. Would need more confirmation here.