Accessibility of exact date in conversation table

[philippkraft]

PHP version: 8.2.16
FreeScout version: 1.8.121
Database: MySQL
Are you using CloudFlare: No
Docker (tiredofit): yes

Hi,

my blind colleague struggles with the date in the conversation table, the link in the date column shows the exact date as a tooltip and a simplified form as the link caption. The simplified form (eg. "3 days ago") is found by the screen reader but not the tooltip. The rendered element for the conv-date column shows an empty title of the a-element and the tooltip is given as "data-original-title" attribute. Screen readers know how to deal with title-attributes but not with custom attributes line data-original-title.

I am no PHP-developer, so I need to guess a bit:

https://github.com/freescout-helpdesk/freescout/blob/49af472617b4f03cec02b31e59fe00456841f044/resources/views/conversations/conversations_table.blade.php#L207

creates the a element in question with the exact date in the tooltip as the title-attribute (which would be fine). When I load the html source of the page, there is still the title-attribute. But then on page rendering (german version) some javascript clears the title attribute and creates a data-original-title attribute with the same content. The only place for "data-original-title" I found in the code is here:

https://github.com/freescout-helpdesk/freescout/blob/49af472617b4f03cec02b31e59fe00456841f044/public/js/main.js#L3653

Is it necessary to delete the title-attribute or can the title attribute be used directly or the tooltip? Sorry, I do not understand the purpose of that code part enough to create a PR. Eg. I do not find the place where the title attribute is cleared.

This problem might affect more places, that we have not discovered yet (since my colleague does not know, that there is a tooltip).

So this issue extends #1150. @neosonic2 have you had the same experience?

Thank you for this great project and your previous efforts in making this accessible for those who need to use screen-readers.

Regards,

Philipp

[freescout-helpdesk]

Is there any other attribute apart from title which we can add to the element to let screen reader see it?

[philippkraft]

Sorry for my late reply. After some research (I am no pro in accessibility problems) I guess that aria-label and aria-description should work. Since the tooltip is rather longer, aria-description is preferred. Perhaps enhanced with aria-label="date".

Would adding the static aria-label to line 207 in conversation_table_blade.php and adding

item.attr('aria-description', title); 

below
https://github.com/freescout-helpdesk/freescout/blob/49af472617b4f03cec02b31e59fe00456841f044/public/js/main.js#L3653

do the trick? I would alter the code in the container to see/hear if this resolves the problem for my colleague.

[freescout-helpdesk]

We've added aria-label and aria-description attributes to the same element.

[philippkraft]

I've applied the diff in my local version and asked my colleague to check if this resolves her problem.

[philippkraft]

After checking with my colleague, it would be even better to have the aria-label the same as the text:

    <a href="{{ $conversation->url() }}" @if (!in_array($folder->type, [App\Folder::TYPE_CLOSED, App\Folder::TYPE_DRAFTS, App\Folder::TYPE_DELETED]))@php $conv_date_title = $conversation->getDateTitle(); @endphp aria-label="{{ $conversation->getWaitingSince($folder) }}" aria-description="{{ $conv_date_title }}" data-toggle="tooltip" data-html="true" data-placement="left" title="{{ $conv_date_title }}"@else title="{{ __('View conversation') }}" @endif @if (!empty($params['target_blank'])) target="_blank" @endif>{{ $conversation->getWaitingSince($folder) }}</a>

Thank you again for the fast response, freescout is really well working with a screen reader now.

[freescout-helpdesk]

OK