hteumeuleu / email-bugs

Email quirks and bugs
538 stars 20 forks source link

An element containing only ` ` in Outlook web, breaks VoiceOver navigation #142

Open M-J-Robbins opened 2 days ago

M-J-Robbins commented 2 days ago

Email Client

Outlook webmail

Operating System

MacOS 15 Safari 18

Expected Result

When using role="application" in the browser it is expected that using role="document" inside that will mean the content is treated as web content.

If the web application encompassed by the application role contains parts that should be treated like normal web content, a role of document or article should be used to contain such content. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role

Actual Result

When looking at the below code sample with an element that contains only  , inside a region, inside a document, inside an application. Then it breaks VoiceOver navigation and will exit the region.

Code sample

If testing with Outlook this code will show the issue

    <div aria-label="Testing region in application" role="region" >
      <h1>This text is read out</h1>
      <p>&nbsp;</p>
      <p>This text is ignored</p>
    </div>          

If testing directly in Safari then this code will show the issues. Here I've added role="application" and role="document" that get added by Outlook.

<div role="application">
  <div role="document">
    <div aria-label="Testing region in application" role="region" >
      <h1>This text is read out</h1>
      <p>&nbsp;</p>
      <p>This text is ignored</p>
    </div>          
  </div>
</div>

Additional context

I've reported the bug in Safari here https://bugs.webkit.org/show_bug.cgi?id=283499