Skip to content

Commit d523720

Browse files
ann-linh-mitreann-linh-mitre
authored
Merge pull request #3085 from CVEProject/jd-3000-accordion
Resolves #3000 Accordion container headers can be clicked anywhere to toggle
2 parents 0ff1839 + 481da7c commit d523720

16 files changed

Lines changed: 131 additions & 138 deletions

File tree

‎src/assets/style/globals.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -452,15 +452,6 @@ div#contentIdForA11y1.collapse-content {
452452
/* Buefy customizations end here */
453453

454454
/* Bulma-Extensions - Timeline customizations start here (https://wikiki.github.io/components/timeline/) */
455-
.content h1,
456-
h2,
457-
h3,
458-
h4,
459-
h5,
460-
h6 {
461-
color: black !important;
462-
}
463-
464455
.timeline .timeline-item .timeline-marker {
465456
background-color: white !important;
466457
border: 2px solid $theme-color-primary-darker !important;

‎src/components/AdpVulnerabilityEnrichment.vue‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
<template>
22
<div :id="`${sectionAnchorId}`">
33
<div class="mb-2">
4-
<div class="message-header cve-accordion-header">
4+
<button @click="togglePanel" class="message-header cve-accordion-header">
55
<slot></slot>
66
<button class="button message-header-button"
77
:style="{'background-color': '#162e51 !important', 'color': 'white !important'}"
8-
@click="togglePanel"
9-
:aria-expanded="useCveRecordLookupStore.accordianState[organizationId] ? 'true' : 'false'"
8+
:aria-expanded="useCveRecordLookupStore.accordionState[organizationId] ? 'true' : 'false'"
109
:aria-controls="`${organizationId}-panel`"
1110
>
1211
<span class="icon is-small">
1312
<p :id="`expandCollapseAltText-${organizationId}`" class="is-hidden">
14-
{{useCveRecordLookupStore.accordianState[organizationId] ? 'expand' : 'collapse'}}
13+
{{useCveRecordLookupStore.accordionState[organizationId] ? 'expand' : 'collapse'}}
1514
</p>
16-
<font-awesome-icon :icon="useCveRecordLookupStore.accordianState[organizationId] ? 'minus' : 'plus'"
15+
<font-awesome-icon :icon="useCveRecordLookupStore.accordionState[organizationId] ? 'minus' : 'plus'"
1716
aria-hidden="false" focusable="true" :aria-labelledby="`expandCollapseAltText-${organizationId}`"
1817
/>
1918
</span>
2019
</button>
21-
</div>
20+
</button>
2221
<!-- Panel content is conditionally determined by role -->
23-
<div :id="`${organizationId}-panel`" v-if="useCveRecordLookupStore.accordianState[organizationId]"
22+
<div :id="`${organizationId}-panel`" v-if="useCveRecordLookupStore.accordionState[organizationId]"
2423
class="pl-3 pr-3 pt-2 pb-5 cve-container-accordion-panel"
2524
>
2625
<div>
@@ -258,7 +257,7 @@ export default {
258257
},
259258
methods: {
260259
togglePanel(){
261-
useCveRecordLookupStore().accordianState[this.organizationId] = !useCveRecordLookupStore().accordianState[this.organizationId];
260+
useCveRecordLookupStore().accordionState[this.organizationId] = !useCveRecordLookupStore().accordionState[this.organizationId];
262261
},
263262
hasEnrichmentData(){
264263
if (this.cwes.length > 0 || this.cvsss.length > 0 || this.kevs.length > 0 || this.ssvcs.length > 0) {
@@ -432,6 +431,8 @@ export default {
432431
433432
.cve-accordion-header {
434433
background-color: $theme-color-primary-darker !important;
434+
cursor: pointer;
435+
width: 100%;
435436
}
436437
437438
.cve-container-accordion-panel {

‎src/components/NotificationBannerModule.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
<div>
6767
<p id="expandCollapseButton" class="is-hidden">Expand or collapse notification button</p>
6868
<button id="alertIcon" class="button is-text pl-3 pb-0 pt-0" style="height: 1.5rem" aria-labelledby="expandCollapseButton"
69-
@click="toggleAccordianItem()" :aria-expanded="isCollapsed ? false : true">
69+
@click="toggleAccordionItem()" :aria-expanded="isCollapsed ? false : true">
7070
<span class="icon is-small" style="padding-top: 6px;">
7171
<p :id="isCollapsed ? 'caret-up' : 'caret-down'" class="is-hidden">close notification button</p>
7272
<font-awesome-icon style="font-size: 25px" :icon="isCollapsed ? 'caret-up' : 'caret-down'"
@@ -95,7 +95,7 @@ export default {
9595
this.setIsCollapsedState();
9696
},
9797
methods: {
98-
toggleAccordianItem() {
98+
toggleAccordionItem() {
9999
this.isCollapsed = !this.isCollapsed;
100100
useGlobalNotificationStore().setLocalNotificationStates();
101101
},

‎src/components/TableOfContentsSidebar.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -114,31 +114,31 @@ export default {
114114
return {
115115
isActive: true,
116116
isOpen: -1,
117-
accordian: {},
118-
accordianList: [],
117+
accordion: {},
118+
accordionList: [],
119119
selectedSubmenu: [],
120120
};
121121
},
122122
created() {
123-
this.setAccordian(false, '', 'subSectionId', 'subSections', ['pageSections', 'appendices']);
123+
this.setAccordion(false, '', 'subSectionId', 'subSections', ['pageSections', 'appendices']);
124124
},
125125
methods: {
126126
isExactPath(onPageLink) {
127127
return useLinkStore().isExactPath(`${this.$route.path}${onPageLink}`, this.$route.fullPath);
128128
},
129-
setAccordian(isHidden, parentId, childId, subSectionPropertyName, topLevelProperties) {
129+
setAccordion(isHidden, parentId, childId, subSectionPropertyName, topLevelProperties) {
130130
Object.keys(this.nav).forEach((topLevelSection) => {
131131
if (topLevelProperties.includes(topLevelSection)) {
132132
this.nav[topLevelSection].forEach((item) => {
133133
item[subSectionPropertyName].forEach((subSection) => {
134-
this.accordian[(parentId === '') ? subSection[childId] : `${item[parentId]}${subSection[childId]}`] = isHidden;
134+
this.accordion[(parentId === '') ? subSection[childId] : `${item[parentId]}${subSection[childId]}`] = isHidden;
135135
});
136136
});
137137
}
138138
});
139139
},
140-
toggleAccordianItem(id) {
141-
this.accordian[id] = !this.accordian[id];
140+
toggleAccordionItem(id) {
141+
this.accordion[id] = !this.accordion[id];
142142
},
143143
toggleSubmenuItem(id) {
144144
if (this.selectedSubmenu.includes(id)) {

‎src/stores/cveRecordLookup.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const useCveRecordLookupStore = defineStore('cveRecordLookup', {
1919
showJsonRecord: false,
2020
hasAdpInfo: false,
2121
emptyProductStatus: {},
22-
accordianState: {
22+
accordionState: {
2323
collapseAll: true,
2424
},
2525
onPageMenuItems: {

‎src/views/About/Process.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -48,23 +48,23 @@
4848
<div class="timeline-content">
4949
<h3 class="title">Request</h3>
5050
<p>CVE Program participant requests a CVE Identifier (CVE ID).</p>
51-
<section class="cve-accordian">
51+
<section class="cve-accordion">
5252
<div class="message">
5353
<div class="message-header">
5454
<h4 class="title">CVE ID</h4>
55-
<button class="button" @click="toggleAccordianItem('cve-id')"
56-
:aria-expanded="!accordian['cve-id'] ? 'true' : 'false'"
55+
<button class="button" @click="toggleAccordionItem('cve-id')"
56+
:aria-expanded="!accordion['cve-id'] ? 'true' : 'false'"
5757
aria-controls="cve-id">
5858
<span class="icon is-small">
5959
<p id="cve-id-alttext" class="is-hidden">
60-
{{accordian['cve-id'] ? 'collapse' : 'expand'}}
60+
{{accordion['cve-id'] ? 'collapse' : 'expand'}}
6161
</p>
62-
<font-awesome-icon :icon="accordian['cve-id'] ? 'plus' : 'minus'"
62+
<font-awesome-icon :icon="accordion['cve-id'] ? 'plus' : 'minus'"
6363
aria-hidden="false" focusable="true" aria-labelledby="cve-id-alttext"/>
6464
</span>
6565
</button>
6666
</div>
67-
<div class="message-body" :class="{'is-hidden': accordian['cve-id']}" id="cve-id">
67+
<div class="message-body" :class="{'is-hidden': accordion['cve-id']}" id="cve-id">
6868
<div class="block">
6969
<p>
7070
A CVE ID is a unique, alphanumeric identifier assigned by the CVE Program. Each identifier references a specific
@@ -124,23 +124,23 @@
124124
CNA.
125125
</p>
126126
<p>The CVE Record is now available for download and viewing by the public.</p>
127-
<section class="cve-accordian">
127+
<section class="cve-accordion">
128128
<div class="message">
129129
<div class="message-header">
130130
<h4 class="title">CVE Records</h4>
131-
<button class="button" @click="toggleAccordianItem('cve-record')"
132-
:aria-expanded="!accordian['cve-record'] ? 'true' : 'false'"
131+
<button class="button" @click="toggleAccordionItem('cve-record')"
132+
:aria-expanded="!accordion['cve-record'] ? 'true' : 'false'"
133133
aria-controls="cve-record">
134134
<span class="icon is-small">
135135
<p id="cve-record-alttext" class="is-hidden">
136-
{{accordian['cve-record'] ? 'collapse' : 'expand'}}
136+
{{accordion['cve-record'] ? 'collapse' : 'expand'}}
137137
</p>
138-
<font-awesome-icon :icon="accordian['cve-record'] ? 'plus' : 'minus'"
138+
<font-awesome-icon :icon="accordion['cve-record'] ? 'plus' : 'minus'"
139139
aria-hidden="false" focusable="true" aria-labelledby="cve-record-alttext"/>
140140
</span>
141141
</button>
142142
</div>
143-
<div class="message-body" :class="{'is-hidden': accordian['cve-record']}" id="cve-record">
143+
<div class="message-body" :class="{'is-hidden': accordion['cve-record']}" id="cve-record">
144144
<div class="block">
145145
<p>
146146
A CVE Record is the descriptive data about a vulnerability associated with a CVE ID, provided by a CVE Numbering
@@ -222,12 +222,12 @@ export default {
222222
},
223223
data() {
224224
return {
225-
accordian: { 'cve-id': true, 'cve-record': true },
225+
accordion: { 'cve-id': true, 'cve-record': true },
226226
};
227227
},
228228
methods: {
229-
toggleAccordianItem(id) {
230-
this.accordian[id] = !this.accordian[id];
229+
toggleAccordionItem(id) {
230+
this.accordion[id] = !this.accordion[id];
231231
},
232232
},
233233
};

‎src/views/CVERecord/PublishedRecord.vue‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@
4747
</div>
4848
<div class="level-right ml-1">
4949
<div class="level-item">
50-
<div id="cve-accordian-expand-collapse-all-btn" class="buttons mb-0" style="justify-content: flex-end;">
51-
<button id="expand-collpse-all-btn" @click="toggleAccordian" class="button is-small cve-button"
50+
<div id="cve-accordion-expand-collapse-all-btn" class="buttons mb-0" style="justify-content: flex-end;">
51+
<button id="expand-collpse-all-btn" @click="toggleAccordion" class="button is-small cve-button"
5252
>
53-
{{ useCveRecordLookupStore.accordianState.collapseAll ? 'Collapse' : 'Expand' }} all
53+
{{ useCveRecordLookupStore.accordionState.collapseAll ? 'Collapse' : 'Expand' }} all
5454
</button>
5555
</div>
5656
</div>
@@ -61,21 +61,22 @@
6161
<h2 class="title">Required CVE Record Information</h2>
6262
<AdpVulnerabilityEnrichment v-if="Object.keys(cnaContainer).length > 0" role="cna" :selectedCnaData="cveFieldList"
6363
:containerObject="cnaContainer" :orgId="`cna-${cnaContainer.providerMetadata.orgId}`" :anchorId="cnaContainer.onPageMenu.anchorId">
64-
<h3 class="mb-1 has-text-white cve-capitalize-first-letter">
64+
<h1 class="mb-1 has-text-white cve-capitalize-first-letter">
6565
<span v-if="!isLoading">{{ cnaContainer.onPageMenu.label }} </span>
6666
<span v-else>
6767
<span class="icon">
6868
<span class="loader is-loading"/>
6969
</span>
7070
<span class="ml-2">Loading...</span>
7171
</span>
72-
</h3>
72+
</h1>
7373
</AdpVulnerabilityEnrichment>
7474
<!-- <AdpVulnerabilityEnrichment v-if="!useCveRecordLookupStore.hasHistoricalReferences" role="cna" :containerObject="cnaContainer"></AdpVulnerabilityEnrichment> -->
7575
<AdpVulnerabilityEnrichment v-if="Object.keys(cveProgramContainer).length > 0" role='cveProgram'
7676
:selectedCnaData="{}" :containerObject="cveProgramContainer" :orgId="`cve-program-${cveProgramContainer.providerMetadata.orgId}`"
77-
:anchorId="cveProgramContainer.onPageMenu.anchorId">
78-
<h3 class="mb-1 has-text-white cve-capitalize-first-letter">{{ cveProgramContainer.onPageMenu.label }}</h3>
77+
:anchorId="cveProgramContainer.onPageMenu.anchorId"
78+
>
79+
<h1 class="mb-1 has-text-white cve-capitalize-first-letter">{{ cveProgramContainer.onPageMenu.label }}</h1>
7980
</AdpVulnerabilityEnrichment>
8081
</div>
8182
<div v-if="Object.keys(adpContainers).length > 0" id="cve-adp-containers" class="mt-6">
@@ -87,15 +88,15 @@
8788
<AdpVulnerabilityEnrichment v-if="adpContainer.providerMetadata.shortName === 'CISA-ADP'" role="adp" :selectedCnaData="{}"
8889
:containerObject="adpContainer" :orgId="`adp-${adpContainer.providerMetadata.orgId}`" :anchorId="adpContainer.onPageMenu.anchorId"
8990
>
90-
<h3 class="mb-1 has-text-white cve-capitalize-first-letter">
91+
<h1 class="mb-1 has-text-white cve-capitalize-first-letter">
9192
<span v-if="!isLoading">{{ adpContainer.onPageMenu.label }}</span>
9293
<span v-else>
9394
<span class="icon">
9495
<span class="loader is-loading"/>
9596
</span>
9697
<span class="ml-2">Loading...</span>
9798
</span>
98-
</h3>
99+
</h1>
99100
</AdpVulnerabilityEnrichment>
100101
<!-- <div v-for="(adpContainer) in cveFieldList.productsStatus.adp" :key="adpContainer.key"
101102
class="mt-5"
@@ -163,10 +164,10 @@ export default {
163164
};
164165
},
165166
methods: {
166-
toggleAccordian() {
167-
const newPanelState = !useCveRecordLookupStore().accordianState.collapseAll;
168-
Object.keys(useCveRecordLookupStore().accordianState).forEach( (panelName) => {
169-
useCveRecordLookupStore().accordianState[panelName] = newPanelState;
167+
toggleAccordion() {
168+
const newPanelState = !useCveRecordLookupStore().accordionState.collapseAll;
169+
Object.keys(useCveRecordLookupStore().accordionState).forEach( (panelName) => {
170+
useCveRecordLookupStore().accordionState[panelName] = newPanelState;
170171
});
171172
},
172173
populateOnPageMenu() {
@@ -223,20 +224,20 @@ export default {
223224
setupContainersAccordionStateOnPageMenu() {
224225
this.cnaContainer = this.originalRecordData.containers.cna;
225226
if (this.cnaContainer?.providerMetadata?.orgId) {
226-
useCveRecordLookupStore().accordianState[`cna-${this.cnaContainer.providerMetadata.orgId}`] = true;
227+
useCveRecordLookupStore().accordionState[`cna-${this.cnaContainer.providerMetadata.orgId}`] = true;
227228
}
228229
229230
if (this.originalRecordData?.containers?.adp) {
230231
this.originalRecordData.containers.adp.forEach((adp) => {
231232
if (adp.providerMetadata.shortName.toLowerCase() === useCveRecordLookupStore().cveProgramShortName) {
232233
this.cveProgramContainer = adp;
233-
useCveRecordLookupStore().accordianState[`cve-program-${adp.providerMetadata.orgId}`] = true;
234+
useCveRecordLookupStore().accordionState[`cve-program-${adp.providerMetadata.orgId}`] = true;
234235
}
235236
});
236237
}
237238
238239
Object.keys(this.adpContainers).forEach( (adpName) => {
239-
useCveRecordLookupStore().accordianState[`adp-${this.adpContainers[adpName].providerMetadata.orgId}`] = false;
240+
useCveRecordLookupStore().accordionState[`adp-${this.adpContainers[adpName].providerMetadata.orgId}`] = false;
240241
});
241242
242243
this.populateOnPageMenu();

‎src/views/CVERecord/RejectedRecordOrId.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</nav>
2626
<div role="information" class="notification is-info is-light p-3 mt-4">
2727
<div class="is-flex" style="justify-content: center;">
28-
<section class="cve-accordian" style="flex: 0 0 100%;">
28+
<section class="cve-accordion" style="flex: 0 0 100%;">
2929
<div class="message" style="background: transparent !important;">
3030
<div class="message-header p-0"
3131
style="background: transparent !important;border-bottom: unset !important">

‎src/views/CVERecord/ReservedId.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</nav>
2323
<div role="information" class="notification is-info is-light p-3">
2424
<div class="is-flex" style="justify-content: center;">
25-
<section class="cve-accordian" style="flex: 0 0 100%;">
25+
<section class="cve-accordion" style="flex: 0 0 100%;">
2626
<div class="message" style="background: transparent !important;">
2727
<div class="message-header p-0"
2828
style="background: transparent !important;border-bottom: unset !important">

0 commit comments

Comments
 (0)