[Bug]: CommandBar - Screen reader reads "selected" twice for overflow items

jn394 commented 3 months ago

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: macOS 13
    CPU: (8) arm64 Apple M2
    Memory: 16.00 GB
Browsers:
    Chrome: 127.0.6533.88 

SPFX Version: 1.18.1
Node Version: 18.17.1

Installed Dependencies
"dependencies": {
    "@microsoft/sp-core-library": "1.18.1",
    "@microsoft/sp-lodash-subset": "1.18.1",
    "@microsoft/sp-office-ui-fabric-core": "1.18.1",
    "@microsoft/sp-property-pane": "1.18.1",
    "@microsoft/sp-webpart-base": "1.18.1",
    "@pnp/spfx-controls-react": "3.16.0",
    "@pnp/spfx-property-controls": "3.15.0",
    "datebook": "^7.0.8",
    "lzutf8": "^0.6.3",
    "office-ui-fabric-react": "7.185.7",
    "react": "17.0.1",
    "react-beautiful-dnd": "^13.1.0",
    "react-clamped": "^1.0.1",
    "react-container-query": "^0.12.0",
    "react-dom": "17.0.1",
    "sanitize-html": "^2.7.3",
    "swiper": "^8.4.2",
    "tslib": "2.3.1"
  }

Installed Dev-Dependencies
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.18.1",
    "@microsoft/eslint-plugin-spfx": "1.18.1",
    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
    "@microsoft/sp-build-web": "1.18.1",
    "@microsoft/sp-module-interfaces": "1.18.1",
    "@rushstack/eslint-config": "2.5.1",
    "@types/react": "17.0.1",
    "@types/react-dom": "17.0.1",
    "@types/webpack-env": "^1.15.3",
    "ajv": "^6.12.5",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "gulp-run": "^1.7.1",
    "postcss": "^8.4.31",
    "spfx-fast-serve-helpers": "~1.18.1",
    "webpack-bundle-analyzer": "^4.5.0"
  },

Are you reporting an Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/vitejs-vite-v3is66

Bug Description

Actual Behavior

While using a screen reader and tabbing over to the overflow menu, the items would read out "Item selected selected" I'm using the CommandBar component in a custom SPFx webpart. Each item has a structure like this:

{
     key: term.term,
     text: term.term,
     data: term,
     onClick: this.updateSelectedTerm.bind(this),
     ['aria-selected']: false,
     ['aria-label']: term.term,
     role: 'tab',
}

<CommandBar items={subscriptions} className={styles["mySubscribedNews__tabs"]} role='tablist'/>

Expected Behavior

The screen reader should not read out loud "selected" at all since the item is only be hovered over, only when the item is pressed or clicked should the screen reader say "selected".

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.

emmayjiang commented 3 months ago

Hello! I'm assuming you are using the v8 CommandBar component since it doesn't exist in v0.

Please create a reproduction of this issue outside of SharePoint so we can verify that the bug is with the component and not with SharePoint, and we'll take a look. Thank you!

jn394 commented 3 months ago

Hey @emmayjiang,

I added the reproduction link in the description. I've noticed a few things:

The items are still being rendered in the overflow menu.
The overflow button is generated and clickable but not visible.
While the properties of the items aren't be changed. The screen reader still says "Selected" for each item in the overflow menu.

TristanWatanabe commented 3 months ago

@jn394 Thanks for providing the repo, i've looked into it and addressed each point below:

The items are still being rendered in the overflow menu.

This is expected behavior with CommandBar as items will automatically flow into an overflow menu if the container runs out of space. Consider increasing the width of the container to prevent this.

The overflow button is generated and clickable but not visible.
To get the overflow menu button icon to show up, you'll need to initialize the icons (see below):
import { initializeIcons } from '@fluentui/font-icons-mdl2';

initializeIcons();


> While the properties of the items aren't be changed. The screen reader still says "Selected" for each item in the overflow menu.
- As you mentioned, i'm also not able to reproduce the initial issue in the title of the item properties being overwritten. I am able to reproduce the non-selected overflow items being read out as "selected" on both Voiceover and NVDA screen readers. However, this is now a different issue from the original - you should either update the title and description of this issue or create a new one, what do you think?

jn394 commented 3 months ago

@TristanWatanabe Thanks for providing feed back. As for the non-selected overflow items being read out as "selected". I'll go ahead and change the title and description. Thanks

microsoft / fluentui