Delivery quote · 1 / 5

Make the purpose obvious

Create an accessible delivery quote card.

YOUR TASK

Make this happen

2 steps

Build an accessible quote section with heading Delivery quote, id quote-title and matching aria-labelledby.
Check the complete solution, then inspect any unmet requirements.

THE IDEA BEHIND IT

What this step adds

Build an accessible quote section with heading Delivery quote, id quote-title and matching aria-labelledby.

Files to work in

App.vue. Other files are the working baseline. New files include named resource skeletons and TODO guidance. Complete their fields and connect them using the objectives, schema completion and reference guide.

One component, one outcome

Engine 3 takes a complete App.vue. Its template tells the customer what they are doing. Start with meaningful HTML before adding state; a heading connected to the region helps assistive technology.

Check the authoring, then preview

Check solution compiles with the same Vue compiler source as the platform and checks this lesson’s structure. Generated code is never executed here. Equivalent formatting is accepted; the requested bindings and connections are part of the exercise.

The actual platform Vue compiler checks your component. Lesson checks inspect its authoring structure; they do not render the UI, execute JavaScript, type-check TypeScript, call APIs or save orders.

Files to change: App.vue

What you’re building: Give a customer a clear delivery quote they can adjust and confirm.

Read the starter files

App.vue

<template>
  <section>
    <!-- TODO: connect this section to its heading with aria-labelledby. -->
    <h2>Delivery quote</h2>
    <p>Review delivery costs before confirming.</p>
  </section>
</template>

Supplied supporting files

Reference: custom-apps · authoring