Change label element from div to label for accessibility

[RichardByrneCP]

What problem is this solving?

This is one of two PRs to solve a web accessibility issue for the NumberStepper input and associated label. The second PR is here: vtex/styleguide#1454

This PR makes 2 changes to the label within the product-quantity app:

• changing the div element to a label element
• adding 'htmlFor="vtex-product-quantity-input"', which is the newly added id of the NumericStepper input from the PR linked above.

How to test it?

Check the HTML in developer console to see the changes reflected.

Workspace

Screenshots or example usage:

[vtex-io-ci-cd]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞

[vtex-io-docs-bot]

Beep boop 🤖

I noticed you didn't make any changes at the docs/ folder

• There's nothing new to document 🤔
• I'll do it later 😞

In order to keep track, I'll create an issue if you decide now is not a good time

• I just updated 🎉🎉

[vsseixaso]

Hi, @RichardByrneCP
Thanks for the context! Which one is the second PR? I think it's missing from the description.

[RichardByrneCP]

Hi @vsseixaso, apologies! Have added the second PR to the description.

[RichardByrneCP]

Hi @vsseixaso, could you please review this as a priority as it has been 2 weeks since I updated the PR.
Thanks, Richard

[Copilot]

Pull Request Overview

This PR improves web accessibility for the NumberStepper component by replacing a div element with a proper label element and establishing the correct association between the label and input field.

• Changes div element to label element for the quantity selector title
• Adds htmlFor attribute to associate the label with the quantity input field
• Updates changelog to document the accessibility improvement

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
react/components/BaseProductQuantity.tsx	Replaces div with label element and adds htmlFor attribute for accessibility
CHANGELOG.md	Documents the web accessibility improvement

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[vsseixaso]

Hi @RichardByrneCP,

Based on the issue raised from your contributions, we’ve created the a11ySemanticHtmlMigration feature flag.

• By default, it is disabled, so it won’t impact the current styling of stores.
• When enabled, it applies the necessary semantic HTML changes that have been properly implemented.

You can use this flag whenever you want to implement semantic HTML improvements that might break other clients’ styling, and enable it only for stores that support the change. This allows a gradual migration without causing regressions in production.

The public documentation is not ready yet, so I’m attaching the internal usage documentation of the feature to help you get started.

[vsseixaso]

Accessibility Feature Flag: a11ySemanticHtmlMigration

Implementation PR: vtex-apps/store#623

What it is

A feature flag that controls accessibility modifications that introduce breaking changes through HTML structure changes in components.

Goal: Allow gradual migration to semantic HTML without breaking existing implementations.

Configuration

1. Manifest.json

{
  "dependencies": {
    "vtex.render-runtime": "8.x"
  }
}

2. How to enable

Admin > Apps > My Apps > VTEX Store > Settings > "Enable accessibility semantic HTML migration"

How to use

import React from 'react'
import { useRuntime } from 'vtex.render-runtime'

function ProductQuantity() {
  const { getSettings } = useRuntime()
  const settings = getSettings('vtex.store')
  const useSemanticHtml = settings?.advancedSettings?.a11ySemanticHtmlMigration

  return (
    <>
      {useSemanticHtml ? (
        <label htmlFor="quantity-input">Quantity:</label>
      ) : (
        <div>Quantity:</div>
      )}
      <input 
        id={useSemanticHtml ? "quantity-input" : "qty-123"}
        type="number" 
      />
    </>
  )
}

Benefits

• ✅ Better accessibility (screen readers, keyboard navigation)
• ✅ WCAG 2.1 compliance
• ✅ Controlled migration without immediate breaking changes

⚠️ Important

• Default: Disabled (false)
• Breaking changes: CSS and JavaScript may need adjustments
• Always test in development before enabling in production

[vsseixaso]

Hi @RichardByrneCP,

For this PR, the use of the a11ySemanticHtmlMigration flag will be required (more details can be found in the discussions of this PR [1] [2]).

The associated Styleguide PR belongs to another team; their review has already been requested. Once they approve it and the updates here are merged, we can finalize this PR.

[RichardByrneCP]

@vsseixaso Thanks for the details on the new feature flag. Have implemented it into both the PRs and is working on the workspace linked in the description.
The styleguide PR has the useSemanticHTML flag passed into it via props as it would not let me re-fetch it there from runtime for some strange reason. It does avoid duplicate fetching of it though.

[vsseixaso]

The implementation is working. The only point that needs correction is the lint errors in the react/components/BaseProductQuantity.tsx file.

[vsseixaso]

There's still a lint error here that needs to be fixed.

[RichardByrneCP]

@vsseixaso Format for linting issues is a bit unclear. Does this mean to put {...labelProps} on line 84?

[RichardByrneCP]

Actually, think it's asking for the closing '>' tag to be put on the previous line. Have added it in a new commit, Please retry linting and let me know.

[vtex-io-ci-cd]

Your PR has been merged! App is being published. 🚀
Version 1.9.0 → 1.10.0

After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:

vtex deploy vtex.product-quantity@1.10.0

After that your app will be updated on all accounts.

For more information on the deployment process check the docs. 📖