Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

formatGroupLabel returns string but not used that way in documentation #4407

Open
ebonow opened this issue Jan 27, 2021 · 0 comments
Open

formatGroupLabel returns string but not used that way in documentation #4407

ebonow opened this issue Jan 27, 2021 · 0 comments
Labels
category/accessibility Issues or PRs related to accessibility category/documentation Issues or PRs about documentation or the website itself issue/needs-review

Comments

@ebonow
Copy link
Collaborator

ebonow commented Jan 27, 2021

Perhaps a breaking change for some so wanted to document it with a possibility to discuss/resolve this later.

Given these props, there are different expectations about the return type.
getOptionLabel => string
getOptionValue => string
formatOptionLabel => react.Node
formatGroupLabel => string

The nomenclature suggests that formatGroupLabel would likely be expected to render a react Node as well, but instead it is defined to return a string. I say likely expected because the first grouping example on the homepage of the documentation misuses this prop in this exact way.

const formatGroupLabel = data => (
  <div style={groupStyles}>
    <span>{data.label}</span>
    <span style={groupBadgeStyles}>{data.options.length}</span>
  </div>
);

export default () => (
  <Select
    defaultValue={colourOptions[1]}
    options={groupedOptions}
    formatGroupLabel={formatGroupLabel}
  />
);

While it might not be a big deal to some, misusing these props has an impact on accessibility as it is reliant to relay the label back to the screen reader and will instead return "object object" as the selected option.

Recommendations:

  1. Add group as a possible context for formatOptionLabel to consolidate the render functions there.
  2. Remove/replace the code example shown above (and possibly other examples) in the documentation to convey best practices.
  3. Consider adding documentation about accessibility concerns when using getOptionLabel and formatGroupLabel
  4. Consider renaming formatGroupLabel to getGroupLabel in a future major release.
  5. Consider adding console warnings when an object is stringified.

I could create a PR, but wanted to get thoughts on listed considerations before moving forward

Let it also be noted that the accessibility concerns around the current stringification has been noted here: #4134

@ebonow ebonow added category/documentation Issues or PRs about documentation or the website itself category/accessibility Issues or PRs related to accessibility issue/needs-review labels Jan 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category/accessibility Issues or PRs related to accessibility category/documentation Issues or PRs about documentation or the website itself issue/needs-review
Projects
None yet
Development

No branches or pull requests

1 participant