Skip to content

@W-21215813 - Address issues with announcing setup sidebar items with state #7322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
force2b wants to merge 1 commit into from
Closed

@W-21215813 - Address issues with announcing setup sidebar items with state #7322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions force-app/main/default/lwc/accordionSection/accordionSection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@
class="slds-align_absolute-center slds-m-vertical_x-small"
>
<button
aria-label={title}
aria-label={buttonAriaLabel}
onclick={handleToggle}
aria-controls="accordion-details"
aria-expanded={isOpen}
aria-expanded={ariaExpanded}
class="slds-align-middle slds-text-link_reset slds-button"
>
<lightning-icon
icon-name={toggleIcon}
alternative-text={toggleInstructions}
aria-hidden="true"
size="x-small"
></lightning-icon>
</button>
Expand All @@ -27,6 +28,9 @@
<!--CLICKABLE SECTION-->
<lightning-layout-item
onclick={handleToggle}
onkeydown={handleClickableKeydown}
role="button"
tabindex="0"
flexibility="auto"
class="slds-grid_vertical-align-center clickable-header"
>
Expand Down
18 changes: 18 additions & 0 deletions force-app/main/default/lwc/accordionSection/accordionSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,15 @@ export default class AccordionSection extends LightningElement {
return this.isOpen ? toggleInstructionsWhenOpen : toggleInstructionsWhenClosed;
}

get ariaExpanded() {
return this.isOpen ? "true" : "false";
}

get buttonAriaLabel() {
const state = this.isOpen ? "expanded" : "collapsed";
return `${this.title}, ${state}`;
}

get classes() {
let classes = ["slds-accordion__section"];

Expand All @@ -47,6 +56,15 @@ export default class AccordionSection extends LightningElement {

handleToggle() {
this.toggle();
// eslint-disable-next-line @lwc/lwc/no-async-operation
setTimeout(() => this.template.querySelector("button")?.focus(), 0);
}

handleClickableKeydown(event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
this.handleToggle();
}
}

@api
Expand Down
92 changes: 54 additions & 38 deletions force-app/main/default/pages/STG_SettingsManager.page
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@
box-shadow: none;
}

div.slds-tree__item button.chevronright, div.slds-tree__item.collapsed button.chevrondown {
div.slds-tree__item button .chevronright, div.slds-tree__item.collapsed button .chevrondown {
display: none;
}

div.slds-tree__item button.chevrondown, div.slds-tree__item.collapsed button.chevronright {
div.slds-tree__item button .chevrondown, div.slds-tree__item.collapsed button .chevronright {
display: inline-block;
}

Expand Down Expand Up @@ -52,11 +52,21 @@
if (idPanelCurrent == '') idPanelCurrent = 'idPanelHome';

// page init function
function syncAriaExpanded() {
j$('#mynavbar .slds-tree__branch button[aria-expanded]').each(function() {
var isCollapsed = j$(this).closest('.slds-tree__branch').hasClass('collapsed');
j$(this).attr('aria-expanded', isCollapsed ? 'false' : 'true');
});
}

j$(function () {
var cl = j$('#mynavbar').collapsibleList('.slds-tree__branch', {search: false, animate: false});
// start with slds-tree-container all collapsed. couldn't figure out how to call collapseAllHeaders(),
// but submitting the click on all li's does the trick!
j$('div',cl).trigger('click');
j$('#mynavbar .slds-tree__branch').on('click', function() {
syncAriaExpanded();
});
ShowPanel(idPanelCurrent);
});

Expand Down Expand Up @@ -131,13 +141,14 @@
<ul id="mynavbar" class="slds-tree slds-list_vertical slds-has-block-links-space" role="tree" aria-labelledby="treeheading" aria-activedescendant="tree0-node0" >
<!-- People -->
<div class="slds-tree__branch slds-tree__item" id="idPanelConHomeNav">
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevronright">
<c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" />
<button class="slds-button slds-button_icon-bare slds-m-right_x-small"
aria-label="{!$Label.stgNavPeople}"
aria-expanded="false"
aria-controls="idPanelConHomeNavGroup">
<span class="chevronright"><c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
<span class="chevrondown"><c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
</button>
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevrondown">
<c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" />
</button>
<a id="tree0-node0-link" tabindex="-1" role="presentation">{!$Label.stgNavPeople}</a>
<a id="tree0-node0-link" aria-hidden="true" tabindex="-1">{!$Label.stgNavPeople}</a>
</div>
<ul class="slds-tree__group slds-nested" role="group" aria-labelledby="tree0-node0-link">
<li class="slds-tree__item" role="treeitem" aria-level="2" id="idPanelConNav"><a href="#" onclick="ShowPanel('idPanelCon');return false;" class="slds-grow slds-m-left_large">{!$Label.stgNavAccountModel}</a></li>
Expand All @@ -147,13 +158,14 @@
</ul>
<!-- Relationships -->
<div class="slds-tree__branch slds-tree__item" id="idPanelConnectionsNav">
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevronright">
<c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" />
</button>
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevrondown">
<c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" />
<button class="slds-button slds-button_icon-bare slds-m-right_x-small"
aria-label="{!$Label.stgNavRelationships}"
aria-expanded="false"
aria-controls="idPanelConnectionsNavGroup">
<span class="chevronright"><c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
<span class="chevrondown"><c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
</button>
<a id="tree1-node0-link" tabindex="-1" role="presentation">{!$Label.stgNavRelationships}</a>
<a id="tree1-node0-link" aria-hidden="true" tabindex="-1">{!$Label.stgNavRelationships}</a>
</div>
<ul class="slds-tree__group slds-nested" role="group" aria-labelledby="tree1-node0-link">
<li class="slds-tree__item" role="treeitem" aria-level="2" id="idPanelAfflNav"><a href="#" onclick="ShowPanel('idPanelAffl');return false;" class="slds-grow slds-m-left_large">{!$Label.stgNavAffiliations}</a></li>
Expand All @@ -163,13 +175,14 @@
</ul>
<!-- Donations -->
<div class="slds-tree__branch slds-tree__item" id="idPanelDonationsNav">
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevronright">
<c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" />
<button class="slds-button slds-button_icon-bare slds-m-right_x-small"
aria-label="{!$Label.stgNavDonations}"
aria-expanded="false"
aria-controls="idPanelDonationsNavGroup">
<span class="chevronright"><c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
<span class="chevrondown"><c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
</button>
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevrondown">
<c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" />
</button>
<a id="tree2-node0-link" tabindex="-1" role="presentation">{!$Label.stgNavDonations}</a>
<a id="tree2-node0-link" aria-hidden="true" tabindex="-1">{!$Label.stgNavDonations}</a>
</div>
<ul class="slds-tree__group slds-nested" role="group" aria-labelledby="tree2-node0-link" >
<li class="slds-tree__item" role="treeitem" aria-level="2" id="idPanelOppNamingNav"><a href="#" onclick="ShowPanel('idPanelOppNaming');return false;" class="slds-grow slds-m-left_large">{!$Label.stgLabelOppNamingSettings}</a></li>
Expand All @@ -188,13 +201,14 @@
<!-- Recurring Donations -->

<div class="slds-tree__branch slds-tree__item" id="idPanelRecDonationsNav">
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevronright">
<c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" />
</button>
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevrondown">
<c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" />
<button class="slds-button slds-button_icon-bare slds-m-right_x-small"
aria-label="{!$Label.stgNavRecurringDonations}"
aria-expanded="false"
aria-controls="idPanelRecDonationsNavGroup">
<span class="chevronright"><c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
<span class="chevrondown"><c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
</button>
<a id="tree3-node0-link" tabindex="-1" role="presentation">{!$Label.stgNavRecurringDonations}</a>
<a id="tree3-node0-link" aria-hidden="true" tabindex="-1">{!$Label.stgNavRecurringDonations}</a>
</div>
<ul class="slds-tree__group slds-nested" role="group" aria-labelledby="tree3-node0-link">
<li role="treeitem" aria-level="2" id="idPanelRD2EnablementNav"
Expand Down Expand Up @@ -247,13 +261,14 @@

<!-- Bulk Data Processes -->
<div class="slds-tree__branch slds-tree__item" id="idPanelBulkProcesses">
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevronright">
<c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" />
<button class="slds-button slds-button_icon-bare slds-m-right_x-small"
aria-label="{!$Label.stgNavBulkProcesses}"
aria-expanded="false"
aria-controls="idPanelBulkProcessesGroup">
<span class="chevronright"><c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
<span class="chevrondown"><c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
</button>
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevrondown">
<c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" />
</button>
<a id="tree4-node0-link" tabindex="-1" role="presentation">{!$Label.stgNavBulkProcesses}</a>
<a id="tree4-node0-link" aria-hidden="true" tabindex="-1">{!$Label.stgNavBulkProcesses}</a>
</div>
<ul class="slds-tree__group slds-nested" role="group" aria-labelledby="tree4-node0-link">
<li class="slds-tree__item" role="treeitem" aria-level="2" id="idPanelScheduleNav"><a href="#" onclick="ShowPanel('idPanelSchedule');return false;" class="slds-grow slds-m-left_large">{!$Label.stgNavBatchProcessSettings}</a></li>
Expand All @@ -270,13 +285,14 @@
</ul>
<!-- System Tools -->
<div class="slds-tree__branch slds-tree__item" id="idPanelSystemNav">
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevronright">
<c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" />
</button>
<button class="slds-button slds-button_icon-bare slds-m-right_x-small chevrondown">
<c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" />
<button class="slds-button slds-button_icon-bare slds-m-right_x-small"
aria-label="{!$Label.stgNavSystem}"
aria-expanded="false"
aria-controls="idPanelSystemNavGroup">
<span class="chevronright"><c:UTIL_SLDS_Icon icon="chevronright" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
<span class="chevrondown"><c:UTIL_SLDS_Icon icon="chevrondown" iconCategory="utility" size="xx-small" fillColor="inherit" /></span>
</button>
<a id="tree5-node0-link" tabindex="-1" role="presentation">{!$Label.stgNavSystem}</a>
<a id="tree5-node0-link" aria-hidden="true" tabindex="-1">{!$Label.stgNavSystem}</a>
</div>
<ul class="slds-tree__group slds-nested" role="group" aria-labelledby="tree5-node0-link">
<li class="slds-tree__item" role="treeitem" aria-level="2" id="idPanelHealthCheckNav"><a href="#" onclick="ShowPanel('idPanelHealthCheck');return false;" class="slds-grow slds-m-left_large">{!$Label.stgNavHealthCheck}</a></li>
Expand Down
Loading