Overlay option added in exercise component and new component IncludeRemoveQuestion created #86
Conversation
…emovequestion created
src/components/Card.tsx
Outdated
| @@ -87,9 +87,6 @@ const StepCardHeader = styled.div` | |||
| button.ox-icon-angle-left, button.ox-icon-angle-right { | |||
| display: none; | |||
| } | |||
| .separator { | |||
There was a problem hiding this comment.
This style was causing an error for lg display
There was a problem hiding this comment.
Yeah this should be fixed in #85
src/components/Card.tsx
Outdated
| @@ -87,9 +87,6 @@ const StepCardHeader = styled.div` | |||
| button.ox-icon-angle-left, button.ox-icon-angle-right { | |||
| display: none; | |||
| } | |||
| .separator { | |||
There was a problem hiding this comment.
Yeah this should be fixed in #85
src/components/Exercise/index.tsx
Outdated
| @@ -195,15 +213,32 @@ export const Exercise = styled(({ | |||
| {...(exerciseIcons ? { exerciseIcons: exerciseIcons } : null)} | |||
| className={props.className} | |||
| > | |||
| <div ref={container}> | |||
| <div | |||
| ref={hoverRef} | |||
There was a problem hiding this comment.
I think these need to be swapped right? So the hover happens anywhere inside the card? I think that also means that the tabindex needs to be placed on the TaskStepCardWithToolbar
There was a problem hiding this comment.
Well actually, while I'm changing this, I see that TaskStepCardWithToolbar covers more than the visible card:
Screen.Recording.2025-01-23.at.11.32.33.AM.mov
There was a problem hiding this comment.
Oh right there's some big margins on that... maybe we add a new wrapper for the toolbar and card body
There was a problem hiding this comment.
@jivey
In order to avoid modifications in margins or other styles coming from Card.tsx, I moved the Overlay logic inside Card component. This feature will be enable is a overlayChildren prop is not null and only Exercise can pass that prop for now. I tested that overlay jumps when hover all the card:
Screen.Recording.2025-01-23.at.2.30.54.PM.mov
src/components/Exercise/index.tsx
Outdated
| <div ref={container}> | ||
| <div | ||
| ref={hoverRef} | ||
| tabIndex={enableOverlay ? 0 : -1} // This container is focusable only if enableOverlay is true |
There was a problem hiding this comment.
Does this cause any side effects for non-overlay exercises in screenreaders? I'm wondering if we should be more conservative and not set the attribute at all for normal use.
There was a problem hiding this comment.
Sorry for all the review rounds, but I just tested this with a screenreader and realized we need to make sure the content under the overlay is not focusable while the overlay is active.
It might also be nice to auto-focus the first control when it activates from tabbing forward only so it doesn't require as many tab presses to navigate.
|
@jomcarvajal Fixed my comment, did not mean to mention skipping announcing, as long as the overlay buttons are also read |
…nteractive element on overlay
* card styles * Overlay option added in exercise component and new component IncludeRemoveQuestion created (#86) * overlay option added in exercise component and new component includeremovequestion created * resolve comments * update snapshots * move overlay logic into Card component * remove focus on card when overlay is up and add autoFocus for first interactive element on overlay * Add export for IncludRemoveQuestion (#87) add export of IncludRemoveQuestion * Modify preview-card styles (#88) * modify preview card styles * change color of card when is included * resolve comments - fix style issues * change props in storybook of Exercise * Add prop method for details button * Refactor props of ExercisePreview * export ExercisePreview * remove focus first for screenreaders, style tweaks * Remove aria attributes in order to read card body content (#90) * remove aria attributes in order to read card body content * conditional aria attributes for cardbody * previewMode in storybook * missing previewMode prop * fix some type issues * disable eslint rule for ts-ignore just for this case * Core 675 refactor exercise preview (#92) * remove includeRemove logic from preview exercise card * print stories deleted by mistake * test description fixed * added new story for preview exercise, hide all feedback propertly * revert print delete * remove questionState prop, added feedback inside answers for stories purposes * is_completed added into ExercisePreview component * update snapshots * New prop showCorrectAnswer (#93) * new prop showCorrectAnswer * fix exercise stories * ExercisePreview now shows question detailed (#94) * ExercisePreview now shows question detailed * Restore print * hide footer with new condition * Restore print * fix indentation in ExerciseQuestion * set answer_id as empty * set new margin for preview card * update snaps * resolve test duplicity --------- Co-authored-by: jomcarvajal <[email protected]> Co-authored-by: jomcarvajal <[email protected]>
Card: https://openstax.atlassian.net/browse/CORE-675
Changes for Exercise Preview card added. New properties to active Overlay and new component IncludeRemoveQuestion with 2 variants.
Screen.Recording.2025-01-17.at.4.14.04.PM.mov