[Bug]: Skeleton items aria-label does not have any affect

[snisonoff-microsoft-unmanaged]

Library

React Components / v9 (@fluentui/react-components)

System Info

Repo steps:
-Open linked sandbox
-run narrator
-navigate to skeleton
-aria-label is not announced, instead it says "loading content" which is the default aria-label regardless of what language you are using

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/p/sandbox/skeleton-width-repro-forked-vxmx8c?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvetiorj00063j6hj5zm0g22%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvetiorj00023j6hf5j53jhm%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvetiorj00033j6hpnlqr5l5%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvetiorj00053j6h598es3f3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvetiorj00023j6hf5j53jhm%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvetiori00013j6hc6xxeylk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvetiorj00023j6hf5j53jhm%2522%252C%2522activeTabId%2522%253A%2522clvetiori00013j6hc6xxeylk%2522%257D%252C%2522clvetiorj00053j6h598es3f3%2522%253A%257B%2522id%2522%253A%2522clvetiorj00053j6h598es3f3%2522%252C%2522activeTabId%2522%253A%2522clvetuhd6001i3j6it3147xwz%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvetiorj00043j6hvzhkrgg7%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522SANDBOX_INFO%2522%252C%2522id%2522%253A%2522clvetuhd6001i3j6it3147xwz%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clvetiorj00033j6hpnlqr5l5%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clvetiorj00033j6hpnlqr5l5%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug Description

Actual Behavior

announces "loading content" regardless of the language and regardless of what you set the aria-label to

Expected Behavior

Should announce the content of the aria-label, in this case "hello world"

Logs

No response

Requested priority

Blocking

Products/sites affected

TwoUI

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[micahgodbolt]

Skeleton items are just visual representation of what the UI is going to look like. The aria-label is placed on the Skeleton itself.

[Hotell]

@micahgodbolt so this is work as expected ? or what's the status ? ty

besides the functionality IMO this is still a bug in terms of locale support as we hardcode english sentence within the skeleton label

[eikawata]

@micahgodbolt It should definitely NOT put the text in English as the default language. English is used in many parts of the world, but at the same time, many people don't speak it at all. This isn't inclusive design.

Is the aria-label required for accessibility reason? If so, this component should have the label as a required prop.

[dmytrokirpa]

As mentioned above, this is by design and the aria-label should be applied directly to the Skeleton element. An example can be found here

Is the aria-label required for accessibility reason? If so, this component should have the label as a required prop.

Implementing this would result in a breaking change; we will take it into account for the next major version.

[eikawata]

@dmytrokirpa Hi, I don't think we are talking about the same issue. The issue I'm raising is that it puts the default label of "Loading Content" in English. That should not be the case since not everyone speaks English. My suggestion is not to put this default text. Should I open a new issue on this?

[khmakoto]

Hi @eikawata, we have removed the default label in #31970.