Skip to content
main
Switch branches/tags
Code

Latest commit

…quirement rows (#5111)

#### Details

This PR enables the Details View > Fast Pass > Tab Stops' new Requirements table to use Office Fabric's default on-hover/on-focus styling that darkens the row backgrounds, to be consistent with the similar behavior in the similar looking Assisted Instance tables in Assessment.

The implementation for this is a little more complicated than expected. The on-hover/on-focus behavior is actually the default fabric behavior; Assessment doesn't do anything special to enable it. The reason we weren't seeing it in FastPass was that we were previously using a very hacky bit of CSS to override the background of the Fabric `DetailsView` to match the slightly-darker-than-usual-gray background we use in FastPass pages (it's different from Assessment to support Cards-based views that want to use our "normal" white background color for Card backgrounds):

```scss
.requirement-table {
    // ...
    * {
        background-color: $neutral-2;
    }
}
```

This was used because the fabric `DetailsView` contains many implementation-detail subcomponents (for rows, cells, headers, etc) that each individually apply overlapping background-color styles; if you just apply background-color to our containing `requirement-table` class, it doesn't have any effect on its own. However, this also has the effect of overriding all of the `:hover` and `:focus` styling under the table.

I originally tried using various combinations of `:not(:focus):not(:hover)` styles, but it rapidly devolved into a big mess of very hacky CSS. Instead, this PR implements a solution based on Office Fabric Themes, which are Fabric's intended way to solve this problem but not the way we normally use in our codebase (we usually use hacky overrides of CSS styles that are Fabric implementation details instead).

The typical Fabric-recommended solution for this is to use their `<Customizer>` to temporarily override the globally-loaded theme; however, this has the disadvantage that it isn't cognizant of the way we swap between "default" and "high-contrast" theme palettes at runtime in our top-level `<Theme>` component. This PR implements a new `<ThemeFamilyCustomizer>` which wraps the fabric `<Customizer>` in a way which respects our app's high contrast mode setting.

##### Animated screenshots

Before:

![animation showing no background color changes on hover/focus](https://user-images.githubusercontent.com/376284/151073621-adfcdd04-33de-4a77-8eed-ecb79cd42936.gif)

After (default theme):

![animation showing background color changing on hover/focus](https://user-images.githubusercontent.com/376284/151073627-a7fe0460-af59-40de-94bb-7c690f959d2a.gif)

After (app high contrast setting):

![animation showing background color changing on hover/focus](https://user-images.githubusercontent.com/376284/151074562-16c08b67-c134-42d2-92dd-04a66af30373.gif)

After (Windows "Night Sky" HC theme):

![animation showing background color changing on hover/focus](https://user-images.githubusercontent.com/376284/151076651-43484480-bb32-4958-aacf-3bdc9e6b2516.gif)

##### Motivation

* Make table hover/focus behavior consistent between Assessment and FastPass
* Set up infrastructure that can be used in other components to avoid some types of CSS hacks

##### Context

n/a

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a" in the checkbox -->
- [x] Addresses an existing issue: Part of #5099
- [x]  Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See `CONTRIBUTING.md`.
- [x] (UI changes only) Added screenshots/GIFs to description above
- [x] (UI changes only) Verified usability with NVDA/JAWS
60a93de

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time

Product Logo Accessibility Insights for Web & Android

Build Status codecov Chrome Web Store Chrome Web Store Chrome Web Store Dependabot Status

Two projects are built from this repository:

  • Accessibility Insights for Web is a browser extension for Google Chrome and the new Microsoft Edge, used for assessing the accessibility of web sites and web applications.
  • Accessibility Insights for Android is a cross-platform desktop tool used for testing accessibility of Android applications.

Install Accessibility Insights for Web

Install Accessibility Insights for Android

Data/Telemetry

By opting into telemetry, you help the community develop inclusive software. We collect anonymized data to identify the top accessibility issues found by the users. This will help focus the accessibility tools and standards community to improve guidelines, rules engines, and features.

This project collects usage data and sends it to Microsoft to help improve our products and services. Read our privacy statement to learn more.

Reporting security vulnerabilities

If you believe you have found a security vulnerability in this project, please follow these steps to report it. For more information on how vulnerabilities are disclosed, see Coordinated Vulnerability Disclosure.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and 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. Any use of third-party trademarks or logos are subject to those third-party's policies.

FAQ

Please visit our FAQ page.

Contributing

All contributions are welcome! To get started, please read through our CONTRIBUTING guidelines for this project. After that, see:

Code of Conduct

Please read through our Code of Conduct to this project.