Fluentui: [Accessibility] Sequence Test on personaCoin shows large white circle on screen & a quarter circle as the logo.

[taparikh]

Codepen demonstrating the issue

https://codepen.io/taparikh/pen/QeGKLp -- codepen for our code.
https://codepen.io/Tanvi_p/pen/ymVaYP -- just personaCoin

Actual behavior:

This is the output on our environment

On performing the same test on office-ui fabric Persona Coin component on the website - we got the following error.

Expected behavior:

Large white circle or chipped off logo should not appear.

Documentation describing expected behavior

The accessibility Test is from the Acc Insights Tool > Assessment > Sequence > CSS Positioning.
Below are the suggested steps in this test:

• The visual helper for this requirement highlights content positioned on the screen using CSS position:absolute or float:right.

• This procedure also uses the "Web Developer" browser extension.

1. Examine the target page to determine whether it has any positioned (highlighted) content that's meaningful:
   a. Content is meaningful if it conveys information that isn't available through other page content.
   b. Content is decorative if it could be removed from the page with no impact on meaning or function.
2. If the page does have meaningful positioned content, use the Web Developer browser extension (Miscellaneous > Linearize page) to show the page in DOM order.
3. Verify that the positioned content retains its meaning when the page is linearized.
   Record your results:
4. If you find any failures, select Fail, then add them as failure instances.
   Otherwise, select Pass.

--
In the Web Developer Extension when the option "Linearize" is selected it leads to a white circle on the page. We tested it by removing the css rule "float:right" as well but still the white circle appears.

[ecraig12345]

Looks like you forgot to save the second codepen (https://codepen.io/pen/?&editable=true is just a generic link for creating a new codepen). Could you save it and update the link?

[taparikh]

@ecraig12345 Done !

[taparikh]

@ecraig12345 Hi Elizabeth! Let me know if you need any more information from me. Im happy to hop on a teams call as well to discuss this in more detail.

[taparikh]

@ecraig12345 Hi Elizabeth just a gentle follow up to check if you need any more information from us to work towards resolution of this bug!

[JasonGore]

I don't think the first CodePen is working. It seems to use keywords CodePen can't handle, like export, but I also believe some of the imports won't work correctly without package specs. Can you verify the CodePen is working?

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[taparikh]

Hi @JasonGore unfortunately I am not able to replicate my local dev code onto codepen due to the heavy data dependency. I would request that we hop on a teams call where I can demo this to you

[JasonGore]

This doesn't seem like an issue that would need a lot of data to replicate. We need some kind of repro to root cause and verify a fix works.

[taparikh]

As described in the description of this github issue we did test it out on the Office UI Fabric Persona Coin on the official website and saw the same error. Hence the issue is not with our development but rather in the persona coin compoenent

[taparikh]

Id be happy to replicate the Office Ui Persona Coin in a separate codepen (based off the codepen that is already present on the office ui fabric website) and share it with you

[JasonGore]

That's fine, if the Fabric link is sufficient for show the entire issue, I'll take another look at that. Thanks.

[JasonGore]

Ok, I have reproduced this on Chrome and Firefox. The key is to have the Web Developer extension and enable Miscellaneous => Linearize Page.

I have verified this issue is specifically caused by these :before and :after selectors. As a result, it is only triggered by certain presences, namely the open circle and blocked presences.

This seems to be some weird incompatibility between the selectors, absolute positioning, and linearization. I thought it may be a browser bug, but it also repros in Firefox.

@Markionium @mtennoe Do you have any ideas? Can you think of any other way to display these specific presences? The only ideas I've thought of is to create actual icons or do a relatively positioned container with absolute elements inside of it.

[mtennoe]

@JasonGore - That's curious. @Markionium - You added these as part of adding dual presence, do you have any quick ideas? Either way, I kind of like the idea of creating icons for these though

[ecraig12345]

Ping @Markionium -- any ideas for ways to render the open circle and blocked presences without these :before/:after elements (or with a different positioning strategy) to avoid causing accessibility issues?

[Markionium]

I think the main problem with this is that the Linearize Page adds the following CSS to the page.

Obviously this is problematic for anything that has position relative or absolute. I think the only proper solution here is to add custom icons. But even then, we use positioning logic to position the presence based on the coin's position.

* {
    float: none !important;
    position: static !important;
}

I'll talk to Matt to see if we can get custom icons for these new presence so at least we can get rid of the :before / :after stuff. But that seems only part of the solution.

[p01]

We can get rid of the :before and :after using something like this:

<span class="presence">v</span>
<span class="presence with-border">v</span>
<span class="presence oof">x</span>

<style>
.presence {
  display: inline-block;
  font-size: 32px;
  width: 64px;
  height: 64px;
  border:4px solid transparent;
  line-height: 56px;
  box-sizing: border-box;

  border-radius: 50%;
  text-align: center;

  color: blue; /* use theme color */
  background: #fff; /* use theme color */

  /* we can rotate the circular badge if we want */
  transform: rotate(.125turn);
}

.with-border {
  border-color: currentColor;
}

.oof {
  border-color:red;
}
</style>

I am not familiar with "Linearize Page", but the CSS @Markionium showed will break the pages as it puts every element in the flow, but does not reset the pseudo elements nor the margin, width and height related properties which can position block and inline-block elements ( using margins and negative margins ).

This extension should much rather disable CSS altogether to "linearize" the documents and see their bare DOM structure.

[mattcoxonline]

Priority was changed from P1 (highest) to P3 (lowest) because it's such an edge case - breaking when having a particular extension installed when selecting a specific option. For most people, this will never be a scenario.

That said, I talked over the changes that should be made with @Markionium and he's going to re-work the persona control a little to fix these issues.

No design assets needed for now, unless we decide to use SVG icons in future for presence... and so Mark can start the fix when he next has time to.

[taparikh]

@mattcoxonline @ecraig12345 @Markionium Can you give us an update on the progress ?

[p01]

As far as I am concerned, this is issue is a wontfix for Office-UI-Fabric-React since the way the "Linearize Page" extension works is inherently broken. See my previous comment.

At least the change to get rid of the :before and :after that I suggested should not be motivated by a broken extension but by the strive for cleaner CSS and markup.

[taparikh]

@p01 Can you guide me to the team that owns the "Linearize Extension" ?

[p01]

https://chrispederick.com/work/web-developer/

The Web Developer toolbar/extension is over 15 years old. We used it a bit before we started to build the Developer tools in Opera. Anyway, the code for the Web Developer extension landed on Github 9 years ago where it got a few commits until 2 years ago.

Hope that helps,

[taparikh]

Considering the fact that the linearize extension is a 3rd party tool and we have no means of getting in touch with them to see through this issue - I am closing this bug. Thanks for all your help!