pnp / pnp/sp-dev-fx-controls-react

People Picker Control shows inaccessible colours when in Teams high contrast mode

Open
#1,463 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted type:enhancement
Dominant language
TypeScript
Stars
433
Forks
418
Avg merge
5d 6m
Merged PRs (30d)
19

Description

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[ ] Bug

Version

Please specify what version of the library you are using: [3.12.0]

Expected / Desired Behavior / Question

People picker should be accessible to users when the control is used in a Teams application and the user is in high contrast mode

Observed Behavior

When teams is using high contrast mode the following behaviour is observed:

  • The drop down area that shows a list of search results uses white text on a white background when the mouse hovers over one of the items
    white-text-on-white-background-on-hover

  • When a user is selected the persona control within the people picker control shows white text on a white background

selected-user

Steps to Reproduce

The issues was recreated by creating a new SPFX webpart with a single people picker control and deploying this to sharepoint and teams

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the People Picker control and reproduce the issue in a new SPFx web part deployed to SharePoint and Teams, with Teams high contrast mode enabled. Inspect the dropdown search-result hover state and the selected-user persona state. Done means both areas have readable foreground and background colors in high contrast mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.