Language Component Props

[korgon]

Proposed props for static text on every component:

export const en = {
    components: {
        results: {
            lang: {
                showMore: {
                    text: (data) => `show ${data.remaining} moar`
                },
                showMore {
                    text: 'Show Moar'
                },
            }
        }
    }
};

The lang prop will need be on every Snap Preact component that has static text - it should contain an object that is keyed intuitively (maybe structurally) and consistently across them all. We also need to make room for accessibility language translations where applicable (typically aria attributes).

type LangType<P> = string | ((data: P) => string);

Example Facet component lang prop:

// combined selector
lang?: {
    showMoreLess: {
        text?: LangType<{facet: ValueFacet}>;
        a11y?: {
            'aria-label'?: LangType<{facet: ValueFacet}>;
            'role'?: LangType<{facet: ValueFacet}>;
            'aria-valuetext'?: LangType<{facet: ValueFacet}>;
        }
    },
    facetHeader: {
        a11y?: {
            'aria-label'?: LangType<{facet: ValueFacet}>;
        }
    }
}

Each entry should support usage as either a primitive string or a function. The variables that are passed to each function will vary from component to component but thought should be put into ensuring consistent usage across all components.

Components will NOT have default values for the lang prop, instead the values provided there will overwrite any default values supplied within the component itself (via prop or otherwise).

The proposed solution is to utilize a hook in order to change element text contents or to add accessibility attributes. For example, adding the attribute ss-lang="showMoreLess" to an element would signify that this element supports the lang prop usage and the text would be found in lang.showMoreLess.text and any accessibility attributes would be found in lang.showMoreLess.a11y.

We need to ensure that there is no flashing of content changes, this would be a bad UX.