Accessibility behavior tests and documentation generation

change/@fluentui-eslint-plugin-2020-09-24-17-16-06-mituron-acc-behavior-tests-docs.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "removing overrides from eslintrc.json file",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "email not defined",
+  "dependentChangeType": "none",
+  "date": "2020-09-24T15:16:06.898Z"
+}

packages/a11y-testing/package.json

@@ -30,7 +30,6 @@
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/a11y-rules": "^0.1.0",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {

packages/a11y-testing/src/definitions/Button/buttonBehaviorDefinition.ts

@@ -0,0 +1,49 @@
+import { Rule } from './../../types';
+import { BehaviorRule } from './../../rules/rules';
+
+export const buttonBehaviorDefinition: Rule[] = [
+  BehaviorRule.root()
+    .forProps({ as: 'div' })
+    .hasAttribute('role', 'button')
+    .description(`if element type is other than 'button'.`),
+  BehaviorRule.root()
+    .doesNotHaveAttribute('role')
+    .description(`if element is native button.`),
+  BehaviorRule.root()
+    .forProps({ as: 'div' })
+    .hasAttribute('tabindex', '0')
+    .description(`if element type is other than 'button'.`),
+  BehaviorRule.root()
+    .doesNotHaveAttribute('tabindex')
+    .description(`if element is native 'button'.`),
+  BehaviorRule.root()
+    .forProps({ disabled: true })
+    .hasAttribute('disabled')
+    .description(`based on 'disabled' prop when element is native 'button'.`),
+  BehaviorRule.root()
+    .forProps({ disabled: true, as: 'div' })
+    .doesNotHaveAttribute('disabled')
+    .description(`if element is NOT native 'button'.`),
+  BehaviorRule.root()
+    .forProps({ disabled: true, loading: true })
+    .doesNotHaveAttribute('disabled')
+    .description(`if element is loading.`),
+  BehaviorRule.root()
+    .forProps({ disabled: true })
+    .hasAttribute('aria-disabled', 'true')
+    .description(`if property 'disabled' is 'true'.`),
+  BehaviorRule.root()
+    .forProps({ loading: true })
+    .hasAttribute('aria-disabled', 'true')
+    .description(`if property 'aria-disabled' is 'true'.`),
+  BehaviorRule.root()
+    .forProps({ as: 'div' })
+    .pressSpaceKey()
+    .verifyOnclickExecution()
+    .description(`when element is not native 'button' or 'link'.`),
+  BehaviorRule.root()
+    .forProps({ as: 'div' })
+    .pressEnterKey()
+    .verifyOnclickExecution()
+    .description(`when element is not native 'button' or 'link'.`),
+];

packages/a11y-testing/src/definitions/Button/buttonGroupBehaviorDefinition.ts

@@ -0,0 +1,4 @@
+import { Rule } from './../../types';
+import { BehaviorRule } from './../../rules/rules';
+
+export const buttonGroupBehaviorDefinition: Rule[] = [BehaviorRule.root().hasAttribute('role', 'group')];

packages/a11y-testing/src/definitions/Button/toggleButtonBehaviorDefinition.ts

@@ -0,0 +1,12 @@
+import { Rule } from './../../types';
+import { BehaviorRule } from './../../rules/rules';
+
+export const toggleButtonBehaviorDefinition: Rule[] = [
+  BehaviorRule.root()
+    .forProps({ active: 'true' })
+    .hasAttribute('aria-pressed', 'true')
+    .description(`if element has active prop.`),
+  BehaviorRule.root()
+    .hasAttribute('aria-pressed', 'false')
+    .description(`if element has no 'active' prop.`),
+];

packages/a11y-testing/src/definitions/index.ts

@@ -0,0 +1,3 @@
+export * from './Button/buttonBehaviorDefinition';
+export * from './Button/buttonGroupBehaviorDefinition';
+export * from './Button/toggleButtonBehaviorDefinition';

packages/a11y-testing/src/index.ts

@@ -1,3 +1,5 @@
 export * from './types';
 export * from './validators';
 export * from './facades';
+export * from './rules';
+export * from './definitions';

packages/a11y-rules/src/index.ts → packages/a11y-testing/src/rules/index.ts

@@ -1,2 +1 @@
 export * from './rules';
-export * from './types';

packages/a11y-rules/src/rules.tsx → packages/a11y-testing/src/rules/rules.tsx

@@ -1,4 +1,4 @@
-import { Props, PropValue, Rule, Slot } from './types';
+import { Props, PropValue, Rule, Slot } from '../types';
 
 export class SlotRule implements Rule {
   private data: Slot;

packages/a11y-testing/src/types.ts

@@ -15,3 +15,22 @@ export interface TestFacade {
   pressEnterKey(slotName: string): void;
   verifyOnclickExecution(slotName: string): boolean;
 }
+
+export interface Rule {
+  stringify: () => string;
+}
+
+export interface Slot {
+  name: string;
+  props: Props[];
+  expectAttribute: boolean;
+  expectedAttribute: string;
+  expectedValue: PropValue;
+  description: string;
+  hidden: boolean;
+  afterEventData: Event;
+  checkClick: boolean;
+  checkSpaceKeyPressed: boolean;
+  checkEnterKeyPressed: boolean;
+  checkOnClickWasExecuted: boolean;
+}

packages/a11y-testing/src/validators/validate.ts

@@ -1,6 +1,6 @@
 import { Props, TestFacade } from '../types';
-
-import { SlotRule, Rule } from '@fluentui/a11y-rules';
+import { Rule } from './../types';
+import { SlotRule } from './../rules/rules';
 
 export const validateSlot = (rule: SlotRule, baseTestFacade: TestFacade): void => {
   const slot = rule.getData();

packages/a11y-testing/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "composite": true,
     "baseUrl": ".",
     "outDir": "lib",
     "target": "es6",

packages/eslint-plugin/src/configs/react-northstar.js

@@ -23,6 +23,10 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
 
     'import/no-default-export': 'error',
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: ['**/*-test.ts*', '**/*.test.ts*', '*.config.js', 'gulpfile.ts', 'just.config.ts'] },
+    ],
 
     // False positive on arg types:
     // https://github.com/typescript-eslint/typescript-eslint/issues/46
@@ -48,10 +52,6 @@ module.exports = {
     'import/export': 'off',
     'import/first': 'off',
     'import/no-dynamic-require': 'off',
-    'import/no-extraneous-dependencies': [
-      'error',
-      { devDependencies: ['**/*-test.ts*', '**/*.test.ts*', '*.config.js', 'gulpfile.ts', 'just.config.ts'] },
-    ],
     'import/no-named-default': 'off',
     'import/no-useless-path-segments': 'off',
     'import/order': 'off',

packages/fluentui/accessibility/src/behaviors/Button/buttonBehavior.ts

@@ -1,14 +1,6 @@
 import { keyboardKey, SpacebarKey } from '@fluentui/keyboard-key';
 import { Accessibility, AccessibilityDefinition } from '../../types';
 
-/**
- * @specification
- * Adds role='button' if element type is other than 'button'. This allows screen readers to handle the component as a button.
- * Adds attribute 'tabIndex=0' if element type is other than 'button'.
- * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
- * Adds attribute 'aria-disabled=true' based on the property 'loading'.
- * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'.
- */
 export const buttonBehavior: Accessibility<ButtonBehaviorProps> = props => {
   const definition: AccessibilityDefinition = {
     attributes: {

packages/fluentui/accessibility/src/behaviors/Button/buttonGroupBehavior.ts

@@ -1,9 +1,5 @@
 import { Accessibility } from '../../types';
 
-/**
- * @specification
- * Adds role 'group' to 'root' slot.
- */
 export const buttonGroupBehavior: Accessibility<ButtonGroupBehaviorProps> = props => ({
   attributes: {
     root: {

packages/fluentui/accessibility/src/behaviors/Button/toggleButtonBehavior.ts

@@ -1,14 +1,6 @@
 import { Accessibility } from '../../types';
 import { buttonBehavior, ButtonBehaviorProps } from './buttonBehavior';
 
-/**
- * @specification
- * Adds role='button' if element type is other than 'button'. This allows screen readers to handle the component as a button.
- * Adds attribute 'tabIndex=0' if element type is other than 'button'.
- * Adds attribute 'aria-pressed=true' based on the property 'active'.
- * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
- * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'.
- */
 export const toggleButtonBehavior: Accessibility<ToggleButtonBehaviorProps> = props => {
   const behaviorData = buttonBehavior(props);
   behaviorData.attributes.root = {

packages/fluentui/accessibility/test/behaviors/testHelper.tsx

@@ -18,6 +18,9 @@ export interface TestDefinition {
 }
 
 const skipSpecChecksForFiles = [
+  'buttonBehavior.ts', // tests are written new way in buttonBehaviorDefinition.ts
+  'buttonGroupBehavior.ts', // tests are written new way in buttonGroupBehaviorDefinition.ts
+  'toggleButtonBehavior.ts', // tests are written new way in toggleButtonBehaviorDefinition.ts
   'listBehavior.ts', // tests are written in listBehavior-test.tsx
   'listItemBehavior.ts', // tests are written in listItemBehavior-test.tsx
   'alertBehavior.ts', // tests are written in alertBehavior-test.tsx

packages/fluentui/docs/package.json

@@ -47,6 +47,7 @@
     "react-vis": "^1.11.6"
   },
   "devDependencies": {
+    "@fluentui/a11y-testing": "^0.1.0",
     "@fluentui/eslint-plugin": "^0.54.1",
     "@types/classnames": "^2.2.9",
     "@types/color": "^3.0.0",

packages/fluentui/docs/tsconfig.json

@@ -4,6 +4,7 @@
     "module": "esnext",
     "paths": {
       "@fluentui/*": ["packages/fluentui/*/src/index"],
+      "@fluentui/a11y-testing": ["packages/a11y-testing/src/index"],
       "@fluentui/dom-utilities": ["packages/dom-utilities/src"],
       "@fluentui/keyboard-key": ["packages/keyboard-key/src/index"],
       "@fluentui/react-compose": ["packages/react-compose/src/index"],

packages/fluentui/react-northstar/package.json

@@ -32,6 +32,7 @@
     "react-transition-group": "^4.3.0"
   },
   "devDependencies": {
+    "@fluentui/a11y-testing": "^0.1.0",
     "@fluentui/eslint-plugin": "^0.54.1",
     "@fluentui/react-conformance": "^0.1.4",
     "@testing-library/jest-dom": "^5.1.1",

packages/fluentui/react-northstar/src/components/Button/Button.tsx

@@ -232,7 +232,6 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...getA11yProps('root', {
           onClick: handleClick,
-          disabled,
           className: classes.root,
           onFocus: handleFocus,
           ref,