@@ -19620,17 +19620,8 @@ angular.module('patternfly.views').component('pfEmptyState', {
1962019620 </form>
1962119621 </pf-wizard-substep>
1962219622 </pf-wizard-step>
19623- <pf-wizard-step step-title="Second Step" next-tooltip="secondStepNextTooltip" prev-tooltip="secondStepPrevTooltip" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
19624- <form class="form-horizontal">
19625- <h3>Wizards should make use of substeps consistently throughout (either using them or not using them). This is an example only.</h3>
19626- <pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
19627- <input id="new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
19628- </pf-form-group>
19629- <pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
19630- <input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
19631- </pf-form-group>
19632- </form>
19633- </pf-wizard-step>
19623+ <div ng-include="'second-step.html'">
19624+ </div>
1963419625 <pf-wizard-step step-title="Review" next-tooltip="reviewStepNextTooltip" prev-tooltip="reviewStepPrevTooltip" substeps="true" step-id="review" step-priority="2">
1963519626 <div ng-include="'summary.html'"></div>
1963619627 <div ng-include="'deployment.html'"></div>
@@ -19639,7 +19630,14 @@ angular.module('patternfly.views').component('pfEmptyState', {
1963919630 </file>
1964019631 <file name="detail-page.html">
1964119632 <div ng-controller="DetailsGeneralController">
19642- <pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
19633+ <pf-wizard-substep step-title="General"
19634+ next-enabled="detailsGeneralComplete"
19635+ step-id="details-general"
19636+ step-priority="0"
19637+ on-show="onShow"
19638+ focus-selectors="focusSelectors"
19639+ review-template="{{reviewTemplate}}"
19640+ show-review-details="true">
1964319641 <form class="form-horizontal">
1964419642 <pf-form-group pf-label="Name" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
1964519643 <input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
@@ -19679,6 +19677,21 @@ angular.module('patternfly.views').component('pfEmptyState', {
1967919677 </form>
1968019678 </div>
1968119679 </file>
19680+ <file name="second-step.html">
19681+ <div ng-controller="SecondStepController">
19682+ <pf-wizard-step focus-selectors="focusSelectors" step-title="Second Step" next-tooltip="secondStepNextTooltip" prev-tooltip="secondStepPrevTooltip" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
19683+ <form class="form-horizontal">
19684+ <h3>Wizards should make use of substeps consistently throughout (either using them or not using them). This is an example only.</h3>
19685+ <pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
19686+ <input id="step-two-new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
19687+ </pf-form-group>
19688+ <pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
19689+ <input id="step-two-new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
19690+ </pf-form-group>
19691+ </form>
19692+ </pf-wizard-step>
19693+ </div>
19694+ </file>
1968219695 <file name="summary.html">
1968319696 <div ng-controller="SummaryController">
1968419697 <pf-wizard-substep step-title="Summary" step-id="review-summary" step-priority="0" next-enabled="true" prev-enabled="true" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
@@ -19804,7 +19817,7 @@ angular.module('patternfly.views').component('pfEmptyState', {
1980419817
1980519818 $scope.reviewTemplate = "review-template.html";
1980619819 $scope.detailsGeneralComplete = false;
19807-
19820+ $scope.focusSelectors = ['#new-name'];
1980819821 $scope.onShow = function() { };
1980919822
1981019823 $scope.updateName = function() {
@@ -19830,6 +19843,14 @@ angular.module('patternfly.views').component('pfEmptyState', {
1983019843 }
1983119844 ]);
1983219845
19846+ angular.module('patternfly.wizard').controller('SecondStepController', ['$rootScope', '$scope',
19847+ function ($rootScope, $scope) {
19848+ 'use strict';
19849+
19850+ $scope.focusSelectors = ['.invalid-classname', '#step-two-new-lorem'];
19851+ }
19852+ ]);
19853+
1983319854 angular.module('patternfly.wizard').controller('SummaryController', ['$rootScope', '$scope', '$timeout',
1983419855 function ($rootScope, $scope, $timeout) {
1983519856 'use strict';
@@ -20062,6 +20083,7 @@ angular.module('patternfly.wizard').component('pfWizardReviewPage', {
2006220083 * @param {string=} description The step description (optional)
2006320084 * @param {object} wizardData Data passed to the step that is shared by the entire wizard
2006420085 * @param {function()=} onShow The function called when the wizard shows this step
20086+ * @param {object=} focusSelectors Array of selectors to be used (in the order given) to find the initial focus component for the page
2006520087 * @param {boolean=} showReview Indicates whether review information should be displayed for this step when the review step is reached
2006620088 * @param {boolean=} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
2006720089 * @param {string=} reviewTemplate The template that should be used for the review details screen
@@ -20083,6 +20105,7 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
2008320105 description: '@',
2008420106 wizardData: '=',
2008520107 onShow: '=?',
20108+ focusSelectors: '<?',
2008620109 showReview: '@?',
2008720110 showReviewDetails: '@?',
2008820111 reviewTemplate: '@?'
@@ -20259,6 +20282,8 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
2025920282 };
2026020283
2026120284 ctrl.goTo = function (step) {
20285+ var focusElement = null;
20286+
2026220287 if (ctrl.wizard.isWizardDone() || !step.okToNavAway || step === ctrl.selectedStep) {
2026320288 return;
2026420289 }
@@ -20274,6 +20299,29 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
2027420299 ctrl.selectedStep.onShow();
2027520300 }
2027620301
20302+ // Give time for onShow to do its thing (maybe update the selectors), then time to display the elements
20303+ $timeout(function () {
20304+ if (step.focusSelectors) {
20305+ _.find(step.focusSelectors, function (selector) {
20306+ return focusElement = document.querySelector(selector);
20307+ });
20308+ }
20309+
20310+ // Default to next button if it is enabled
20311+ if (!focusElement && step.nextEnabled) {
20312+ focusElement = document.querySelector('.wizard-pf-next');
20313+ }
20314+
20315+ // Use cancel button if we haven't found anything else to set focus on
20316+ if (!focusElement) {
20317+ focusElement = document.querySelector('.wizard-pf-cancel');
20318+ }
20319+
20320+ if (focusElement) {
20321+ focusElement.focus();
20322+ }
20323+ }, 300);
20324+
2027720325 ctrl.currentStep = step.stepTitle;
2027820326
2027920327 firstRun = false;
@@ -20381,6 +20429,7 @@ angular.module('patternfly.wizard').component('pfWizardStep', {
2038120429* @param {string=} description The step description
2038220430* @param {object} wizardData Data passed to the step that is shared by the entire wizard
2038320431* @param {function()=} onShow The function called when the wizard shows this step
20432+ * @param {object=} focusSelectors Array of selectors to be used (in the order given) to find the initial focus component for the page
2038420433* @param {boolean=} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
2038520434* @param {string=} reviewTemplate The template that should be used for the review details screen
2038620435*/
@@ -20398,6 +20447,7 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
2039820447 description: '@',
2039920448 wizardData: '=',
2040020449 onShow: '=?',
20450+ focusSelectors: '<?',
2040120451 showReviewDetails: '@?',
2040220452 reviewTemplate: '@?'
2040320453 },
@@ -20641,6 +20691,8 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
2064120691 };
2064220692
2064320693 ctrl.goTo = function (step, resetStepNav) {
20694+ var focusElement = null;
20695+
2064420696 if (ctrl.wizardDone || (ctrl.selectedStep && !ctrl.selectedStep.okToNavAway) || step === ctrl.selectedStep) {
2064520697 return;
2064620698 }
@@ -20659,6 +20711,28 @@ angular.module('patternfly.wizard').component('pfWizardSubstep', {
2065920711 if (angular.isFunction(step.onShow)) {
2066020712 step.onShow();
2066120713 }
20714+ // Give time for onShow to do its thing (maybe update the selectors), then time to display the elements
20715+ $timeout(function () {
20716+ if (step.focusSelectors) {
20717+ _.find(step.focusSelectors, function (selector) {
20718+ return focusElement = document.querySelector(selector);
20719+ });
20720+ }
20721+
20722+ // Default to next button if it is enabled
20723+ if (!focusElement && step.nextEnabled) {
20724+ focusElement = document.querySelector('.wizard-pf-next');
20725+ }
20726+
20727+ // Use cancel button if we haven't found anything else to set focus on
20728+ if (!focusElement) {
20729+ focusElement = document.querySelector('.wizard-pf-cancel');
20730+ }
20731+
20732+ if (focusElement) {
20733+ focusElement.focus();
20734+ }
20735+ }, 300);
2066220736 }, 100);
2066320737
2066420738 // Make sure current step is not undefined
0 commit comments