modifications to extension ffor 3 a11y tests

.eslintrc.js

@@ -11,6 +11,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+
 module.exports = {
 	env: {
 		browser: true,
@@ -111,6 +112,6 @@ module.exports = {
 		'jsx-a11y/no-static-element-interactions': [0],
 		'jsx-a11y/label-has-associated-control': [0], //ToDo: enable this check. Throws 2 errors, should work.
 		'jsx-a11y/media-has-caption': [0], //ToDo: enable this check. Need Captions to enable.
-		'jsx-a11y/anchor-has-content': [0], //ToDo: enable this check. Need anchor text to enable.
+		'jsx-a11y/anchor-has-content': [1], //ToDo: enable this check. Need anchor text to enable.
 	},
 };

app/hub/Views/TutorialViews/TutorialVideoView/TutorialVideoView.jsx

@@ -35,6 +35,7 @@ const TutorialVideoView = () => (
 					<source type="video/mp4" src="https://www.ghostery.com/wp-content/uploads/2018/08/ghostery_promo.mp4?_=1" />
 					<source type="video/webm" src="https://www.ghostery.com/wp-content/uploads/2018/08/ghostery_promo.webm?_=1" />
 					<source type="video/ogg" src="https://www.ghostery.com/wp-content/uploads/2018/08/ghostery_promo.ogv?_=1" />
+					<track kind="captions" />
 				</video>
 			</div>
 			<div className="TutorialView__tagline text-center">

app/panel/components/BuildingBlocks/ToggleSlider.jsx

@@ -69,8 +69,9 @@ class ToggleSlider extends React.Component {
 		});
 		return (
 			<div className={compClassNames}>
-				<label className={labelClassNames}>
+				<label className={labelClassNames} htmlFor="checkboxID">
 					<input
+						id="checkboxID"
 						type="checkbox"
 						onChange={this._handleChange}
 						checked={checked}

app/panel/components/CreateAccount.jsx

@@ -214,9 +214,10 @@ class CreateAccount extends React.Component {
 							<div className="row">
 								<div className="small-12 columns">
 									<div id="create-account-legal-consent-checkbox" className={(legalConsentNotCheckedError ? 'checkbox-error' : '')}>
-										<input id="legalConsentChecked" name="legalConsentChecked" type="checkbox" checked={legalConsentChecked} onChange={this.handleCheckboxChange} />
 										<label htmlFor="legalConsentChecked">
 											<I18nWithLink value="create_account_form_legal_consent_checkbox_label" />
+											<input id="legalConsentChecked" name="legalConsentChecked" type="checkbox" checked={legalConsentChecked} onChange={this.handleCheckboxChange} />
+
 										</label>
 									</div>
 								</div>

app/shared-components/SteppedNavigation/SteppedNavigation.jsx

@@ -36,9 +36,21 @@ const SteppedNavigation = (props) => {
 	const circles = [];
 	for (let i = 1; i <= totalSteps; i++) {
 		// Use <a> without an href prop to prevent a call to history with the same URL
-		circles.push((i === activeIndex) ? <a className="active" key={`nav-${i}`} /> : <NavLink to={`${i}`} key={`nav-${i}`} />);
+		circles.push((i === activeIndex) ?
+			<a aria-label="Stepped navigation link to current page" className="active" key={`nav-${i}`}><span className="a11y-label"> Active link span text</span></a>
+			: <NavLink aria-label="Stepped naivation link to another page" to={`${i}`} key={`nav-${i}`}><span className="a11y-label">Inactive stepped navigation link span text</span></NavLink>);
 	}
 
+	// ilya's notes:
+	/* for (let i = 1; i <= totalSteps; i++) {
+   // Use <a> without an href prop to prevent a call to history with the same URL
+   circles.push((i === activeIndex) ?
+      // VoiceOver on Mac does NOT read the span text
+      <a aria-label="Stepped navigation link to current page" className="active" key={`nav-${i}`}><span className="a11y-label">Active link span text</span></a>
+      : <NavLink aria-label="Stepped navigation link to another page" to={`${i}`} key={`nav-${i}`}><span className="a11y-label">Inactive stepped navigation link span text</span></NavLink>);
+}
+	*/
+
 	return (
 		<div className="row align-center">
 			<div className="columns small-12">

app/shared-components/SteppedNavigation/SteppedNavigation.scss

@@ -35,6 +35,9 @@
 	border-radius: 50%;
 	background-color: #cccccc;
 	border: 1px solid #a4a4a4;
+	& .a11y-label {
+		visibility: hidden;
+	  }
 }
 .SteppedNavigation__circles a.active::after {
 	content: '';