Skip to content

frontend: Fix a11y header for Configure Container Deployment#239

Open
vyncent-t wants to merge 1 commit intoAzure:mainfrom
vyncent-t:fix-configure-container-deployment-header
Open

frontend: Fix a11y header for Configure Container Deployment#239
vyncent-t wants to merge 1 commit intoAzure:mainfrom
vyncent-t:fix-configure-container-deployment-header

Conversation

@vyncent-t
Copy link
Collaborator

Description

This PR fixes an a11y issue identified by Lighthouse where headings were not in sequential order for the "Configure Container Deployment" section.

The title component was visually styled as an h6 header with no larger headers present on the screen. This caused Lighthouse to flag improper heading hierarchy which can negatively impact screen reader navigation.

Related Issues

Closes #205
Related to #219

Changes Made

  • Fixes Lighthouse scan flagged as the following:

"Heading elements are not in a sequentially-descending order"

"Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies."

How to test:

  • Navigate to projects tab
  • Navigate into a project
  • Click the "Deploy application" button
  • View the "Deploy application" modal
  • Choose "Container Image"
  • View the "Basics" section
  • Use inspect tools and open Lighthouse
  • Scan at this view

@vyncent-t vyncent-t self-assigned this Feb 11, 2026
Copilot AI review requested due to automatic review settings February 11, 2026 20:09
@vyncent-t vyncent-t added the a11y a11y related issues label Feb 11, 2026
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Adjusts the semantic heading level in the Deploy Application wizard to address a Lighthouse accessibility finding about non-sequential heading order in the “Configure Container Deployment” section.

Changes:

  • Updates the “Configure Container Deployment” title Typography to override the rendered HTML element via component="h2" while keeping variant="h6" styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

return (
<>
<Typography variant="h6" gutterBottom>
<Typography variant="h6" component="h2" gutterBottom>
Copy link

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

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

component="h2" makes this heading a higher-level heading than the wizard’s page title (<Typography variant="h4">Deploy Application</Typography> in DeployWizard.tsx), which is likely to worsen heading hierarchy (h4 -> h2). If the goal is to avoid skipping levels while keeping the visual style, consider using a semantic level directly below the page title (e.g., component="h5" with variant="h6"), and align the other step headers similarly so the Configure/Deploy steps don’t remain h6 headings under an h4.

Suggested change
<Typography variant="h6" component="h2" gutterBottom>
<Typography variant="h6" component="h5" gutterBottom>

Copilot uses AI. Check for mistakes.
@vyncent-t vyncent-t requested review from illume and sniok February 12, 2026 16:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y a11y related issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Deploy Application configure step: Fix Configure Container Deployment header

1 participant