Comments (1)
@ruthshemla just to confirm, is this the outline you're referring to in this bug?:
![screenshot of the Fluent Tree default example, with a black 2px outline around the first tree item](https://private-user-images.githubusercontent.com/3819570/342466214-b2e12577-f55d-4640-829c-ac1860b8b212.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzMDA1NzMsIm5iZiI6MTcxOTMwMDI3MywicGF0aCI6Ii8zODE5NTcwLzM0MjQ2NjIxNC1iMmUxMjU3Ny1mNTVkLTQ2NDAtODI5Yy1hYzE4NjBiOGIyMTIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjVUMDcyNDMzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDM3ZjlhNmM2NWJlNjhmOGI3ODcxYTk5M2MyN2VkNTYwNWUxNmQ4NjA5YzQ3Y2NjNWI1OTQ4NTk2NzFjODMwMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.eCu2JwjCTXAyJ3sxc_2Qr1EkH_u2wI9FXBwqMWmrJJU)
If so, that's the focus outline, and we intentionally only show it when the user is navigating via keyboard. It only indicates focus, not selection. Selection is indicated with checkboxes like these (or round ones in the case of single-select):
![screenshot of the Fluent Tree selection example, no focus outline is showing but tree items have either empty square checkboxes showing an unchecked state, or checked checkboxes showing a checked state. One parent has a partially checked checkbox, showing a mixed state.](https://private-user-images.githubusercontent.com/3819570/342466788-3bb7edf4-3491-48f3-8834-60a3f4ccc878.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkzMDA1NzMsIm5iZiI6MTcxOTMwMDI3MywicGF0aCI6Ii8zODE5NTcwLzM0MjQ2Njc4OC0zYmI3ZWRmNC0zNDkxLTQ4ZjMtODgzNC02MGEzZjRjY2M4NzgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjVUMDcyNDMzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzAyYjAwMmZlNzIxMGJmNjkwNmVjNTgwZGRmYTkxZTc3NTNiZDQxYzA2YTUzZjFjZmZjYTNmOTg2NmI1YjYzNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.xdaWi_u2fL1CliwRQNhttioiYRWjo1s2OfRf5lIfqC4)
Could you clarify why you want an outline to show up on click? Or did you mean something other than the focus outline?
from fluentui.
Related Issues (20)
- [Bug]: Focus border generated by `createFocusOutlineStyle` can be cut/invisible when parent container is `overflow: hidden` HOT 1
- [Bug]: Narrator is announcing incorrect information on select/close of a Popover HOT 3
- [Bug]: Accessibility issue while using PopoverTrigger inside Menu HOT 1
- [Bug]: Cannot commit change to `/tools` HOT 1
- [Bug]: Fluent V9 Tree : onOpenChange is not correctly sending/recieving the Enter keydown event to TreeItemOpenChangeEvent HOT 6
- [Bug]: Rendering issue of Combobox Component in some specific width range. HOT 4
- [Bug]: Invalid ToggleButton styles HOT 3
- Hover cards are inaccessible in Teams high contrast theme HOT 1
- Root tree calls `onOpenChange` with `false` on every tree item click
- [Bug]: Typo in Stack section in React FluentUI documentation
- [Bug]: The latest version of `@fluentui/merge-styles` package is breaking. HOT 5
- [Bug]: Inconsistent Typography Font Weights in Fluent UI Implementation HOT 2
- Keytips HOT 1
- [Feature]: List View and Preview Dialog Functionality HOT 2
- ColorPicker HOT 1
- [Bug]: Fluent react v8 to v9 migration documentation out of date HOT 2
- [Feature]: Create theme with key color HOT 2
- [Feature]: ListItem onAction should pass value
- [Bug]: MenuButton transparent appearance styling not consistent when rendered within a Popover trigger element HOT 1
- [Bug]: react-dialog breaking changes to type of children HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluentui.