Fix accessibility issue with lab result accordion headers #2422
Conversation
austin-hall-skylight
requested review from
angelathe,
BobanL,
lina-roth,
gordonfarrell and
JNygaard-Skylight
There was a problem hiding this comment.
Although this does fix the issue of accessibility, I think we want to keep the structure of the heading orders.
For example all of the lab info labs should be H5 as they belong to that H4Lab Results from HOAG MEMORIAL HOSPITAL. I don't think they really stand on their own.
Similarly, the issue with the Condition Summary section. Each lab in that section logically fits under the Condition Summary header which is an h3.
Happy to pair with you if you need anything!
austin-hall-skylight
changed the title
| @@ -43,7 +46,7 @@ export const AccordionLabResults: React.FC<AccordionLabResultsProps> = ({ | |||
| content: content, | |||
| expanded: collapsedByDefault, | |||
| id: title, | |||
| headingLevel: "h5", | |||
| headingLevel, | |||
| className: `acc_item_${organizationId}`, | |||
There was a problem hiding this comment.
Seems like the side nav is picking up the labs because it's not an h5 anymore. If you just add side-nav-ignore to this class name it should be resolved since no lab results should be in the sidenav anyways.
http://localhost:3000/view-data?id=1.2.840.114350.1.13.297.3.7.8.688883.567479#lab-results-from-hoag-memorial-hospital
| className: `acc_item_${organizationId}`, | |
| className: `acc_item_${organizationId} side-nav-ignore`, |
…to h5 and condition summary lab results to h4
austin-hall-skylight
force-pushed
the
austin/2421-fix-accessibility
branch
from
e768e65
to
4cc632a
Compare
PULL REQUEST
Summary
Change lab result accordion headers from h5 to h2 to fix accessibility issues (this doesn't change the way they look).
Related Issue
Fixes #2421
Additional Information
Checklist