Fluentui: ComboBox: aria label of an item cannot be set separately from preview text

Created on 11 Oct 2018 · 6Comments · Source: microsoft/fluentui

Bug Report

__Package version(s)__: 6.74.0

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: High (accessibility)

Products/sites affected: Outlook

Describe the issue:

Setting the ariaLabel property on IComboBoxOption does not set the aria-label on the option. It only does so if useAriaLabelAsText is set to true, which results in the aria label being used as the preview text.

Actual behavior:

Aria label can only be set if you want to use it as the preview text as well

Expected behavior:

Aria label can be set, and if you want to use it as the preview text you can use the existing useAriaLabelAsText property

See ComboBox._renderOption and ComboBox._getPreviewText, essentially leave _getPreviewText as is but update the aria-label props being set on the CommandButton or CheckBox to be "item.ariaLabel ? item.ariaLabel : item.text"

ComboBox By Design Type

Source

janormanms

All 6 comments

@natalieethell were you working on this? I'm not sure if that behavior suggested is even right. May be good to chat with @jspurlin

dzearing on 12 Nov 2018

Hey @dzearing I am not actively working on this. I just moved the card from “Ready for Engineering” to “In PR” because I noticed there was a PR opened for it.

natalieethell on 12 Nov 2018

@natalieethell Ah oops I see it now :) thanks!

dzearing on 12 Nov 2018

👍1

seems the PR for this fizzled out. something to look into during #6030? @ecraig12345

micahgodbolt on 28 Dec 2018

I was about to create a PR to allow a different value for aria-label, but it was basically the same as the PR closed above, which @jspurlin said was unnecessary.

My solution was to add a getAriaLabel similar to getPreviewText:

  private _getPreviewText(item: IComboBoxOption): string {
    return item.useAriaLabelAsText && item.ariaLabel ? item.ariaLabel : item.text;
  }

  private _getAriaLabel(item: IComboBoxOption): string {
    return item.ariaLabel ? item.ariaLabel : item.text;
  }

@jspurlin unless you think this approach is better than the closed PR, i'll let this issue close via "By Design"

micahgodbolt on 2 Jan 2020

@micahgodbolt , yeah, I think this should be closed as "by design" due to the issues I called out in https://github.com/OfficeDev/office-ui-fabric-react/pull/6797