Отключить NVDA от чтения "кликабельно" для серии highchart - PullRequest
0 голосов
/ 16 июня 2020

Как я могу запретить программе чтения с экрана NVDA читать «кликабельно» для серии Highcharts? Значения серии заключены в тег tspan и не имеют связанных с ним событий нажатия. Заранее спасибо за помощь.

enter image description here

Добавление 2-го снимка экрана (я прикреплю скрипку, как только разберусь) в ответ Грэму Ритчу Комментарий ie. enter image description here

window.EJ = window.EJ || {},
  EJ.features = EJ.features || {};



EJ.events = {};
(function(q) {
  'use strict';

	var topics = {},
		subUid = -1;

	q.subscribe = function(topic, func) {
		if (!topics[topic]) {
			topics[topic] = [];
		}

		var token = (++subUid).toString();
		topics[topic].push({
			token: token,
			func: func
		});

		return token;
	};

	q.publish = function(topic, args) {
		if (!topics[topic]) {
			return false;
		}

		setTimeout(function() {
			var subscribers = topics[topic],
				len = subscribers ? subscribers.length : 0;

			while (len--) {
				subscribers[len].func(topic, args);
			}
		}, 0);

		return true;
	};

	q.unsubscribe = function(token) {
		for (var m in topics) {
			if (topics[m]) {
				for (var i = 0, j = topics[m].length; i < j; i++) {
					if (topics[m][i].token === token) {
						topics[m].splice(i, 1);
						return token;
					}
				}
			}
		}
		return false;
	};
}(EJ.events));
/**
 * Features loader
 * Iterates over all data-features attributes in the DOM and will execute EJ.features.featureName.init()
 */

EJ.features = {
	init: function() {
		var features = $('[data-features]');
		if (!features.length) return false;
		for (var i = 0, n = features.length; i < n; i++) {
			var $el = $(features[i]),
				func = $el.data('features');
			if (this[func] && typeof this[func].init === 'function') {
				this[func].init($el);
			}
		}
	}
};

EJ.features.careerFitTool = (function(quiz) {
	quiz.init = function(el) {

		if (!el) {
			throw new Error('You must supply the constructor an element instance to operate on.');
		}

		var currQuestionIndex = -1,
			$start = el.find('.quiz-start'),
			$finish = el.find('.quiz-finish'),
			$startOver = el.find('.quiz-startOver'),
			$previousQuestion = el.find('.previous-question'),
			$nextQuestion = el.find('.next-question'),
			$stateDefault = el.find('.state-default'),
			$stateActive = el.find('.state-quiz'),
			$questions = el.find('.question-field'),
			$progressIndicator = el.find('.progress-indicator'),
			numOfQuestions = $questions.length
		$answers = el.find('.answer');

		var faPct = 0;
		var boaPct = 0;
		var hqPct = 0;

		$previousQuestion.on('click', function() {
			changeQuestion('prev');
		});
		$nextQuestion.on('click', function() {
			changeQuestion('next');
		});

		$start.on('click', function() {
			changeState('default', 'quiz');
		});
		$finish.on('click', function() {
			changeState('quiz', 'finished');
		});

		$startOver.on('click', function() {
			changeState('finished', 'default');
			currQuestionIndex = -1;
			$(el).find('form')[0].reset();
      focusLetsGetStarted();
		});

		$answers.on('change', function() {
			$nextQuestion.removeClass('disabled')
				.attr('disabled', false);
		})

		/**
		 * Change state of quiz.
		 * @param  {string} currState Current state (default/quiz/finished)
		 * @param  {string} nextState Desired next state (default/quiz/finished)
		 */
		function changeState(currState, nextState) {
			el.find('.state-' + currState).hide();
			el.find('.state-' + nextState).show();

			if (currState === 'default') {
				$previousQuestion.hide();
				$($questions[++currQuestionIndex]).show();
				$($progressIndicator[currQuestionIndex]).addClass('active');
			}
		}


		function computeJobFitPercents() {
			var faAmount = 0;
			var boaAmount = 0;
			var hqAmount = 0;
			var totalOptionAmount = 0;
			var faPercent = 0;
			var boaPercent = 0;
			var hqPercent = 0;


			for (var i = 1; i <= 45; i++) {
				var radios = document.getElementsByName('group' + i);
				for (var j = 0; j < radios.length; j++) {
					var radio = radios[j];
					var radioString = radio.value;
					if (radioString.indexOf("Financial Advisor") >= 0 && radio.checked) {
						faAmount++;
					}
					if (radioString.indexOf("Branch Office Administrator") >= 0 && radio.checked) {
						boaAmount++;
					}
					if (radioString.indexOf("Headquarters") >= 0 && radio.checked) {
						hqAmount++;
					}
				}
				totalOptionAmount = faAmount + boaAmount + hqAmount;
				faPercent = parseFloat(((faAmount / totalOptionAmount) * 100).toFixed());
				boaPercent = parseFloat(((boaAmount / totalOptionAmount) * 100).toFixed());
				hqPercent = parseFloat(((hqAmount / totalOptionAmount) * 100).toFixed());
				var totalPercent = faPercent + boaPercent + hqPercent;
			}

			generatePieChart(faPercent, boaPercent, hqPercent);


			// Populate the variables required to display the result
			faPct = faPercent;
			boaPct = boaPercent;
			hqPct = hqPercent;

		}

		/**
		 * This function generates pie chart for the given inputs.
		 * It generates a job fir graph for the questions answered by the user.
		 */
		function generatePieChart(faPrcnt, boaPrcnt, hqPrcnt) {

			Highcharts.setOptions({
				colors: ['#F3BD06', '#f6d050 ', '#fae49b']
			});

			// Build the chart
			$('#pieChartContainer').highcharts({
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
					width: 230

				},

				credits: {
					enabled: false
				},

				title: {
					text: null
				},

				scrollbar : {
					enabled : false
                },

				tooltip: {
					enabled: false,
					pointFormat: '<b>{point.percentage:.1f}%</b>'
				},

				plotOptions: {
					pie: {
						allowPointSelect: false,
						cursor: 'pointer',
						dataLabels: {
							enabled: false
						},
						showInLegend: true,
						borderWidth: 0,
						point: {
							events: {
								mouseOver: function() {
									//pieChart.tooltip.hide();
								}
							}
						}
					}
				},

				exporting: {
					enabled: false
				},

				legend: {
					layout: 'vertical',
					floating: false,
					borderRadius: 0,
					borderWidth: 0,
					align: 'center',
					verticalAlign: 'bottom',
					labelFormatter: function() {
						return this.y + '%' + ' ' + '-' + this.name;
					}
				},

				series: [{
					type: 'pie',
					name: 'Career Chart',
					point: {
						events: {
							legendItemClick: function() {
								return false;
							}
						}
					},
					data: [
						['Financial Advisor', faPrcnt],
						['Branch Office Administrator', boaPrcnt], {
							name: 'Headquarters',
							y: hqPrcnt,
							sliced: false,
							selected: false
						}
					]
				}]
			});
		}


		/**
		 * Go to previous or next question
		 * @param  {string} direction 'next' or 'prev'
		 * @return {boolean} are we on first or last question?
		 */
		function changeQuestion(direction) {
			//Call function to compute the job fit percent as per the answers selected by the user
			//computeJobFitPercents();

			var questionAnswers;
			var isAnswered;

			$($questions[currQuestionIndex]).hide();
			$progressIndicator.removeClass('active');

			if (direction === 'next') {
				currQuestionIndex++;
			} else {
				currQuestionIndex--;
			}

			$($progressIndicator[currQuestionIndex]).addClass('active');

			questionAnswers = $($questions[currQuestionIndex]).find('.answer');

			for (var i = 0, j = questionAnswers.length; i < j; i++) {
				if ($(questionAnswers[i]).prop('checked') === true) {
					isAnswered = true;
				}
			}

			if (isAnswered) {
				$nextQuestion.removeClass('disabled')
					.attr('disabled', false);
			} else {
				$nextQuestion.addClass('disabled')
					.attr('disabled', true);
			}

			if (currQuestionIndex === -1) {
				$($questions[currQuestionIndex]).hide();
				changeState('quiz', 'default');
			} else if (currQuestionIndex === numOfQuestions) {
				//Call function to compute the job fit percent as per the answers selected by the user
				computeJobFitPercents();

				$($questions[currQuestionIndex]).hide();
				changeState('quiz', 'finished');

				//Determine the result
				$('#faOutcome').hide();
				$('#faResultLink').hide();
				$('#boaOutcome').hide();
				$('#boaResultLink').hide()
				$('#hqOutcome').hide();
				$('#hqResultLink').hide();

				if (faPct >= boaPct) {
					if (faPct >= hqPct) {
						$('#faOutcome').show();
						$('#faResultLink').show();
					} else {
						$('#hqOutcome').show();
						$('#hqResultLink').show();
					}
				} else if (boaPct >= hqPct) {
					$('#boaOutcome').show();
					$('#boaResultLink').show();
				} else {
					$('#hqOutcome').show();
					$('#hqResultLink').show();
				}
			} else {
				$($questions[currQuestionIndex]).show();

				if (currQuestionIndex === 0) {
					$previousQuestion.hide();
				} else {
					$previousQuestion.show();
				}
			}

			return currQuestionIndex === numOfQuestions || currQuestionIndex === 0;
		}
	}

	return quiz;
}(EJ.features.careerFitTool || {}));


EJ.initialize = function() {
		EJ.features.init();
};


$(function() {
	EJ.initialize();
	$('.comp-registrationForm.modal').modal('show');
});
/* Enter Your Custom CSS Here */

input[type="checkbox"],input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
  margin: 4px 0 0;
	margin-top: 1px \9;
/* IE8-9 */
	line-height: normal;
  position: relative;
  opacity: 1;
  left: 0;
}

input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {
	outline: thin dotted #333 !important;
  outline-offset: -2px !important;
  outline-color: #000 !important;
}

.radio,.checkbox {
	display: block;
	min-height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 20px;
	vertical-align: middle;
}

.radio label,.checkbox label {
	display: inline;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {
	float: left;
	margin-left: -20px;
}

.radio + .radio,.checkbox + .checkbox {
	margin-top: -5px;
}

.radio-inline,.checkbox-inline {
	display: inline-block;
	padding-left: 20px;
	margin-bottom: 0;
	vertical-align: middle;
	font-weight: 400;
	cursor: pointer;
}

.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {
	margin-top: 0;
	margin-left: 10px;
}

input[type="radio"][disabled],fieldset[disabled] input[type="radio"],input[type="checkbox"][disabled],fieldset[disabled] input[type="checkbox"],.radio[disabled],fieldset[disabled] .radio,.radio-inline[disabled],fieldset[disabled] .radio-inline,.checkbox[disabled],fieldset[disabled] .checkbox,.checkbox-inline[disabled],fieldset[disabled] .checkbox-inline {
	cursor: not-allowed;
}

/*
# Button Primary
 */

.button,.button-cta,.button-cta-floating,.button-previous,.button-download,.button-expand,.button-arrow-only {
	color: #fff;
	background-color: #f8512e;
	border-color: #f96141;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15);
	-webkit-transition: background-color .25s ease-out;
	transition: background-color .25s ease-out;
	font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	padding: 8px 12px;
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}


.pull-right {
	float: right !important;
}

.hide {
	display: none !important;
}


.hidden {
	display: none !important;
	visibility: hidden !important;
}

/* start .comp-careerFitTool */
.comp-careerFitTool {
	background: #9b9998;
	padding-bottom: 15px;
	position: relative;
}

.comp-careerFitTool:before,.comp-careerFitTool:after {
	content: " ";
/* 1 */
	display: table;
/* 2 */
}

.comp-careerFitTool:after {
	clear: both;
}

@media screen and (min-width: 470px) {
	.comp-careerFitTool {
		padding-bottom: 35px;
	}
}

.career-tool-intro {
	color: #fff;
	font-size: 20px;
	padding: 20px;
}

@media screen and (min-width: 960px) {
	.career-tool-intro h3 {
		font-size: 32px;
	}
}

.career-tool-intro p {
	margin: 0;
}

@media screen and (min-width: 470px) {
	.career-tool-intro {
		padding: 25px;
	}
}

.career-tool-info {
	background: #fff;
	border: 1px solid #9b9998;
	color: #5b5955;
	padding: 20px;
}

.career-tool-info:before,.career-tool-info:after {
	content: " ";
/* 1 */
	display: table;
/* 2 */
}

.career-tool-info:after {
	clear: both;
}

.career-tool-info input[type="radio"],.career-tool-info input[type="checkbox"] {
	margin-right: 5px;
	vertical-align: top;
}

.career-tool-info label {
	font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-size: 18px;
}

@media screen and (min-width: 730px) and (max-width: 959px) {
	.career-tool-info .questions-intro {
		font-size: 20px;
	}
}

@media screen and (min-width: 960px) {
	.career-tool-info .questions-intro {
		font-size: 24px;
	}
}

.career-tool-info .questions {
	margin-bottom: 16px;
}

.career-tool-info .question {
	font-family: "Proxima Nova-Semibold",Helvetica,Arial,sans-serif;
	font-weight: 400;
}

@media screen and (min-width: 730px) and (max-width: 959px) {
	.career-tool-info .question {
		font-size: 20px;
	}
}

@media screen and (min-width: 960px) {
	.career-tool-info .question {
		font-size: 28px;
	}
}

.career-tool-info .question-field,.career-tool-info .question-changer,.career-tool-info .question-progress {
	padding-left: 50px;
}

.career-tool-info .question-field {
	position: relative;
}

.career-tool-info .question-number {
	font-family: "Proxima Nova-Bold",Helvetica,Arial,sans-serif;
	font-weight: 400;
	height: 31px;
	width: 31px;
	background: transparent url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/question-number.png) no-repeat 0 0;
	color: #fff;
	display: block;
	left: 2px;
	line-height: 33px;
	position: absolute;
	text-align: center;
	top: 4px;
}

.career-tool-info .question-changer {
	margin-bottom: 18px;
}

.career-tool-info .state,.career-tool-info .question-field {
	display: none;
}

.career-tool-info .state-default {
	display: block;
}

@media screen and (min-width: 1190px) {
	.career-tool-info .state-default .inner-wrap,.career-tool-info .state-finished .inner-wrap {
		font-size: 24px;
	}

	.career-tool-info .state-quiz {
		font-size: 20px;
	}
}

.career-tool-info .state .inner-wrap {
	float: left;
}

@media screen and (min-width: 730px) {
	.career-tool-info .state .inner-wrap {
		width: 60%;
	}
}

@media screen and (min-width: 1190px) {
	.career-tool-info .state .inner-wrap {
		padding-top: 35px;
		padding-right: 25px;
	}
}

@media screen and (min-width: 730px) {
	.career-tool-info .state .inner-wrap-right {
		float: right;
		width: 40%;
	}
}

@media screen and (max-width: 729px) {
	.career-tool-info .state img.pull-right {
		display: none;
	}
}

@media screen and (min-width: 730px) {
	.career-tool-info .state img.pull-right {
		margin-bottom: -25px;
		margin-right: -25px;
		margin-top: -25px;
		width: 40%;
	}
}

.career-tool-info .quiz-startOver {
	text-decoration: underline;
}

@media screen and (min-width: 730px) {
	.career-tool-info .pie-chart,.career-tool-info .legend {
		float: left;
		padding: 0 1%;
		width: 48%;
	}
}

.career-tool-info .pie-chart img {
	display: block;
	height: auto;
	max-width: 100%;
}

@media screen and (max-width: 729px) {
	.career-tool-info .pie-chart {
		display: none;
	}
}

@media screen and (min-width: 730px) {
	.career-tool-info .legend {
		margin-top: 20px;
	}
}

.career-tool-info .opportunity {
	margin-bottom: 18px;
}

.career-tool-info .opportunity:before,.career-tool-info .opportunity:after {
	content: " ";
/* 1 */
	display: table;
/* 2 */
}

.career-tool-info .opportunity:after {
	clear: both;
}

@media screen and (min-width: 470px) {
	.career-tool-info {
		padding: 25px;
	}
}

@media screen and (min-width: 730px) {
	.career-tool-info .score,.career-tool-info .position {
		float: left;
	}

	.career-tool-info .score {
		width: 40%;
	}

	.career-tool-info .position {
		width: 60%;
	}

	.career-tool-info .key {
		height: 20px;
		width: 20px;
		background: #fbc81b;
		display: block;
		float: left;
		margin-right: 15px;
	}

	.career-tool-info .key2 {
		background: #9b9998;
	}

	.career-tool-info .key3 {
		background: #3f3f3f;
	}
}

.progress-indicator {
	height: 18px;
	width: 18px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	background: transparent url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/progress-indicator.png) no-repeat 0 0;
}

.progress-indicator.active {
	background-image: url(https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/progress-indicator-active.png);
}

/* /end .comp-careerFitTool */
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://careers.edwardjones.com/images/highcharts.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

</head>
<body>

  <section class="comp-careerFitTool l-spacer" data-features="careerFitTool">
   <div class="career-tool-intro">
      <h2>Test highcharts after 3 questions</h2>
      <p>Find the Right Opportunity for You.</p>
   </div>
   <div class="career-tool-info">
      <form action="">
         <div class="state state-default">
            <div class="inner-wrap">
               <h3>Unsure of what role may be right for you?</h3>
               <p>Take a short quiz to see where your interests fit best at Edward Jones.</p>
               <p><a class="button-cta quiz-start" href="javascript:;">Let's get started</a></p>
            </div>
            <img src="https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/career-fit-tool.png" alt="Career fit tool" class="pull-right">
         </div>
         <div class="state state-quiz">
            <div class="questions">
               <fieldset id="questionDiv1" aria-live="assertive" class="question-field">
                  <legend>
                  <span aria-label="question number 1 of 8" class="question-number">1</span>
                  <p class="questions-intro">Please select the option below that best applies to you.</p>
                  <p class="question">The type of role that interests me more:</p>
                  </legend>
                  <div>
                  <p><label for="question100"> <input type="radio" id="question100" name="group1" class="answer" value="Financial Advisor">Entrepreneurial/Business Development</label></p>
                  <p><label for="question200"> <input type="radio" id="question200" name="group1" class="answer" value="Branch Office Administrator">Support someone building their business</label></p>
                  </div>
               </fieldset>
               <fieldset id="questionDiv2" aria-live="assertive" class="question-field">
                 <legend>
                  <img src="https://cdn-static.findly.com/wp-content/uploads/sites/936/2020/05/career-fit-tool.png" alt="career fit tool" class="pull-right">
                  <span aria-label="question number 2 of 8" class="question-number">2</span>
                  <p class="questions-intro">Please select the option below that best applies to you.</p>
                  <p class="question">How I would like to be compensated for my work:</p>
                 </legend>
                  <div>
                  <p><label for="question101"> <input type="radio" id="question101" name="group2" class="answer" value="Financial Advisor">Commissions</label></p>
                  <p><label for="question201"> <input type="radio" id="question201" name="group2" class="answer" value="Branch Office Administrator,Headquarters">Salary or hourly</label></p>
                  </div>
               </fieldset>
               <fieldset id="questionDiv3" aria-live="assertive" class="question-field">
                 <legend>
                  <span aria-label="question number 3 of 8" class="question-number">3</span>
                  <p class="questions-intro">Please select the option below that best applies to you.</p>
                  <p class="question">My preferred work style:</p>
                  </legend>
                  <div>
                  <p><label for="question102"> <input type="radio" id="question102" name="group3" class="answer" value="Financial Advisor,Branch Office Administrator">Work autonomously</label></p>
                  <p><label for="question202"> <input type="radio" id="question202" name="group3" class="answer" value="Headquarters">Work collaboratively on a team</label></p>
                  </div>
               </fieldset>
              </div>
            <p aria-live="assertive" class="question-changer">
               <a aria-label="go to previous question" class="button-previous previous-question" href="javascript:;">Previous</a>
               <a aria-label="go to next question" class="button-cta next-question disabled" href="javascript:;">Next</a>
            </p>
            <p class="question-progress">
               <span aria-live="assertive" class="progress-indicator"></span>
               <span aria-live="assertive" class="progress-indicator"></span>
               <span aria-live="assertive" class="progress-indicator"></span>
            </p>
         </div>
         <div aria-live="assertive" class="state state-finished">
            <div class="inner-wrap">
               <h3>You're Finished</h3>
               <p>Based on your responses, we recommend you explore career opportunities as a</p>
               <p id="faOutcome">Financial Advisor</p>
               <p id="boaOutcome">Branch Office Administrator</p>
               <p id="hqOutcome">Headquarters Professional</p>
            </div>
            <div class="inner-wrap-right">
               <div id="pieChartContainer" tabindex="0"></div>
            </div>
            <p id="faResultLink">Discover more about this opportunity here <a href="/explore-opportunities/new-financial-advisors/index.html" class="button-arrow-only" title="Discover more about this opportunity here"> </a></p>
            <p id="boaResultLink">Discover more about this opportunity here <a href="/explore-opportunities/branch-support/index.html" class="button-arrow-only" title="Discover more about this opportunity here"> </a></p>
            <p id="hqResultLink">Discover more about this opportunity here <a href="/explore-opportunities/hq/index.html" class="button-arrow-only" title="Discover more about this opportunity here"> </a></p>
            <p><a class="quiz-startOver" href="javascript:;">Start Over</a></p>
         </div>
      </form>
   </div>
</section>

</body>
</html>
...