Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clearer handling of expandable list steps #2333

Merged
merged 6 commits into from
Oct 18, 2024
Merged

Clearer handling of expandable list steps #2333

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
47829b5
fix dark mode hover effect
rohitpaulk Oct 18, 2024
d4ba6eb
Add NonExpandableStep component and refactor ExpandableStepList logic.
rohitpaulk Oct 18, 2024
3b52212
Remove shadow-sm class from SVG and text in non-expandable-step compo…
rohitpaulk Oct 18, 2024
2e57b3f
Update non-expandable step styles for improved visibility and clarity.
rohitpaulk Oct 18, 2024
6a2ab5c
Update non-expandable step styles and add amber color to Tailwind con…
rohitpaulk Oct 18, 2024
9106a9c
Fix data-test attribute in non-expandable step and update condition i…
rohitpaulk Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions app/components/expandable-step-list.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,25 @@
>
{{#each @steps key="id" as |step stepIndex|}}
<div>
<ExpandableStepList::Step
@isExpanded={{eq this.expandedStepId step.id}}
@isFirstIncompleteStep={{eq step.id this.firstIncompleteStep.id}}
@nextIncompleteStep={{this.nextIncompleteStep}}
@number={{add stepIndex 1}}
@onCollapse={{fn this.handleStepCollapse step}}
@onManualComplete={{fn this.handleStepCompletedManually step}}
@step={{step}}
{{on "click" (fn this.handleStepExpand step)}}
>
{{#if (eq step.id this.expandedStepId)}}
<div class={{@stepContainerClass}}>
{{yield (hash expandedStep=this.expandedStep)}}
</div>
{{/if}}
</ExpandableStepList::Step>

{{#if (and (not step.isComplete) (not-eq step.id this.firstIncompleteStep.id))}}
<EmberTooltip @text="Complete previous steps to expand this step" />
<ExpandableStepList::NonExpandableStep @number={{add stepIndex 1}} @step={{step}} />
{{else}}
<ExpandableStepList::Step
@isExpanded={{eq this.expandedStepId step.id}}
@isFirstIncompleteStep={{eq step.id this.firstIncompleteStep.id}}
@nextIncompleteStep={{this.nextIncompleteStep}}
@number={{add stepIndex 1}}
@onCollapse={{fn this.handleStepCollapse step}}
@onManualComplete={{fn this.handleStepCompletedManually step}}
@step={{step}}
{{on "click" (fn this.handleStepExpand step)}}
>
{{#if (eq step.id this.expandedStepId)}}
<div class={{@stepContainerClass}}>
{{yield (hash expandedStep=this.expandedStep)}}
</div>
{{/if}}
</ExpandableStepList::Step>
{{/if}}
</div>
{{/each}}
Expand Down
15 changes: 15 additions & 0 deletions app/components/expandable-step-list/non-expandable-step.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div class="py-2 px-1 cursor-not-allowed group/non-expandable-step relative" data-test-expandable-step-list-non-expandable-step ...attributes>
<div class="flex items-center justify-between gap-2">
<div class="prose dark:prose-invert" data-test-step-title>
{{markdown-to-html (concat "**Step " @number "**: " @step.titleMarkdown)}}
</div>
</div>
<div
class="absolute inset-0 flex gap-1 items-center justify-center bg-gray-50/80 dark:bg-gray-800/80 backdrop-blur-[3px] opacity-0 group-hover/non-expandable-step:opacity-100 transition-opacity"
>
{{svg-jar "information-circle" class="w-5 h-5 fill-current text-yellow-500 shadow-sm"}}
<div class="text-sm text-gray-500 dark:text-yellow-500 font-semibold shadow-sm" data-test-step-title>
Complete previous step to expand this step
</div>
</div>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider using semantic HTML elements and enhancing accessibility.

The overall structure of the component is well-organized, but it could benefit from using more semantic HTML elements and improving accessibility. Here are some suggestions:

  1. Use <article> or <section> instead of the outermost <div> to better represent the step content semantically.
  2. Add an aria-label to the main container to describe its purpose.
  3. Use a heading element (e.g., <h3>) for the step title instead of a <div>.
  4. Add appropriate ARIA attributes to the overlay to improve screen reader experience.

Here's an example of how you could refactor the component:

<article class="py-2 px-1 cursor-not-allowed group/non-expandable-step relative" aria-label="Non-expandable step {{@number}}" data-test-expandable-step-list-non-expandable-step ...attributes>
  <div class="flex items-center justify-between gap-2">
    <h3 class="prose dark:prose-invert" data-test-step-title>
      {{markdown-to-html (concat "**Step " @number "**: " @step.titleMarkdown)}}
    </h3>
  </div>
  <div
    class="absolute inset-0 flex gap-1 items-center justify-center bg-gray-50/80 dark:bg-gray-800/80 backdrop-blur-[3px] opacity-0 group-hover/non-expandable-step:opacity-100 transition-opacity"
    aria-hidden="true"
    role="tooltip"
  >
    {{svg-jar "information-circle" class="w-5 h-5 fill-current text-yellow-500 shadow-sm" aria-hidden="true"}}
    <div class="text-sm text-gray-500 dark:text-yellow-500 font-semibold shadow-sm" data-test-step-title>
      Complete previous step to expand this step
    </div>
  </div>
</article>

These changes would improve the semantic structure and accessibility of the component.

19 changes: 19 additions & 0 deletions app/components/expandable-step-list/non-expandable-step.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Component from '@glimmer/component';
import type { Step } from '../expandable-step-list';

interface Signature {
Element: HTMLDivElement;

Args: {
number: number;
step: Step;
};
}

export default class NonExpandableStepComponent extends Component<Signature> {}

declare module '@glint/environment-ember-loose/registry' {
export default interface Registry {
'ExpandableStepList::NonExpandableStep': typeof NonExpandableStepComponent;
}
}
2 changes: 1 addition & 1 deletion app/components/expandable-step-list/step.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div
class="py-2 px-1 {{if @isExpanded 'pb-6' 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800'}}"
class="py-2 px-1 {{if @isExpanded 'pb-6' 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/60'}}"
data-test-expandable-step-list-step
{{did-update this.handleDidUpdateIsComplete @step.isComplete}}
...attributes
Expand Down
Loading