publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-22 09:41:26 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

add QA feedback

Browse source 
- swap expand/collapse icons
- add parens and slash to copy
This commit is contained in:
Vim USDS 2022-08-07 23:49:15 -07:00
parent 7817d41a59
commit 3befcdf3aa
4 changed files with 166 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

174
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -49,19 +49,23 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
Tract demographics
</div>
<h6>
Racial Ethnographic
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="collapse icon"
src="test-file-stub"
/>
Racial / Ethnographic
<span>
(
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="race-header"
@ -143,18 +147,22 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
</section>
<h6>
Age
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="collapse icon"
src="test-file-stub"
/>
<span>
(
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="age-header"
@ -558,19 +566,23 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
Tract demographics
</div>
<h6>
Racial Ethnographic
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="collapse icon"
src="test-file-stub"
/>
Racial / Ethnographic
<span>
(
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="race-header"
@ -652,18 +664,22 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</section>
<h6>
Age
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="collapse icon"
src="test-file-stub"
/>
<span>
(
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="age-header"
@ -2442,19 +2458,23 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
Tract demographics
</div>
<h6>
Racial Ethnographic
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="collapse icon"
src="test-file-stub"
/>
Racial / Ethnographic
<span>
(
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="race-header"
@ -2536,18 +2556,22 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
</section>
<h6>
Age
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="collapse icon"
src="test-file-stub"
/>
<span>
(
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="age-header"

7
client/src/components/TractDemographics/TractDemographics.module.scss
View file

@ -26,6 +26,10 @@
@include u-margin-top(.5);
font-size: .875rem;
span{
@include u-margin-left(1);
}
.showHideText {
//remove styling of button
border: none;
@ -37,10 +41,7 @@
text-decoration:underline;
min-width: 45px;
padding-left: 0;
padding-right: 0;
margin-left: 6px;
}
.showHideIcon{

54
client/src/components/TractDemographics/TractDemographics.tsx
View file

@ -61,29 +61,35 @@ const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
<>
<h6 className={styles.demographicHeading}>
{title}
<button
className={styles.showHideText}
id={`${id}-header`}
aria-controls={`${id}-panel`}
aria-expanded={isExpanded}
onClick={() => setIsExpanded(!isExpanded)}
tabIndex={0}
>
{isExpanded ? 'hide' : 'show'}
</button>
{ isExpanded ?
<img
className={styles.showHideIcon}
src={expandIcon}
alt={'expand icon'}
onClick={() => setIsExpanded(!isExpanded)}
/> :
<img
className={styles.showHideIcon}
src={collapseIcon}
alt={'collapse icon'}
onClick={() => setIsExpanded(!isExpanded)}
/>}
<span>
{'('}
<button
className={styles.showHideText}
id={`${id}-header`}
aria-controls={`${id}-panel`}
aria-expanded={isExpanded}
onClick={() => setIsExpanded(!isExpanded)}
tabIndex={0}
>
{isExpanded ? 'hide' : 'show'}
</button>
{ isExpanded ?
<img
className={styles.showHideIcon}
src={collapseIcon}
alt={'collapse icon'}
onClick={() => setIsExpanded(!isExpanded)}
/> :
<img
className={styles.showHideIcon}
src={expandIcon}
alt={'expand icon'}
onClick={() => setIsExpanded(!isExpanded)}
/>
}
{')'}
</span>
</h6>
<section
@ -102,7 +108,7 @@ const TractDemographics = () => {
Tract demographics
</div>
<>
<J40AccordionItem id={'race'} title={`Racial Ethnographic`}>
<J40AccordionItem id={'race'} title={`Racial / Ethnographic`}>
{demographicItemGen(demographicsData.racial)}
</J40AccordionItem>
<J40AccordionItem id={'age'} title={`Age`}>

58
client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap
View file

@ -7,19 +7,23 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
Tract demographics
</div>
<h6>
Racial Ethnographic
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="collapse icon"
src="test-file-stub"
/>
Racial / Ethnographic
<span>
(
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="race-header"
@ -101,18 +105,22 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
</section>
<h6>
Age
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="collapse icon"
src="test-file-stub"
/>
<span>
(
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="age-header"