Changing the label of the submit button

[o-alquimista]

How to change the default "Submit" label on the submit button?

[Haroenv]

Looks like this hasn't been documented yet (cc @shortcuts / @francoischalifour), but you can use translations.submitButtonTitle like this: https://codesandbox.io/s/optimistic-cdn-pkhtx

source:

autocomplete/packages/autocomplete-js/src/createAutocompleteDom.ts

Line 78 in 970ee6a

title: translations.submitButtonTitle,

[o-alquimista]

Thanks, that works.

UPDATE: I'm also defining the following translations: detachedCancelButtonText; clearButtonTitle.

I'd like to ask if it's possible to remove the submit button and keep the label in its place? I'm trying to avoid having to redesign/customize the whole widget from scratch.

The autocomplete widget is inside another form, which already has a submit button. I'm setting the value of a hidden input when the user selects a suggestion, and clearing it when they press the reset button.

The button with the "magnifying glass" is not being used for anything. What do you think I should do with it?

EDIT: for now, I'm gonna use onSubmit() to submit the outer form. I just worry about accessibility issues this may cause.

[francoischalifour]

You could use CSS to hide the submit button:

.aa-SubmitButton {
  display: none;
}

[o-alquimista]

I'm afraid that hiding the submit button will raise accessibility issues, as it's part of the label. I wanted to do something like this:

<label for="processo-input">
  <!-- the button was here, now it's just an icon and an accessible label -->
  <i class="fas fa-search" aria-hidden="true"></i>
  <span class="visually-hidden">Filtrar por processo</span>
</label>

I suppose this requires taking over the rendering process, which is pretty advanced. I might try going that way eventually. Should be fun.

EDIT: Hiding the button makes editcombobox lose its label. It doesn't have an id, unlike the entry element, so it's not an easy fix. Taking over the rendering process for the win...

EDIT 2: using the same effect created by the Bootstrap classes sr-only (4) or visually-hidden (5) on the .aa-InputWrapperPrefix element seems to be an acceptable solution that doesn't break accessibility. You'll need to add some left padding inside the text box to compensate, though: