[Bug]: Pagination shows redundant information when `pagesUnknown` is set to true.

Package

@carbon/react, carbon-components-react

Browser

Chrome, Firefox, Edge

Package version

v1.14

Description

In pagination component, when pagesUnknown prop has been set to true, the page number is shown twice.

e.g. 1 page 1 If I change the page number via select, the page number also updates as such: 2 page 2 3 page 3 …etc,

The first number is the page option selected from the select element. Then the same information is repeated in the following text. Shouldn’t it just be Page <select element with number> [TEXT (SELECT ELEMENT)]? Is there a reason for repeating the page number?

I’m not sure if this counts as a design defect, but this issue was raised in Carbon Angular, just forwarding it here so we know what steps to take.

Screenshots

Steps to reproduce

Go to the following storybook (props have been already set, so no changes required):

https://react.carbondesignsystem.com/?path=/story/components-pagination--default&args=pagesUnknown:true

Code of Conduct

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

@61130061 I believe we already have a hidden label for the select, so I’d just keep it a span to avoid redundant screenreader text.

Your examples look great 👍🏻

[tw15egan]

Also posted in #12302

I think this can be fixed just by passing down pageText={() => ''} to the Pagination component as-is. It seems like there is a slight styling issue in this scenario, but can be fixed by just adding the following CSS to _pagination.scss

.#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
    margin: 0;
}