feat: Remove ion-back-button text

[KevinLeneschmidt]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

I want to be able to remove the text from the ion-back-button without using text="", because this breaks the page transitions like mentioned here.

Describe the Use Case

Sometimes, you want to use the ion-back-button without any text, just the icon.

Describe Preferred Solution

Explicitly setting text to null should remove any text from the ion-back-button, undefined can be still used to set the default 'Back' text.

Describe Alternatives

No response

Related Code

Link to a repo

Additional Information

Ionic forum link to the topic here

No response

[thetaPC]

Thank you for submitting the issue!

I strongly advise retaining the text for improved web accessibility. However, I understand your desire to hide it visually. This can be achieved using CSS since the text is accessible as a shadow part. The code snippet below demonstrates how to hide the text while ensuring it remains accessible to screen readers.

ion-back-button::part(text) {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

I'm closing this issue as it can be resolved via styling. If you have any other concerns, please open a new PR.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

[thetaPC]

Related PR