Reimplementation of the native expanding <details> element, to be more accessible and screen-reader friendly.
TIP: hide whitespace when reviewing!
There are a few things wrong with the original, including the arrow icons being read out by screen readers, plus the way the control acts as a button but contains its own descriptive header and content, which was making life difficult as we also have a control toggle to turn a defence on/off, which we want always to be visible even when the details are collapsed.
All the glory belongs to @dhinrichs-scottlogic, I just tidied up a few things here and there.
Description
Reimplementation of the native expanding
<details>element, to be more accessible and screen-reader friendly.TIP: hide whitespace when reviewing!
There are a few things wrong with the original, including the arrow icons being read out by screen readers, plus the way the control acts as a button but contains its own descriptive header and content, which was making life difficult as we also have a control toggle to turn a defence on/off, which we want always to be visible even when the details are collapsed.
All the glory belongs to @dhinrichs-scottlogic, I just tidied up a few things here and there.
Resolves #783
Screenshots
Checklist
Have you done the following?