chore(label): add title to required dot

.changeset/fair-pugs-flash.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/label': patch
+'@twilio-paste/core': patch
+---
+
+[Label] Add "required" title to required dot

packages/paste-core/components/label/__tests__/label.test.tsx

@@ -75,10 +75,10 @@ describe('Customization', () => {
 });
 
 describe('RequiredDot', () => {
-  it('should not have text by default', () => {
+  it('should have text "Required" by default', () => {
     render(<RequiredDot data-testid="test-dot" />);
     const dot = screen.getByTestId('test-dot');
-    expect(dot?.textContent).toEqual('');
+    expect(dot?.textContent).toEqual('Required');
   });
 
   it('should use i18nLabel prop for the dot text', () => {

packages/paste-core/components/label/src/RequiredDot.tsx

@@ -11,7 +11,7 @@ export interface RequiredDotProps {
 
 export const RequiredDot: React.FC<React.PropsWithChildren<RequiredDotProps>> = ({
   element = 'REQUIRED_DOT',
-  i18nLabel = '',
+  i18nLabel = 'Required',
   ...props
 }) => {
   return (
@@ -23,6 +23,7 @@ export const RequiredDot: React.FC<React.PropsWithChildren<RequiredDotProps>> =
       cursor="pointer"
       display="flex"
       height="sizeIcon30"
+      title={i18nLabel}
       element={`${element}_WRAPPER`}
     >
       <Box

packages/paste-website/src/pages/components/form/index.mdx

@@ -421,7 +421,7 @@ Make required and optional fields distinguishable. Try to avoid optional input f
 
 - If most of the inputs on a form are required, indicate the few that are optional.
 - If most of the inputs on a form are optional, indicate the few that are required.
-- When indicating what form fields are either required or optional, text is the most clear. However, the required symbol is relatively well understood to mean required. If you do use the required symbol to indicate required fields, include a legend or form key that explains what it indicates.
+- When indicating what form fields are either required or optional, text is the most clear. However, the required symbol is relatively well understood to mean required. If you do use the required symbol to indicate required fields, you'll see a "Required" title on the symbol. If you're building for other languages, use the `i18nLabel` prop to translate the "Required" title.
 
 ## When to use Forms