Fluentui: Pivot does not have an accessible name
Environment Information
- Package version(s): 7.8.2
- Browser and OS versions: Chrome Version 77.0.3865.120 (Official Build) (64-bit)
Note that our screen reader support is limited to Edge + Narrator. Issues that do not reproduce in Edge + Narrator, and aren't caused by obvious invalid aria values, should be filed with the respective screen reading software, not the Fabric repo.
Describe the issue:
Pivot does not have an accessible name when tested using the Accessibility Insights tool under the Custom Wdgets > Design Pattern Test (Assessment) :: We see
When I check in the inspect element I do see the aria-label .
Please provide a reproduction of the issue in a codepen:
https://codepen.io/pen?template=rEjZeV
Actual behavior:
The accessible name does not appear.
Expected behavior:
The accessible name should appear
Documentation describing expected behavior
This information is from the Accessibility Insights tool : A widget is an interactive interface component, such as a link, button, or combo box. A custom widget is an interactive interface component other than a link or native HTML element. Custom widgets can be simple (e.g., a link or a button) or complex (e.g., a text field, listbox, and button that together function as a combo box). Each custom widget should follow the ARIA design pattern that best describes its function.
Below is a screenshot for the issue.
Below is a screenshot showing that aria-label gets applied to the component but still does not show up in the Accessibility insights test.
taparikh
All 17 comments
The CodePen you linked seems to be a template.
However, I was still able to take a look at this and confirm what you are seeing. Even when the Pivot element containing the role of tablist has an aria-label, Accessibility Insights still shows Accessible name: (no value). This means there isn't a fix I can identify from Fabric's side (at least not yet.) I suggest filing an issue with Accessibility Insights repos (repo links are in the wiki.)
JasonGore
on 5 Nov 2019
Due to the heavy data dependency, I was unable to isolate the component and make it runnable on the codepen
Happy to hop on a quick call and showcase the issue to you for a deeper dive.
taparikh
on 5 Nov 2019
@JasonGore Can you take a look at our detailsList & Scrollpane snippet below and let us know if we are missing anything ?
<div
style={{
height: "calc(100% - 60px)",
width: "calc(100% - 300px)",
position: "relative",
overflow: "hidden",
marginLeft: "20px"
}}
>
<ScrollablePane aria-label="scrollable pane label" id="scroll-pane">
<DetailsList
ariaLabelForGrid={this.props.gridAriaLabel}
aria-description={this.props.gridAriaDesc}
setKey="items"
items={this.state.items}
selection={this._selection}
columns={columns}
constrainMode={ConstrainMode.unconstrained}
checkboxVisibility={checkboxVisibility}
isHeaderVisible={isHeaderVisible}
selectionMode={selectionMode}
layoutMode={DetailsListLayoutMode.fixedColumns}
enterModalSelectionOnTouch={true}
checkButtonAriaLabel={"Central Grid check box"}
onItemInvoked={this._onItemInvoked}
selectionZoneProps={{
selection: this._selection,
disableAutoSelectOnInputElements: true,
selectionMode: selectionMode
}}
ariaLabelForListHeader="Column headers."
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
ariaLabelForSelectionColumn="Toggle selection"
onRenderDetailsHeader={(
detailHeaderProps: IDetailsHeaderProps,
defaultRender: IRenderFunction<IDetailsHeaderProps>
) => (
<Sticky stickyPosition={StickyPositionType.Header}>
{defaultRender(detailHeaderProps)}
</Sticky>
)}
/>
</ScrollablePane>
</div>
Just want to confirm that we are using the props right & not missing anything from fabric's end before we pass on the bug to Accessibility Insights team
taparikh
on 5 Nov 2019
I'm pretty sure I duplicated what you found in the image I attached to the post above. It is still not identifying it by name, so at the very least, we'd need their guidance anyways (if it is in fact not an AI issue.)
JasonGore
on 5 Nov 2019
To add more context I see the same issue with other elements as well
qazaahir
on 6 Nov 2019
Accessible Name is not directly provided by the code, it is a computed value that browsers (and in this case, Accessibility Insights plugin) calculate. Per my previous posts, I think this is an issue that needs to be brought up to Accessibility Insights first. If there is something the Fabric page is doing incorrectly, it's not an obvious ARIA spec violation to me, nor is it highlighted by Accessibility Insights as a failure.
JasonGore
on 6 Nov 2019
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
on 11 Nov 2019
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
on 17 Nov 2019
The aria-label does not get added at that level. Below is a screenshot that shows this.
Notice that there is not aria-label for the role="tablist".
Notice that the browser is also not computing accessible name for tablist.
`
aria-label="Top Navigation Bar"
className={classNames.pivot}
selectedKey={this.state.choice}
onLinkClick={this.onChoiceChange}
>
headerText="Find Content"
itemIcon="Search"
itemKey={"find"}
ariaLabel={"FindContent"}
`
This is the code snippet using the pivot component with the aria-label prop.
taparikh
on 12 Dec 2019
Here is the thread of discussion with the Accessibility Insights Team : https://github.com/microsoft/accessibility-insights-web/issues/1639
taparikh
on 12 Dec 2019
@JasonGore We would like to drive resolution to this bug. Can we hop on a teams call ?
taparikh
on 13 Dec 2019
Tested this out on a screen reader and it was not reading the accessible name of the pivot. It would directly read the first tab name …
taparikh
on 13 Dec 2019
I don't remember how I originally had applied aria-label to Pivot in my previous comment but it does not seem possible to do via props. I think the fix here is to apply props either to the inner div where role is defined or move the role up to the outer div.
JasonGore
on 13 Dec 2019
:tada:This issue was addressed in #11465, which has now been successfully released as [email protected].:tada:
Handy links:
msft-github-bot
on 16 Dec 2019
Reopening per #11690
JasonGore
on 13 Jan 2020
I believe this specific issue can be considered fixed in #11690. The pivot root now has role toolbar instead of tablist, and it contains sub-parts tablist and tabpanel. the aria-label will land on the root element with role=toolbar
@qazaahir - feel free to verify
xugao
on 15 Jan 2020
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
on 19 Jan 2020
Related issues
luisrudge
·
3Comments
prashkan
·
3Comments
mattcoxonline
·
3Comments
nekoya
·
3Comments
gabrielruss
·
3Comments