feat: adding missing label props to make text in i18n file customizable (#1980)

* feat: adding label props to make text from i8n file customizable

* docs: updating accessibility sections

* docs: updating pagination docs

* chore: address comments

* Create friendly-ants-act.md

* Update friendly-ants-act.md

* chore: fix constants exports

* test: update e2e test

* fix: fix vue e2e tests

* fix: fix angular e2e tests

* chore: revert label updates for country code

* chore: fix angular e2e tests

Author: zchenwei

.changeset/friendly-ants-act.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": minor
+---
+
+feat: adding missing label props to make text in i18n file customizable

docs/src/pages/[platform]/components/pagination/examples/PaginationAccessibilityExample.tsx

@@ -0,0 +1,14 @@
+import { usePagination, Pagination } from '@aws-amplify/ui-react';
+
+export const PaginationAccessibilityExample = () => {
+  const paginationProps = usePagination({ totalPages: 5 });
+  return (
+    <Pagination
+      pageLabel="Jump to page"
+      currentPageLabel="You are on page"
+      previousLabel="Back to previous page"
+      nextLabel="Forward to next page"
+      {...paginationProps}
+    />
+  );
+};

docs/src/pages/[platform]/components/pagination/examples/index.ts

@@ -1,5 +1,6 @@
 export { ControlledPaginationExample } from './ControlledPaginationExample';
 export { DefaultPaginationExample } from './DefaultPaginationExample';
+export { PaginationAccessibilityExample } from './PaginationAccessibilityExample';
 export { PaginationStylingExample } from './PaginationStylingExample';
 export { PaginationHasMorePagesExample } from './PaginationHasMorePagesExample';
 export { PaginationSiblingCountExample } from './PaginationSiblingCountExample';

docs/src/pages/[platform]/components/pagination/react.mdx

@@ -6,6 +6,7 @@ import { ThemeAlert } from '@/components/ThemeAlert';
 import {
   ControlledPaginationExample,
   DefaultPaginationExample,
+  PaginationAccessibilityExample,
   PaginationHasMorePagesExample,
   PaginationSiblingCountExample,
   PaginationStylingExample,
@@ -28,13 +29,15 @@ Import the Pagination component. To use Pagination as an uncontrolled component,
 <Example>
   <DefaultPaginationExample />
   <ExampleCode>
-```tsx file=./examples/DefaultPaginationExample.tsx
+    ```tsx file=./examples/DefaultPaginationExample.tsx
+
+    ```
 
-````
   </ExampleCode>
 </Example>
 
 ### Controlled component
+
 To use Pagination as a controlled component, you'll need to handle state using these callback functions:
 
 - `onNext`: triggered when the next-page button `>` is pressed
@@ -44,9 +47,9 @@ To use Pagination as a controlled component, you'll need to handle state using t
 <Example>
   <ControlledPaginationExample />
   <ExampleCode>
-```tsx file=./examples/ControlledPaginationExample.tsx
+    ```tsx file=./examples/ControlledPaginationExample.tsx
 
-````
+    ```
 
   </ExampleCode>
 </Example>
@@ -58,9 +61,9 @@ It's common to use a paged API where the total number of pages in the dataset is
 <Example>
   <PaginationHasMorePagesExample />
   <ExampleCode>
-```tsx file=./examples/PaginationHasMorePagesExample.tsx
+    ```tsx file=./examples/PaginationHasMorePagesExample.tsx
 
-````
+    ```
 
   </ExampleCode>
 </Example>
@@ -72,9 +75,31 @@ It's common to use a paged API where the total number of pages in the dataset is
 <Example>
   <PaginationSiblingCountExample />
   <ExampleCode>
-```tsx{8} file=./examples/PaginationSiblingCountExample.tsx
+    ```tsx{7} file=./examples/PaginationSiblingCountExample.tsx
+
+    ```
+
+  </ExampleCode>
+</Example>
+
+## Accessibility
+
+By default, the root node of the Pagination component has a role of `navigation`. The previous-page button `<` has `aria-label="Go to previous page"` by default, and likewise, the next-page button `>` has `aria-label=Go to next page`. The current page is labelled by an invisible text [`Current Page:`](https://www.w3.org/WAI/tutorials/menus/structure/#indicate-the-current-item) in conjunction with the current page number (e.g, `Current Page: 1` if page `1` is the current page). Other pages by default have `aria-label=Go to page X`, where `X` is the number of the page. To customize these labels:
+
+- `previousLabel`: Set the `aria-label` for the left arrow button `<` (defaults to `Go to previous page`)
+
+- `nextLabel`: Set the `aria-label` for the right arrow button `>` (defaults to `Go to next page`)
+
+- `currentPageLabel`: Set the invisible label for current page (defaults to `Current Page:`). It will be used to construct the label text for current page. e.g, `Current Page: 1` if page `1` is the current page.
+
+- `pageLabel`: Set the label for each page button other than the current page (defaults to `Go to page`). It will be used to construct the `aria-label`. e.g, `Go to page 1` for page `1` button.
+
+<Example>
+  <PaginationAccessibilityExample />
+  <ExampleCode>
+    ```tsx file=./examples/PaginationAccessibilityExample.tsx
 
-````
+    ```
 
   </ExampleCode>
 </Example>
@@ -94,9 +119,10 @@ You can customize the appearance of all Pagination components in your applicatio
 <Example>
   <PaginationThemeExample />
   <ExampleCode>
-```tsx file=./examples/PaginationThemeExample.tsx
+    ```tsx file=./examples/PaginationThemeExample.tsx
+
+    ```
 
-````
   </ExampleCode>
 </Example>
 
@@ -130,15 +156,6 @@ To override styling on all Pagination components, you can set the Amplify CSS va
   </ExampleCode>
 </Example>
 
-To replace the Pagination styling, unset it:
-
-```css
-.amplify-pagination {
-  all: unset;
-  /* Add your styling here*/
-}
-````
-
 ### Local styling
 
 To override styling on a specific Pagination component, you can use a class selector or style props.
@@ -190,7 +207,3 @@ _Using style props:_
 
   </ExampleCode>
 </Example>
-
-## Accessibility
-
-By default, the root node of the Pagination component has a role of "navigation", and each page item has an `aria-label` that identifies the purpose of the item ("Go to previous page", "Go to next page", "Go to page 1", etc).

docs/src/pages/[platform]/components/phonenumberfield/examples/AccessibilityExample.tsx

@@ -6,5 +6,6 @@ export const AccessibilityExample = () => (
     labelHidden={true}
     defaultCountryCode="+1"
     placeholder="Phone Number"
+    countryCodeLabel="Country code"
   />
 );

packages/react/src/primitives/Collection/Collection.tsx

@@ -6,8 +6,7 @@ import { Flex } from '../Flex';
 import { Grid } from '../Grid';
 import { Pagination, usePagination } from '../Pagination';
 import { SearchField } from '../SearchField';
-import { ComponentClassNames } from '../shared/constants';
-import { SharedText } from '../shared/i18n';
+import { ComponentClassNames, ComponentText } from '../shared/constants';
 import { strHasLength } from '../shared/utils';
 import {
   CollectionProps,
@@ -45,6 +44,7 @@ export const Collection = <Item,>({
   items,
   itemsPerPage = DEFAULT_PAGE_SIZE,
   searchFilter = itemHasText,
+  searchLabel = ComponentText.Collection.searchButtonLabel,
   searchPlaceholder,
   type = 'list',
   testId,
@@ -98,7 +98,7 @@ export const Collection = <Item,>({
       {isSearchable ? (
         <Flex className={ComponentClassNames.CollectionSearch}>
           <SearchField
-            label={SharedText.Collection.SearchFieldLabel}
+            label={searchLabel}
             placeholder={searchPlaceholder}
             onChange={(e) => onSearch(e.target.value)}
             onClear={() => setSearchText('')}

packages/react/src/primitives/Collection/__tests__/Collection.test.tsx

@@ -200,4 +200,26 @@ describe('Collection component', () => {
     userEvent.type(searchInput, text);
     expect(searchInput).toHaveValue(text);
   });
+
+  it('should be able to customize search field label', async () => {
+    const searchLabel = 'Search emojis';
+    render(
+      <Collection
+        testId={testList}
+        type="list"
+        items={emojis}
+        searchLabel={searchLabel}
+        isSearchable
+      >
+        {(item, index) => (
+          <div key={index} aria-label={item.title}>
+            {item.emoji}
+          </div>
+        )}
+      </Collection>
+    );
+
+    const searchControl = await screen.findByLabelText(searchLabel);
+    expect(searchControl).toBeDefined();
+  });
 });

packages/react/src/primitives/Field/FieldClearButton.tsx

@@ -3,16 +3,16 @@ import * as React from 'react';
 import { FieldClearButtonProps, Primitive } from '../types';
 import { FieldGroupIconButton } from '../FieldGroupIcon';
 import { IconClose } from '../Icon';
-import { SharedText } from '../shared/i18n';
+import { ComponentText } from '../shared/constants';
 
-const ariaLabelText = SharedText.Fields.ariaLabel.clearField;
+const ariaLabelText = ComponentText.Fields.clearButtonLabel;
 
 const FieldClearButtonPrimitive: Primitive<FieldClearButtonProps, 'button'> = (
-  props,
+  { ariaLabel = ariaLabelText, size, ...rest },
   ref
 ) => (
-  <FieldGroupIconButton ariaLabel={ariaLabelText} ref={ref} {...props}>
-    <IconClose size={props.size} />
+  <FieldGroupIconButton ariaLabel={ariaLabel} ref={ref} {...rest}>
+    <IconClose size={size} />
   </FieldGroupIconButton>
 );
 

packages/react/src/primitives/Pagination/Pagination.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { ComponentClassNames } from '../shared/constants';
 import { Flex } from '../Flex';
-import { PaginationProps, Primitive } from '../types';
-import { usePaginationItems } from './usePaginationItems';
 import { View } from '../View';
+import { usePaginationItems } from './usePaginationItems';
+import { PaginationProps, Primitive } from '../types';
+import { ComponentClassNames } from '../shared/constants';
 
 const PaginationPrimitive: Primitive<PaginationProps, 'nav'> = (
   {
@@ -14,6 +14,10 @@ const PaginationPrimitive: Primitive<PaginationProps, 'nav'> = (
     totalPages,
     hasMorePages = false,
     siblingCount,
+    currentPageLabel,
+    pageLabel,
+    previousLabel,
+    nextLabel,
     onNext,
     onPrevious,
     onChange,
@@ -26,6 +30,10 @@ const PaginationPrimitive: Primitive<PaginationProps, 'nav'> = (
     totalPages,
     hasMorePages,
     siblingCount,
+    currentPageLabel,
+    pageLabel,
+    previousLabel,
+    nextLabel,
     onNext,
     onPrevious,
     onChange

packages/react/src/primitives/Pagination/PaginationItem.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
-import { classNameModifier, classNameModifierByFlag } from '../shared/utils';
 import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { IconChevronLeft, IconChevronRight } from '../Icon';
 import { View } from '../View';
 import { VisuallyHidden } from '../VisuallyHidden';
 import { PaginationItemProps } from '../types/pagination';
-import { ComponentClassNames } from '../shared/constants';
+import { ComponentClassNames, ComponentText } from '../shared/constants';
+import { classNameModifier, classNameModifierByFlag } from '../shared/utils';
 
 export const PAGINATION_CURRENT_TEST_ID = 'current';
 export const PAGINATION_ELLIPSIS_TEST_ID = 'ellipsis';
@@ -17,6 +17,7 @@ export const PaginationItem: React.FC<PaginationItemProps> = ({
   type,
   page,
   currentPage,
+  currentPageLabel = ComponentText.PaginationItem.currentPageLabel,
   isDisabled,
   onClick,
   ariaLabel,
@@ -68,7 +69,7 @@ export const PaginationItem: React.FC<PaginationItemProps> = ({
                * Use markup to indicate the current item of a menu, such as the current page on a website, to improve orientation in the menu.
                * @link https://www.w3.org/WAI/tutorials/menus/structure/#indicate-the-current-item
                */}
-              <VisuallyHidden>Current Page:</VisuallyHidden>
+              <VisuallyHidden>{currentPageLabel}</VisuallyHidden>
               {page}
             </Flex>
           ) : (