Skip to content

Conversation

@vanpra1
Copy link

@vanpra1 vanpra1 commented Sep 23, 2021

Pull request checklist

  • [Y] Addresses an existing issue: Fixes #0000
  • [Y] Include a change request file using $ yarn change

Description of changes

On a single select, the DetailList header section has a check box that is not selectable. This checkbox has aria attibutes but does not have a role attribute causing an accessibility issue aria-allowed-attr. The current fix is to remove those aria attributes and resolve the accessibility issue.

(give an overview)

Focus areas to test

(optional)

@vanpra1 vanpra1 requested review from a team and ThomasMichon as code owners September 23, 2021 13:50
@msft-fluent-ui-bot msft-fluent-ui-bot added the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Sep 23, 2021
Copy link
Collaborator

@msft-fluent-ui-bot msft-fluent-ui-bot left a comment

Choose a reason for hiding this comment

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

It looks like this change to the 7.0 branch may not have been submitted to master yet. Now that version 8 has released, all changes must be submitted to the master branch first (except in emergencies or if the change is irrelevant to version 8).

Please do one of the following:

  • If you've already created a PR to master, add a link to it
  • If the change is irrelevant to version 8, add a comment explaining why
  • Otherwise, create a PR to master with this same change, and add a link to it

After that, you can dismiss this review and remove the "needs cherry-pick" label (or ask a team member to help do so).

Want to avoid this in the future? Include text like "Cherry-pick of ####" in the PR description (where #### is the real master PR number).

@vanpra1
Copy link
Author

vanpra1 commented Sep 23, 2021

This need to be made into v8 because the fix already exists in v8 as part of this PR - #18366

The cherry pick label can be removed.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 23, 2021

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 305fe54:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration

@size-auditor
Copy link

size-auditor bot commented Sep 23, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-DetailsList 218.257 kB 218.417 kB ExceedsBaseline     160 bytes
office-ui-fabric-react office-ui-fabric-react-ShimmeredDetailsList 228.714 kB 228.874 kB ExceedsBaseline     160 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: dfa33092a8ce8405681ebec526b187880e14eef3 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 23, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
BaseButton mount 1013 1010 5000
Breadcrumb mount 45383 45364 5000
Checkbox mount 1753 1779 5000
CheckboxBase mount 1502 1446 5000
ChoiceGroup mount 5549 5529 5000
ComboBox mount 989 987 1000
CommandBar mount 8472 8532 1000
ContextualMenu mount 16849 16369 1000
DefaultButton mount 1302 1281 5000
DetailsRow mount 4088 4236 5000
DetailsRowFast mount 4045 4115 5000
DetailsRowNoStyles mount 3857 4001 5000
Dialog mount 1908 1924 1000
DocumentCardTitle mount 1899 1960 1000
Dropdown mount 2796 2853 5000
FocusTrapZone mount 1880 1915 5000
FocusZone mount 1946 1982 5000
IconButton mount 1957 2016 5000
Label mount 372 373 5000
Layer mount 2173 2186 5000
Link mount 490 509 5000
MenuButton mount 1706 1689 5000
MessageBar mount 2232 2223 5000
Nav mount 3644 3697 1000
OverflowSet mount 1542 1586 5000
Panel mount 1622 1603 1000
Persona mount 868 883 1000
Pivot mount 1618 1647 1000
PrimaryButton mount 1442 1450 5000
Rating mount 9008 8964 5000
SearchBox mount 1429 1466 5000
Shimmer mount 2933 3030 5000
Slider mount 1685 1667 5000
SpinButton mount 5640 5644 5000
Spinner mount 451 465 5000
SplitButton mount 3582 3576 5000
Stack mount 561 570 5000
StackWithIntrinsicChildren mount 1904 1992 5000
StackWithTextChildren mount 5579 5630 5000
SwatchColorPicker mount 11536 11808 5000
TagPicker mount 3150 3136 5000
TeachingBubble mount 54449 55335 5000
Text mount 488 484 5000
TextField mount 1555 1567 5000
Toggle mount 894 938 5000
button mount 119 113 5000

@ghost
Copy link

ghost commented Sep 23, 2021

CLA assistant check
All CLA requirements met.

Copy link
Contributor

@smhigley smhigley left a comment

Choose a reason for hiding this comment

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

I'd also recommend removing lines 243-256 in DetailsHeader.base.tsx, so we're not passing in an aria-label/aria-describedby to <DetailsRowCheck> that won't be used.

Thanks for the PR!

@vanpra1
Copy link
Author

vanpra1 commented Sep 27, 2021

I'd also recommend removing lines 243-256 in DetailsHeader.base.tsx, so we're not passing in an aria-label/aria-describedby to <DetailsRowCheck> that won't be used.

Thanks for the PR!

I removed ara-describedby. Do you also recommend removed aria-label? The PR to v8 did not remove aria-label

@smhigley smhigley removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Sep 27, 2021
@ThomasMichon
Copy link
Member

Is this change effectively undoing #17623? I want to make sure the issues brought up in that PR are still addressed.

@smhigley
Copy link
Contributor

@ThomasMichon nope, it doesn't undo that one (I double checked in the PR demo site link). It only removes the label when canSelect is false, and a plain <div> is rendered instead of a checkbox. The aria-describedby removal comes from this PR: #18366, since the name/description are guaranteed to be the same so we shouldn't set the description.

@smhigley smhigley merged commit 3f3772f into microsoft:7.0 Sep 28, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/theme-samples@v7.3.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/fluent-theme@v7.5.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/mdl2-theme@v0.5.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/react-cards@v0.116.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/experiments@v7.40.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/date-time@v7.20.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/tsx-editor@v0.15.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/fabric-website@v7.17.8 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/fabric-website-resources@v7.10.8 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/charting@v4.17.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/example-app-base@v7.20.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-examples@v0.15.8 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/azure-themes@v7.8.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@uifabric/api-docs@v7.7.6 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/storybook@v0.7.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉office-ui-fabric-react@v7.176.3 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants