If using screen reader it's not possible to click the check boxes in the list of tickets to select multiple tickets.

[nktech1135]

The subject basically says it all. In a list of tickets i am unable to select multiple tickets using the checkboxes without using the mouse. Typically i should be able to do this with the keyboard if using a screen reader.
System info.
Windows 11, the latest brave and nvda screen reader versions, and freescout 1.8.184
Could someone look into this?

[freescout-help]

Do you know which attributes are needed for checkboxes to allow clicking them?

[nktech1135]

I don't offhand, i'm not personally a web developer.

[freescout-help]

Ok, so we'll leave the issue open. Maybe someone who knows how to fix this will appear.

[philippkraft]

This is not a problem that my screen reader using colleague has discovered for herself, although I asked her to check. It might be a problem with this specific screen reader.

[nktech1135]

What does she use? i can reproduce this on firefox and brave using the nvda screen reader on win11
I didn't even know there were checkboxes to select multiple tickets until one of the employees pointed it out to me.
Personally, to me it feels like this needs to be fixed in freescout.

[philippkraft]

Sorry I can't have a look currently. I think she uses JAWS. I will investigate if it is something she just doesn't know if it exists, or if it is no problem with her screen reader - but that will take some time.

I had a look into the code, the checkbox has a class "magic-checkbox" which uses display:none style on the input itself, I guess to draw the "magic" itself. When I disable the display:none style a second old style checkbox appears under the nice box, which I can access with tabs and select. This might get resolved with either role="checkbox" or aria-hidden="false" as extra attributes where the class magic-checkbox is used. (I have not tested it yet).

[nktech1135]

Looks like you're getting somewhere. I'm open to testing this if you can tell me what to change and where.

[philippkraft]

You need to edit the file conversations_table.blade.php and change 2 lines in the same way.

These are the two cases in that file:

freescout/resources/views/conversations/conversations_table.blade.php

Line 90 in b0d589c

@if (empty($no_checkboxes))<th class="conv-cb"><input type="checkbox" class="toggle-all magic-checkbox" id="toggle-all"><label for="toggle-all"></label></th>@endif

freescout/resources/views/conversations/conversations_table.blade.php

Line 143 in b0d589c

<input type="checkbox" class="conv-checkbox magic-checkbox" id="cb-{{ $conversation->id }}" name="cb_{{ $conversation->id }}" value="{{ $conversation->id }}"><label for="cb-{{ $conversation->id }}"></label>

In both lines insert between class="... magic-checkbox" and id="...":
role="checkbox" aria-hidden="false"

I hope this helps, I am in no way a pro for accessibility. role should not be necessary, because the role is already clear by input with the type="checkbox", however the description of aria-hidden sounds fitting: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden, but I am not sure it helps.

[philippkraft]

@freescout-help : the main problem here is, that magic-checkbox is not accessible. My (untested) idea above is an ugly work around. Would getting rid of magic-checkbox and use a modern checkbox style eg from bootstrap an alternative?

[nktech1135]

I will test @philippkraft's workaround, to see if it works. However, long term it would be good to find a fix that would be acceptable to merge into the project so i don't need to patch each time i upgrade.
From what i know of the bootstrap stuff, i think there code usually works for accessibility so if that would be more acceptable that would work for me.

[nktech1135]

I did this and rebooted the server, Still no checkboxes for me, i'm a little puzzled by this.

[philippkraft]

Can you post the lines here, so we can be sure everything is correct? I am not sure, if the aria-hidden="false" attribute overwrites the display:none style for the reader, the help texts are a bit unclear about that. It would be better if display:none would not be used, but that is part of the magic-checkbox library used here.

If you also remove the class magic-checkbox from these lines, does it work then? (At least we know that it is the magic-checkbox)

[nktech1135]

Here you go. Line 90.
@if (empty($no_checkboxes))@endif

And line 143

I'll try removing magic-checkbox to see what happens.