Change label element from div to label for accessibility

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 
 - Update GitHub actions/cache to v4
+- Web Accessibility: Change quantity div to label element and add htmlFor that links to quantity input
 
 ## [1.9.0] - 2022-12-23
 

react/components/BaseProductQuantity.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useCssHandles } from 'vtex.css-handles'
+import { useRuntime } from 'vtex.render-runtime'
 import { DispatchFunction } from 'vtex.product-context/ProductDispatchContext'
 import { ProductContext } from 'vtex.product-context'
 
@@ -44,7 +45,11 @@
   showUnit = true,
   quantitySelectorStep = 'unitMultiplier',
 }) => {
+  const { getSettings } = useRuntime()
+  const settings = getSettings('vtex.store')
+  const useSemanticHtml = settings?.advancedSettings?.a11ySemanticHtmlMigration
   const handles = useCssHandles(CSS_HANDLES)
+
   const onChange = useCallback(
     (e: OnChangeCallback) => {
       dispatch({ type: 'SET_QUANTITY', args: { quantity: e.value } })
@@ -64,14 +69,23 @@
   const unitMultiplier =
     quantitySelectorStep === 'singleUnit' ? 1 : selectedItem.unitMultiplier
 
+  const LabelComponent = useSemanticHtml ? 'label' : 'div'
+  const labelProps = useSemanticHtml
+    ? {
+        htmlFor: 'vtex-product-quantity-input',
+      }
+    : {}
+
   return (
     <div
       className={`${handles.quantitySelectorContainer} flex flex-column mb4`}>
       {showLabel && (
-        <div
-          className={`${handles.quantitySelectorTitle} mb3 c-muted-2 t-body`}>
+        <LabelComponent
+          className={`${handles.quantitySelectorTitle} mb3 c-muted-2 t-body`}
+          {...labelProps}
+        >
           <FormattedMessage id="store/product-quantity.quantity" />
-        </div>
+        </LabelComponent>
       )}
       {selectorType === 'stepper' && (
         <StepperProductQuantity
@@ -82,6 +96,7 @@
           selectedQuantity={selectedQuantity}
           availableQuantity={availableQuantity}
           onChange={onChange}
+          useSemanticHtml={useSemanticHtml}
         />
       )}
       {selectorType === 'dropdown' && (

react/components/StepperProductQuantity.tsx

@@ -15,6 +15,7 @@ interface StepperProps {
   onChange: (e: OnChangeCallback) => void
   size: BaseProps['size']
   showUnit: boolean
+  useSemanticHtml?: boolean
 }
 
 const CSS_HANDLES = ['quantitySelectorStepper'] as const
@@ -27,6 +28,7 @@ const StepperProductQuantity: FunctionComponent<StepperProps> = ({
   availableQuantity,
   onChange,
   showUnit,
+  useSemanticHtml = false,
 }) => {
   const handles = useCssHandles(CSS_HANDLES)
 
@@ -44,6 +46,7 @@ const StepperProductQuantity: FunctionComponent<StepperProps> = ({
         onChange={onChange}
         value={selectedQuantity}
         maxValue={availableQuantity || undefined}
+        useSemanticHtml={useSemanticHtml}
       />
     </div>
   )

react/typings/vtex.styleguide.d.ts

@@ -14,13 +14,14 @@
     maxValue?: number
     unitMultiplier: number
     suffix?: string
     onChange: (e: any) => void
+    useSemanticHtml?: any
   }
 
   interface DropdownProps {
     id: string
     testId: string
     onChange: (e: any) => void
     placeholder: string
     options: Array<{
       value: number
@@ -35,7 +36,7 @@
     size: NumericSize
     value: string
     maxLength: number
     onChange: (e: any) => void
     onBlur: () => void
     placeholder: string
   }