ampproject · swissspidy · Sep 24, 2019 · Sep 18, 2019 · Sep 19, 2019 · Sep 19, 2019
diff --git a/assets/src/stories-editor/components/autocomplete/index.js b/assets/src/stories-editor/components/autocomplete/index.js
@@ -47,6 +47,7 @@ class Autocomplete extends OriginalAutocomplete {
 			tStatusQueryTooShort,
 			tStatusSelectedOption,
 			tStatusResults,
+			ariaLabelBy,
 		} = this.props;
 		const { focused, hovered, menuOpen, options, query, selected } = this.state;
 		const autoselect = this.hasAutoselect();
@@ -100,7 +101,7 @@ class Autocomplete extends OriginalAutocomplete {
 				) }
 
 				<input
-					aria-activedescendant={ optionFocused ? `${ id }__option--${ focused }` : false }
+					aria-activedescendant={ optionFocused ? `${ id }__option--${ focused }` : '' }
 					aria-owns={ `${ id }__listbox` }
 					autoComplete="off"
 					className={ `${ inputClassName }${ inputModifierFocused }${ inputModifierType }` }
@@ -132,6 +133,7 @@ class Autocomplete extends OriginalAutocomplete {
 					className={ `${ menuClassName } ${ menuModifierDisplayMenu } ${ menuModifierVisibility }` }
 					onMouseLeave={ ( event ) => this.handleListMouseLeave( event ) }
 					id={ `${ id }__listbox` }
+					aria-labelledby={ ariaLabelBy }
 					role="listbox"
 				>
 					{ options.map( ( option, index ) => {
@@ -160,7 +162,13 @@ class Autocomplete extends OriginalAutocomplete {
 					} ) }
 
 					{ showNoOptionsFound && (
-						<li className={ `${ optionClassName } ${ optionClassName }--no-results` }>{ tNoResults() }</li>
+						<li
+							className={ `${ optionClassName } ${ optionClassName }--no-results` }
+							role="option"
+							tabIndex="-1"
+						>
+							{ tNoResults() }
+						</li>
 					) }
 				</ul>
 			</div>

diff --git a/assets/src/stories-editor/components/autocomplete/status.js b/assets/src/stories-editor/components/autocomplete/status.js
@@ -57,7 +57,7 @@ Status.propTypes = {
 	length: PropTypes.number.isRequired,
 	queryLength: PropTypes.number.isRequired,
 	minQueryLength: PropTypes.number.isRequired,
-	selectedOption: PropTypes.func,
+	selectedOption: PropTypes.string,
 	selectedOptionIndex: PropTypes.number,
 	tQueryTooShort: PropTypes.func.isRequired,
 	tNoResults: PropTypes.func.isRequired,

diff --git a/assets/src/stories-editor/components/font-family-picker/index.js b/assets/src/stories-editor/components/font-family-picker/index.js
@@ -63,6 +63,7 @@ function FontFamilyPicker( {
 						inputValue: inputValueTemplate,
 					}
 				}
+				ariaLabelBy={ `${ id }__help` }
 				minLength={ 2 }
 				onConfirm={ onChange }
 				showAllValues={ false }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "@wordpress/hooks": "2.6.0",
     "@wordpress/html-entities": "2.5.0",
     "@wordpress/i18n": "3.6.0",
+    "@wordpress/jest-puppeteer-axe": "1.3.0",
     "@wordpress/keycodes": "2.6.0",
     "@wordpress/plugins": "2.7.0",
     "@wordpress/postcss-themes": "2.2.0",

diff --git a/tests/e2e/config/bootstrap.js b/tests/e2e/config/bootstrap.js
@@ -122,6 +122,83 @@ function observeConsoleLogging() {
 	} );
 }
 
+/**
+ * Runs Axe tests when the story editor is found on the current page.
+ *
+ * @return {?Promise} Promise resolving once Axe texts are finished.
+ */
+async function runAxeTestsForStoriesEditor() {
+	if ( ! await page.$( '#amp-story-editor' ) ) {
+		return;
+	}
+
+	await expect( page ).toPassAxeTests( {
+		/**
+		 * Rules are disabled, as there are still accessibility issues within gutenberg.
+		 *
+		 * See: https://github.com/WordPress/gutenberg/pull/15018 & https://github.com/WordPress/gutenberg/issues/15452
+		 */
+		disabledRules: [
+			'aria-allowed-role',
+			'aria-hidden-focus',
+			'button-name',
+			'color-contrast',
+			'duplicate-id',
+			'region',
+		],
+		exclude: [
+			// Ignores elements created by metaboxes.
+			'.edit-post-layout__metaboxes',
+			// Ignores elements created by TinyMCE.
+			'.mce-container',
+			// Ignore attachment close button.
+			'.amp-story-page-attachment-close-button',
+		],
+	} );
+}
+
+/**
+ * Runs Axe tests when the block editor is found on the current page.
+ *
+ * @return {?Promise} Promise resolving once Axe texts are finished.
+ */
+async function runAxeTestsForBlockEditor() {
+	if ( ! await page.$( '.block-editor' ) ) {
+		return;
+	}
+
+	// If amp story editor is found, don't run tests.
+	if ( await page.$( '#amp-story-editor' ) ) {
+		return;
+	}
+
+	await expect( page ).toPassAxeTests( {
+		/**
+		 * Rules are disabled, as there are still accessibility issues within gutenberg.
+		 *
+		 * See: https://github.com/WordPress/gutenberg/pull/15018 & https://github.com/WordPress/gutenberg/issues/15452
+		 */
+		disabledRules: [
+			'aria-allowed-role',
+			'aria-valid-attr-value',
+			'button-name',
+			'color-contrast',
+			'dlitem',
+			'duplicate-id',
+			'label',
+			'link-name',
+			'listitem',
+			'region',
+		],
+		exclude: [
+			// Ignores elements created by metaboxes.
+			'.edit-post-layout__metaboxes',
+			// Ignores elements created by TinyMCE.
+			'.mce-container',
+		],
+	} );
+}
+
 /**
  * Before every test suite run, delete all content created by the test. This ensures
  * other posts/comments/etc. aren't dirtying tests and tests don't depend on
@@ -140,6 +217,8 @@ beforeAll( async () => {
 // eslint-disable-next-line jest/require-top-level-describe
 afterEach( async () => {
 	await clearLocalStorage();
+	await runAxeTestsForStoriesEditor();
+	await runAxeTestsForBlockEditor();
 	await setBrowserViewport( 'large' );
 } );
 

diff --git a/tests/e2e/jest.config.js b/tests/e2e/jest.config.js
@@ -8,6 +8,7 @@ module.exports = {
 	],
 	setupFilesAfterEnv: [
 		'<rootDir>/config/bootstrap.js',
+		'@wordpress/jest-puppeteer-axe',
 		'expect-puppeteer',
 	],
 	testPathIgnorePatterns: [

diff --git a/tests/e2e/specs/stories-editor/block-position-controls.js b/tests/e2e/specs/stories-editor/block-position-controls.js
@@ -104,7 +104,7 @@ describe( 'Block Position Controls', () => {
 
 			// Since the selected block is already at the back, the 'Back' and 'Backward' buttons should be disabled.
 			expect( page ).toMatchElement( '.amp-story-controls-send-back[aria-disabled="true"]' );
-			expect( page ).toMatchElement( '.amp-story-controls-send-backward[aria-disabled="true"]' );
+			expect( page ).toMatchElement( '.amp-story-controls-send-backwards[aria-disabled="true"]' );
 		} );
 	} );
 } );