Tab component should use pointer cursor style

[arkadiuszwojcik]

Describe the bug; what happened?

Current Tab component implementation on cursor hover display text cursor

What are the steps to reproduce the issue?

1. Hover cursor on Tab control

What behavior did you expect?

I expect pointer style cursor

[ashoka-tech]

Hi

Can I submit a pull request for this?

I think we need to change this file ..fast-master\packages\web-components\fast-components\src\tabs\tab\tab.styles.ts

and add cursor: pointer; to ${display("inline-flex")} :host {

[arkadiuszwojcik]

Will this automatically fix fluentUI webcomponents or separate PR will be required?

[ashoka-tech]

Pardon me @arkadiuszwojcik , are you asking me?
If so, sorry I am not sure about the fluentUI components impact, but happy to spend time to explore and understand it, if you would like me to find answer for your question. Additionally could you help with some pointers to understand your question? :)

[chrisdholt]

@arkadiuszwojcik I’ve created an issue for the Fluent implementation as well.

[chrisdholt]

@arkadiuszwojcik PR for the Fluent issue: microsoft/fluentui#14421

[equinusocio]

The cursor value should be "default" (arrow) not the pointer

Microsoft’s design guides talk about weak affordance:

Text and graphics links use a hand […] pointer […] because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a link. To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don’t need a hand pointer. The hand pointer must mean “this target is a link” and nothing else.

W3C User Interface guidelines says the same thing again with “The cursor is a pointer that indicates a link”.

From:

https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b#.b33l7fivt

[arkadiuszwojcik]

@equinusocio @chrisdholt Just to be clear, when I reported this issue I was basing on current FluantUI behavior (React one) which is using pointer style. So at least microsoft/fluentui#14421 is now consistent with FluentUI React. As for this issue I am not an expert on web standards so I'm not sure about it.

[equinusocio]

Well if Fluent design use pointer as a cursor, it should be defined the same inside the Fluent theme. But it should be a CSS custom property with default as a default value to show the arrow cursor. The same is true for buttons, tabs etc..everything that isn't a text link.

[arkadiuszwojcik]

"For example, command buttons already have a strong affordance, so they don’t need a hand pointer. The hand pointer must mean “this target is a link” and nothing else."

I think this rule don't apply here as Pivot (name from FluentUI) or Tab (in Fast) don't have strong affordance as Tabs had i.e. in Windows 98.

[bheston]

@equinusocio thanks for the links to the guidance and the article. Accessibility clearly has a long history, going all the way back to the invention of the hyperlink. Things have come a long way since then, and as our team has gone to great lengths to make the most accessible product we can, we've found many cases ripe for debate and some flat out contradictions.

@ashoka-tech, yes, I agree with you submitting the change, like the one Chris submitted in Fluent UI.

As arkadiuszwojcik mentioned in the last comment, tabs (or pivots) don't have such a strong affordance as to their functionality. We've chosen to use the pointer cursor for more than links because we believe it increases accessibility, and there is currently no other standard cursor designed for this purpose.

One of the reasons we added the cursor change is that the fill for a button is not always 3:1 from its container background. This is allowed because the text is 4.5:1 from the button background, as it's expected a button can be determined also by context and action label. Using a magnifier app or high zoom may be necessary for some people, but it also can make the association of controls harder to understand. Contrary to the perspective of the Medium article, much space in a typical app is inactive or not clickable. Commonly many labels on the page of an app are static and not primarily intended to be selected. Longer sentences or paragraphs in articles are more likely to need to be selected. Our intent was to make the cursor intentional and informational to increase accessibility.

[ashoka-tech]

@bheston Thanks, will submit the change.