Skip to content

Commit f9864e2

Browse files
howard-ehoward-e
committed
Avoid unintentionally hiding content from DOM
1 parent e31daa4 commit f9864e2

File tree

7 files changed

+2932
-14
lines changed

7 files changed

+2932
-14
lines changed

‎client/components/common/DisclosureComponent/index.jsx

+12-14
Original file line numberDiff line numberDiff line change
@@ -64,20 +64,18 @@ const DisclosureComponent = ({
6464
/>
6565
</button>
6666
</Heading>
67-
{buttonExpanded && (
68-
<div
69-
className={clsx(
70-
styles.disclosureContent,
71-
buttonExpanded ? styles.visible : styles.hidden,
72-
isStacked && styles.stacked
73-
)}
74-
role="region"
75-
id={`disclosure-btn-controls-${componentId}-${labelTitle}`}
76-
aria-labelledby={`disclosure-btn-${componentId}-${labelTitle}`}
77-
>
78-
{buttonDisclosureContainerView}
79-
</div>
80-
)}
67+
<div
68+
className={clsx(
69+
styles.disclosureContent,
70+
buttonExpanded ? styles.visible : styles.hidden,
71+
isStacked && styles.stacked
72+
)}
73+
role="region"
74+
id={`disclosure-btn-controls-${componentId}-${labelTitle}`}
75+
aria-labelledby={`disclosure-btn-${componentId}-${labelTitle}`}
76+
>
77+
{buttonDisclosureContainerView}
78+
</div>
8179
</Fragment>
8280
);
8381
})}

‎client/tests/e2e/snapshots/saved/_candidate-test-plan_24_1.html

+293
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,125 @@ <h1 class="disclosure-heading">
369369
</svg>
370370
</button>
371371
</h1>
372+
<div
373+
class="disclosure-content hidden stacked"
374+
role="region"
375+
id="disclosure-btn-controls-testInstructionsAndResults-Test Instructions"
376+
aria-labelledby="disclosure-btn-testInstructionsAndResults-Test Instructions">
377+
<ol class="css-tzo3vz">
378+
<li>
379+
Configure JAWS with default settings. For
380+
help, read
381+
<a
382+
href="https://github.com/w3c/aria-at/wiki/Configuring-Screen-Readers-for-Testing"
383+
>Configuring Screen Readers for Testing</a
384+
>.
385+
</li>
386+
<li>
387+
Activate the "Open test page" button, which
388+
opens the example to test in a new window and
389+
runs a script that sets focus on the 'Add
390+
Delivery Address' button
391+
</li>
392+
<li>
393+
With the reading cursor on the 'Add Delivery
394+
Address' button, open the dialog.
395+
</li>
396+
<li>
397+
With the reading cursor on the 'Add Delivery
398+
Address' button, open the dialog. Do this with
399+
each of the following commands or command
400+
sequences.
401+
<ul class="css-18v4d0a">
402+
<li>Space</li>
403+
<li>Enter</li>
404+
</ul>
405+
</li>
406+
</ol>
407+
<h2 id="JAWS-test1-SPACE-cmd0">
408+
Space: 4 MUST, 0 SHOULD, 0 MAY Assertions
409+
</h2>
410+
<div class="table-responsive">
411+
<table
412+
aria-labelledby="JAWS-test1-SPACE-cmd0"
413+
class="table table-bordered">
414+
<thead>
415+
<tr>
416+
<th>Priority</th>
417+
<th>Assertion Statement</th>
418+
</tr>
419+
</thead>
420+
<tbody>
421+
<tr>
422+
<td>MUST</td>
423+
<td>Role 'dialog' is conveyed</td>
424+
</tr>
425+
<tr>
426+
<td>MUST</td>
427+
<td>
428+
Name 'Add Delivery Address' is conveyed
429+
</td>
430+
</tr>
431+
<tr>
432+
<td>MUST</td>
433+
<td>
434+
Name of input ('Street') is conveyed
435+
</td>
436+
</tr>
437+
<tr>
438+
<td>MUST</td>
439+
<td>
440+
The ability to enter or edit text is
441+
conveyed
442+
</td>
443+
</tr>
444+
</tbody>
445+
</table>
446+
</div>
447+
<h2 id="JAWS-test1-ENTER-cmd1">
448+
Enter: 4 MUST, 0 SHOULD, 0 MAY Assertions
449+
</h2>
450+
<div class="table-responsive">
451+
<table
452+
aria-labelledby="JAWS-test1-ENTER-cmd1"
453+
class="table table-bordered">
454+
<thead>
455+
<tr>
456+
<th>Priority</th>
457+
<th>Assertion Statement</th>
458+
</tr>
459+
</thead>
460+
<tbody>
461+
<tr>
462+
<td>MUST</td>
463+
<td>Role 'dialog' is conveyed</td>
464+
</tr>
465+
<tr>
466+
<td>MUST</td>
467+
<td>
468+
Name 'Add Delivery Address' is conveyed
469+
</td>
470+
</tr>
471+
<tr>
472+
<td>MUST</td>
473+
<td>
474+
Name of input ('Street') is conveyed
475+
</td>
476+
</tr>
477+
<tr>
478+
<td>MUST</td>
479+
<td>
480+
The ability to enter or edit text is
481+
conveyed
482+
</td>
483+
</tr>
484+
</tbody>
485+
</table>
486+
</div>
487+
<button type="button" class="btn btn-primary">
488+
Open Test Page
489+
</button>
490+
</div>
372491
<h1 class="disclosure-heading">
373492
<button
374493
class="disclosure-button stacked"
@@ -391,6 +510,161 @@ <h1 class="disclosure-heading">
391510
</svg>
392511
</button>
393512
</h1>
513+
<div
514+
class="disclosure-content hidden stacked"
515+
role="region"
516+
id="disclosure-btn-controls-testInstructionsAndResults-Test Results for Chrome"
517+
aria-labelledby="disclosure-btn-testInstructionsAndResults-Test Results for Chrome">
518+
<h2 class="test-results-header">
519+
Test Results&nbsp;(12 passed,&nbsp;0
520+
failed,&nbsp;0 unsupported)
521+
</h2>
522+
<h3>
523+
Space&nbsp;Results:&nbsp;6 passed,&nbsp;0
524+
failed,&nbsp;0 unsupported
525+
</h3>
526+
<p class="test-plan-results-response-p">
527+
JAWS Response:
528+
</p>
529+
<blockquote class="test-plan-results-blockquote">
530+
automatically seeded sample output
531+
</blockquote>
532+
<div class="table-responsive">
533+
<table
534+
aria-label="Results for test Open a Modal Dialog in reading mode"
535+
class="test-plan-results-table table table-bordered">
536+
<caption>
537+
Space Results
538+
</caption>
539+
<thead>
540+
<tr>
541+
<th>Priority</th>
542+
<th>Assertion</th>
543+
<th>Result</th>
544+
</tr>
545+
</thead>
546+
<tbody>
547+
<tr>
548+
<td>MUST</td>
549+
<td>Role 'dialog' is conveyed</td>
550+
<td>Passed</td>
551+
</tr>
552+
<tr>
553+
<td>MUST</td>
554+
<td>
555+
Name 'Add Delivery Address' is conveyed
556+
</td>
557+
<td>Passed</td>
558+
</tr>
559+
<tr>
560+
<td>MUST</td>
561+
<td>
562+
Name of input ('Street') is conveyed
563+
</td>
564+
<td>Passed</td>
565+
</tr>
566+
<tr>
567+
<td>MUST</td>
568+
<td>
569+
The ability to enter or edit text is
570+
conveyed
571+
</td>
572+
<td>Passed</td>
573+
</tr>
574+
<tr>
575+
<td>MUST</td>
576+
<td>
577+
Other behaviors that create severe
578+
negative impacts are not exhibited
579+
</td>
580+
<td>Passed</td>
581+
</tr>
582+
<tr>
583+
<td>SHOULD</td>
584+
<td>
585+
Other behaviors that create moderate
586+
negative impacts are not exhibited
587+
</td>
588+
<td>Passed</td>
589+
</tr>
590+
</tbody>
591+
</table>
592+
</div>
593+
Other behaviors that create negative impact: None
594+
<hr aria-hidden="true" />
595+
<h3>
596+
Enter&nbsp;Results:&nbsp;6 passed,&nbsp;0
597+
failed,&nbsp;0 unsupported
598+
</h3>
599+
<p class="test-plan-results-response-p">
600+
JAWS Response:
601+
</p>
602+
<blockquote class="test-plan-results-blockquote">
603+
automatically seeded sample output
604+
</blockquote>
605+
<div class="table-responsive">
606+
<table
607+
aria-label="Results for test Open a Modal Dialog in reading mode"
608+
class="test-plan-results-table table table-bordered">
609+
<caption>
610+
Enter Results
611+
</caption>
612+
<thead>
613+
<tr>
614+
<th>Priority</th>
615+
<th>Assertion</th>
616+
<th>Result</th>
617+
</tr>
618+
</thead>
619+
<tbody>
620+
<tr>
621+
<td>MUST</td>
622+
<td>Role 'dialog' is conveyed</td>
623+
<td>Passed</td>
624+
</tr>
625+
<tr>
626+
<td>MUST</td>
627+
<td>
628+
Name 'Add Delivery Address' is conveyed
629+
</td>
630+
<td>Passed</td>
631+
</tr>
632+
<tr>
633+
<td>MUST</td>
634+
<td>
635+
Name of input ('Street') is conveyed
636+
</td>
637+
<td>Passed</td>
638+
</tr>
639+
<tr>
640+
<td>MUST</td>
641+
<td>
642+
The ability to enter or edit text is
643+
conveyed
644+
</td>
645+
<td>Passed</td>
646+
</tr>
647+
<tr>
648+
<td>MUST</td>
649+
<td>
650+
Other behaviors that create severe
651+
negative impacts are not exhibited
652+
</td>
653+
<td>Passed</td>
654+
</tr>
655+
<tr>
656+
<td>SHOULD</td>
657+
<td>
658+
Other behaviors that create moderate
659+
negative impacts are not exhibited
660+
</td>
661+
<td>Passed</td>
662+
</tr>
663+
</tbody>
664+
</table>
665+
</div>
666+
Other behaviors that create negative impact: None
667+
</div>
394668
<h1 class="disclosure-heading">
395669
<button
396670
class="disclosure-button stacked"
@@ -413,6 +687,25 @@ <h1 class="disclosure-heading">
413687
</svg>
414688
</button>
415689
</h1>
690+
<div
691+
class="disclosure-content hidden stacked"
692+
role="region"
693+
id="disclosure-btn-controls-testInstructionsAndResults-Run History"
694+
aria-labelledby="disclosure-btn-testInstructionsAndResults-Run History">
695+
<ul style="margin-bottom: 0px">
696+
<li class="run-history-item css-j662fd">
697+
Tested with <b>JAWS 2021.2111.13</b> and
698+
<b>Chrome 99.0.4844.84</b> by
699+
<b
700+
><a
701+
href="https://github.com/esmeralda-baggins"
702+
>esmeralda-baggins</a
703+
></b
704+
>
705+
on March 10, 2025.
706+
</li>
707+
</ul>
708+
</div>
416709
</div>
417710
</div>
418711
</div>

0 commit comments

Comments
 (0)