Skip to content

Latest commit

 

History

History
 
 

devtools-view

README.md

@fluid-internal/devtools-view

This library contains a simple view for visualizing data generated by Fluid Devtools.

This library also powers our Chrome Extension: @fluid-internal/devtools-browser-extension.

IMPORTANT: This package is intended strictly as an implementation detail of the Fluid Framework and is not intended for public consumption. We make no stability guarantees regarding its APIs.

Usage

This library has 2 primary entry-points:

  1. A React component: DevtoolsPanel.
  2. An environment-agnostic rendering hook: TODO.

Working in the package

Build

To build the package locally, first ensure you have run pnpm install from the root of the mono-repo. Next, to build the code, run npm run build from the root of the mono-repo, or use fluid-build via fluid-build -t build.

  • Note: Once you have run a build from the root, assuming no other changes outside of this package, you may run npm run build directly within this directory for a faster build. If you make changes to any of this package's local dependencies, you will need to run a build again from the root before building again from directly within this package.

Testing

This package uses jest and testing-library/react to power its unit tests. The corresponding test modules can be found under src/test.

To run only the unit tests, first ensure you have followed the build steps above. Next, run npm run test:jest from a terminal within this directory.

Accessibility Best Practices

When developing components for this library, it's important to have accessibility in mind. Here are some guidelines and best practices to ensure your components are accessible to all users:

  1. Keyboard Navigation:
    • Ensure all interactive elements are reachable via keyboard navigation. Use the tabIndex attribute to control the tab order of elements. For example, setting tabIndex="0" will include an element in the natural tab order, while tabIndex="-1" will remove it from the tab order but still allow it to receive focus programmatically.
    • Ensure that components such as dropdowns, buttons, and links can be operated using the keyboard. Implement keyboard event handling (onKeyDown, onKeyPress) for actions like opening a dropdown with the "Enter" key or navigating between items with the arrow keys.
  2. ARIA Attributes:
    • Use ARIA (Accessible Rich Internet Applications) attributes to provide additional information about UI components to screen readers. For example, use aria-label, aria-labelledby, or aria-describedby to provide accessible names or descriptions.
    • For components like dropdowns or modal dialogs, consider using roles such as role="menu" and role="dialog" to convey the purpose of the elements to assistive technologies.
  3. Color Contrast:
    • Ensure that the color contrast ratio between text and background is sufficient. Aim for a contrast ratio of at least 4.5:1. You can use online tools to verify color contrast compliance with WCAG (Web Content Accessibility Guidelines).

Contribution Guidelines

There are many ways to contribute to Fluid.

Detailed instructions for working in the repo can be found in the Wiki.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

Help

Not finding what you're looking for in this README? Check out fluidframework.com.

Still not finding what you're looking for? Please file an issue.

Thank you!

Trademark

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.

Use of these trademarks or logos must follow Microsoft's Trademark & Brand Guidelines.

Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.