Fluentui: Dropdown component uses title attribute instead of the office fabric tooltip

[petdun2519]

Bug Report

The dropdown items use the title attribute which is an accessibility issue. They should use the Tooltip from office fabric.

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Yes as soon as I have time

Requested priority: High

Products/sites affected: All

Describe the issue:

Using the title attribute with the same text as the cell it is on is a known accessibility issue. It should be replaced with TooltipHost

Actual behavior:

Title attribute is used with same text as dropdown

Expected behavior:

Tooltip would be used if the text in the option overflows

If applicable, please provide a codepen repro:

[micahgodbolt]

Pretty sure we discussed this previously (maybe about a different component) but we don't want to use something like Tooltip by default in other components. Visually it's too noisy and it adds a lot of weight to the component.

@betrue-final-final do you recall this convo and our decision in the past?

[betrue-final-final]

I do remember an issue with a noisy tooltip, but I would need to recall all the details. Repro steps and a user outcome would help me understand this issue better.

[petdun2519]

@betrue-final-final @micahgodbolt I'm pretty sure that using title attribute anywhere is an accessibility issue. From what I understand, because there is both aria-label and title attribute here some screen readers will read both those attributes.

But being this is a shared control with other consumers, I could see there being some concern about having tooltip applied to all dropdowns by default, but at the same time, as a consumer if I specify onRenderOption prop I feel like I should be able to specify what the tooltip looks like for that option. I am going to update this bug to say "The title attribute here should only be applied to the default onRenderOption". does that sound ok?

[petdun2519]

it is an accessibility issue to have aria-label, title, and the text of the button to be the same thing. I'm pretty sure the right fix here is to remove aria-label and title attributes completely, and have tooltip only on overflow here. But if there were perf concerns about adding tooltips all over the place, then we can maybe just have title here, but in the way that i mentioned above

[betrue-final-final]

Ah gotcha. Yeah, we don't need aria-label if the control is just semantic html. I also agree we don't need a title as readers will read the button text. I'm still not sure what the tooltip behavior looks like. What do you mean by overflow?

[mmanela]

Rendering a tooltip instead of using title tag also helps keyboard accessibility. Title tags do not render when keyboading through elements while the tooltiphost will.

[mmanela]

I have the same feedback for the commandbar item.

[cschleiden]

I think when a title prop is given, we should render that using a tooltip instead of adding it as the "HTML title".

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Fabric React!
Why am I receiving this notification?