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

SpinButton updates from accessibility testing #22489

Merged
merged 4 commits into from
Apr 18, 2022

Conversation

spmonahan
Copy link
Contributor

Current Behavior

  1. SpinButton has some styling issues in Windows High Contrast Mode
  2. Increment and decrement buttons do not have labels

New Behavior

  1. Styling has been added for address the WHCM issues. A follow up PR will be made to make icons do this be default.
  2. A strings prop has been added to SpinButton allowing labels be applied to the increment and decrement buttons. These strings support a token, {step}, that will be replaced with the value of the step prop when present in the string. This allows the labels to be localized as needed. By default the English localization is included.

Related Issue(s)

#22307

Minor styling and story updates based on accessibility testing.
Adds default, English, labels to the increment and decrement buttons of
SpinButton. This provides a default description for assistive tech
users.

This commit implements a new prop, `strings` per RFC microsoft#19258. Default
values are provided for English and the strings support a token, `{step}`
that will be replaced with the value of the `step` prop. The `{step}`
token may be omitted. All string keys are required but invididual labels
may be overridden by passing the `aria-label` prop to a slot.
@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 13, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 725a5bf:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@spmonahan spmonahan requested a review from a team April 13, 2022 17:29
@fabricteam
Copy link
Collaborator

fabricteam commented Apr 13, 2022

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-spinbutton
SpinButton
41.512 kB
11.912 kB
42.56 kB
12.142 kB
1.048 kB
230 B

🤖 This report was generated against 399a179957a37480093eaaf5b0ddfb37a97ad7a8

@size-auditor
Copy link

size-auditor bot commented Apr 13, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 399a179957a37480093eaaf5b0ddfb37a97ad7a8 (build)

Copy link
Contributor

@sopranopillow sopranopillow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@spmonahan spmonahan merged commit 66465d3 into microsoft:master Apr 18, 2022
marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
* react-spinbutton: a11y updates

Minor styling and story updates based on accessibility testing.

* react-spinbutton: add labels to spinner buttons

Adds default, English, labels to the increment and decrement buttons of
SpinButton. This provides a default description for assistive tech
users.

This commit implements a new prop, `strings` per RFC microsoft#19258. Default
values are provided for English and the strings support a token, `{step}`
that will be replaced with the value of the `step` prop. The `{step}`
token may be omitted. All string keys are required but invididual labels
may be overridden by passing the `aria-label` prop to a slot.

* react-spinbutton: update API snapshot

* react-spinbutton: remove commented out TODOs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants