Use :lang() and a Sass map to deal with translations of custom file input text?

[cvrebert]

See https://developer.mozilla.org/en-US/docs/Web/CSS/:lang

Something along the lines of:

$custom-file-text: (
  button-label: (
    en: "Browse"
  ),
  placeholder: (
    en: "Choose file..."
  )
) !default;

@each $lang, $text in map-get($custom-file-text, button-label) {
  ...:lang($lang) {
    content: $text;
  }
}

Folks using other languages can then set new entries in the map via their custom variables file to add their translations.

CC: @mdo for feedback

[mdo]

Oh, neat. That'd be cool to implement I think. Would we do it anywhere else?

[cvrebert]

We don't have language-specific content anywhere else in the CSS besides the custom file inputs, so no.

[cvrebert]

Implemented in #18925.