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

add @storybook/addon-a11y to S2 storybook #7068

Open
wants to merge 343 commits into
base: main
Choose a base branch
from
Open

Conversation

reidbarber
Copy link
Member

Patch is due to hitting storybookjs/storybook#26855. If anyone can think of a better solution, I'm all ears.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

snowystinger and others added 30 commits March 19, 2024 04:44
* Use WF icons for InlineAlert

* change prop name back

* Get rid of cloneElement and use wrapper on context

* swap to svgr and work on inline alert

* fix sizing temporarily

* Update all icon usages

* inline styles, though i still think these are broken icons

* review comments

* update font colors of inline alert to match figma

Co-authored-by: Daniel Lu <[email protected]>
* update type for Divider

* update type for Dropzone

* update type for Form

* add JSDoc

* update Divider JSDoc

* Update Dropzone JSDoc

* add more JSDocs

* default Form size to M

* formatting

* add min height and width to divider based on orientation

* switch defaults to medium values

* update Divider large sizes

* remove validationBehavior from Form

* add PURE annotations

Co-authored-by: Reid Barber <[email protected]>
Co-authored-by: Rob Snow <[email protected]>
…ted, and other bug fixes (#72)

* adding ActionButton truncation and fixing Taggroup icon color when selected

* fix icon only button sizing in ButtonGroup in safari

not sure why the minWidth is being applied to non icon only buttons though...

* Make help text not render anything if there isnt a error message to display when invalid

* fix dropzone replace mesage banner positioning in Safari

Co-authored-by: Rob Snow <[email protected]>
* update sizes to use auto instead of undefined

* add none to theme

* update to use none instead of auto

* update style logic

* Revert "add none to theme"

This reverts commit 4f552e74de94475dd3809063b3a18ae548b3e740.

* improve story

* remove minWidth and minHeight

Co-authored-by: Reid Barber <[email protected]>
* R-S audit

* RadioGroup api audit and radio props from form context

* renaming props and form props in radio

* adding pure

* updated comments and rest of files

* fixing a variable usage

Co-authored-by: Kyle Taborski <[email protected]>
* testing theme change and webkit-highlight-color change

* Fix iOS tap highlight

* moving webkit highlight to theme

* forgot to remove extra tsignore
* css rename to styles

* fix comment
* fix SearchFieldProps children type

* remove isEntering and isExiting from TooltipProps

* omit more props from Tooltip

* remove open props from Tooltip

Co-authored-by: Reid Barber <[email protected]>
* setup storybook docs

* add intro page

* Remove Picker autodocs

* add syntax highlighting to code snippet

* add missing autodocs

* Remove intro docs for now

* remove extra args from Dialog

* clean up source formatting

Co-authored-by: Reid Barber <[email protected]>
Co-authored-by: Rob Snow <[email protected]>
Co-authored-by: Devon Govett <[email protected]>
* starting a rollup add to test the built files

* rainbow and macros installed and working

Co-authored-by: Kyle Taborski <[email protected]>
cyyynthia and others added 6 commits September 19, 2024 15:53
Co-authored-by: Teemu Andersèn <[email protected]>
Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Reid Barber <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>
feat: forward styles to VirtualizerItem
* initialize accordion item

* update yarn.lock

* better hidden=until-found support

* allow passing in panel ref

* comments

* use RAC in v3 Accordion

* use disclosure hooks

* initialize S2 Accordion

* fix lint

* add exports

* lint

* fix chevron color in dark mode

* fix version of @react-stately/accordion

* keep aria-controls even when closed

* add isFocusVisibleWithin to AccordionPanel

* fix panel height

* fix versions

* add to ts strict config

* change open/close to expand/collapse

* move to disclosure package

* fix chevron shrinking on wrapping header text

* support for disabled in S2

* clear ButtonContext in panel

* update colors

* lint

* fix v3 chevron not rotating

* don't open via onbeforematch if disabled

* add disableTapHighlight

* open disclosure onKeyDown

* add getAllowedOverrides

* remove outer header component

* support level in S2 header

* support level in v3 header

* switch divider to use border

* simplify focus ring and padding styles

* update AccordionItem children types to enforce two React elements

* remove Header from RAC example

* scale font size

* update yarn.lock

* fix keydown interaction + types

* support size, density, isQuiet, and isDisabled on individual items, but use group prop if available

* enforce minWidth at item level

* add isFocusVisibleWithin to item

* fix chevron in RTL

* revert changes to @react-aria/accordion

* fix v3 chevron in RTL

* fix packages/imports

* use 'group' as default role

* deprecate useAccordion and useAccordionItem

* update prop JSDocs

* update yarn.lock

* fix v3 refs

* add v3 tests back

* update imports

* remove @ts-ignore

* Revert "remove @ts-ignore"

This reverts commit 88c1604.

* fix stories

* fix context for individual accordion item

* fix defaults for individual item

* add story for individual item

* make paddingTop and paddingBottom equal

* fix story

* change triggerProps to buttonProps

* add optional ref to useDisclosure

* add SSR check

* use useEvent to add beforematch listener

* rename AccordionGroup to Accordion

* rename Disclosure to AccordionItem

* rename AccordionPanel to DisclosurePanel

* more renaming

* rename RAC Accordion file to Disclosure

* comment updates

* package.json updates

* yarn.lock

* update render props

* add DEFAULT_SLOT

* use fontRelative for border radius

* style macro updates

* lint

* update codemod

* fix tests

* use control for borderRadius

* use ref instead of contentRef prop

* use values on grid

* lint

* yarn.lock

* fix refs

* lint

* revert renames in useAccordion

* move Disclosure  to its own file

* reanme RAC Accordion stories to Disclosure

* fix styles prop type

* fix imports

* update styles type on Disclosure

* add dedicated story for S2 Disclosure

* Slight fixes

* Center baseline and simplify padding by changing the minHeight instead

It uses more normal numbers

* fix import

* update lockfile

---------

Co-authored-by: Devon Govett <[email protected]>
@rspbot
Copy link

rspbot commented Sep 23, 2024

devongovett and others added 8 commits September 23, 2024 11:34
Merge S1 and S2 chromatic storybooks
* fix hcm

* fix truncating
* Returning the RSP Accordion Chromatic-FC story to it previous behavior

* seperating s1 and s2 accordion stories and bringing s1 stories to previous parity

---------

Co-authored-by: Yihui Liao <[email protected]>
* rough progress in refactoring api and testing timers

* update RAC select tests to use the select util

* fix edge cases and add flows for different interaction patterns

* adding sections and removing valueElement, wrapping up final conversions for Picker tests

only modified some of the Picker tests to leverage the utils where I deemed appropriate. Mainly where selection/opening of the Picker wasnt the main focus of the test or if the test itself wasnt checking stuff about the item nodes themselves.

* add initial table util scaffolding

mostly from old PR, adapted to fit the new api

* testing against the RAC tests/React 16/17

had to add an increased test timeout for React 16 tests

* more testing of long press, add findCell/findRow

* test all the different interaction types

the keyboard sort change util function isnt working properly, investigating. The focus isnt being restored to the right place

* use click for now for some keyboard operations

focus management and certain elements arent working properly, see comments

* fix keyboard interaction for sort column util

* figure out the proper timeout for realTimers

* lint

* fix docs and build point

* forgot comma in rebase

* Update packages/@react-spectrum/table/test/Table.test.js

* go with factory instead of having the testers created in constructor

this avoids possible issues with the same tester being used across multiple tests and getting in a weird state in parallel runs

* fix select tests

* replace jest expects with generic assertion

this makes it so the test utils arent specific to jest

* initial menu tester util

* Fixing strict and using MenuTester in tests

* fix failing tests

* fix react 17 test

* add combobox util

* test combobox util

* get rid of setText and add some additional utilities

setText is a bit trouble some because we arent sure if the user wants to simulate a realistic typing flow and/or needs to perform a delete operation to clear the field so will leave that operation to them.

* inital gridlist tester

* refactor gridlist util

* refactor combobox and menu

* refactor select for consistency

* refactor table for consistency

* add selected row getter

for looking at tests in quarry

* have user provide callback for advancing timers

this means we can handle real timers vs fake timers without needing to rely on jest or handling detection ourselves

* update createTester so we get proper return types when creating a tester

* fix lint and react 19 test

* fix tsstrict and tests

* review comments

* make useLongPress accept mouse or touch

* refactor so setting root element is done in contructor

* refactor combobox tests so they dont destructure

* refactor the rest of the utils to avoid destruct

* support passing in interaction type directly when calling interaction

* update api as per feedback and remove unnecessary warning

* cleanup and lower test timeout to minimum to work in react 16

* fix strict and revert jest timing

build failed with 15000 timeout which passed locally...

---------

Co-authored-by: Robert Snow <[email protected]>
@snowystinger
Copy link
Member

Were any violations found?

snowystinger and others added 7 commits September 25, 2024 15:34
* Fix pending animation docs safari

* Extract code for progress circle into a collapsed component

---------

Co-authored-by: Devon Govett <[email protected]>
* Fix Dialog and TagGroup using the wrong ImageContext

* Fix text slot in LinkButton

* lint

* Fix when a card collection has no previews

---------

Co-authored-by: Rob Snow <[email protected]>
* Fix extract starters

* add branch filters back

---------

Co-authored-by: Reid Barber <[email protected]>
* Add Spectrum 2 docs to storybook

* progress on table styles

* fix highlight checkbox rendering and add rounded corners to body

* fix checkbox styles, update to columns, font family

* refactor cell focus ring and add row focus ring

row focus ring needs row render function first

* wrapping up disabled row styles

* empty/loading state brainstorming

* Replace empty state with loading spinner

* add basic sorting

* attempt to add showDivider

this will need changes to RAC table as well....

* Fix select all checkbox click

* add placeholder for DnD and use new icon for sortable column

* update HCM colors

* fix DnD story, removed need for sortDescriptor on context, fix drag button focus visible

also tested moving the sort descriptor in front of the column text andwithout reserving room

* clean up

* switch to box shadow on row for grey row underline and selection focus ring

* update colors/sizes from table specific tokens

* updating lightdark so it works with opacity values

* add row visible focus style and fix empty columnheader focus style for drag/checkbox columns

* initial setup for resizing support

* progress on resizer handle styling and menu icons

* fix more resize bugs and some clean up

* nubbin and more DnD styling

* fix drag indicator so it respects density

* got verdaccio working, updating row background style and confirmed resizers are skipped

* updating loading more to use rowLoader

* use isTableEmpty renderProps from local RAC

* Add virtualizer and begin fixing styles

* add scale, update to column widths, some updates to reflect new token values

* add async loading stories and updates to use background image for table body outline

* fix broken empty state story and more debugging with empty state centering

* move outline to whole table and fix borders and padding for columns

* fix progress circle centering, rows showing up behind column, and scuffed way to curve the last row border

* Support showing the resizer when table header is hovered, fix to table outline, get rid of curved row

* support sticky column cells

* fix sticky positioning for the body loader and row loader

* investigations for sticky column/row selection border, fix for sort icon placement

* making sticky columns cells properly cover cells scrolled beneith them

* fix vertical centering

* lint

* add full height column resize indicator

* hack for show dividers

* add text alignment

* refactor to pass divider and align to cell directly

this avoids us having to expose column props on the cell render props which are tricky to type properly (would need to be a generic). Also fixes some overlapping of the focus rings and the divder and resize indicators

* saving some investigations

* get rid of blue selection outlines and add column header background

* add table focus indicator that is sticky

* HCM and nubbin appearance when triggered via menu

* fixes to icon sizing, illustrations, props in story, font default, and RTL

* adding focus style for empty style and translations

* fix typeahead and load more progress circle positioning

* only expose sort options when avaialble and align resizing column with colum align

* some clean up and notes from investigations

* remove DnD for now

* add more complex story

* fix lint

* fixing infinite load issue

I was applying the scroll ref onto the wrong element causing useLoadMore to trigger indefinitely because the scroll height and the client height of the provided ref were always equal

* increase body focus width, all resizer appears when in resizing mode, fix for premature resizing exit

* forgot to remove extra console.log

* fix strict error

* address review comments and update header background

* make links actually clickable and fix focus ring on link

* fix scroll padding so rows and cells scroll fully into view

* fix dark mode/HCM colors, column min width and tap highlight

* review comments

* fix width/height when determined by flex

* fix lint

* fix checkbox appearing above scrollbar and ipad tap highlight issues

* review comments

* making loader row taller

* fix overflow wrap decreasing row height and add menu min width for small viewports

* clean up context to try to help performance

* update scrollPadding to expected value

chrome behavior is strange because of chrome bug, see https://issues.chromium.org/issues/365913982 which I filed

* fix slow performance when many rows are provided and isQuiet/densitiy is flipped

* add discrete border styles to theme

* Revert "fix slow performance when many rows are provided and isQuiet/densitiy is flipped"

This reverts commit feb0ada.

* fixing lint and tests

* update resizer icon

* update HCM for resizer and add browser bug info

* disable onAction on story by default and add label for single select empty cell

* yarn lock update

* fix lint

* address initial review comments

* make popovers inert when they are transitioning out so table resizing doesnt get canceled

if the user clicks the resize option and hovers another item while the popover is transitioning out it can cause resizing to be canceled. This prevents that case from happening

* add useScale and use it in table instead

* ignore warnings in test for invalid attribute and remove items length check

warning is a compat one for React 19, items check is uneeded due to user error

* forgot the forward ref and add descriptions

* Revert "make popovers inert when they are transitioning out so table resizing doesnt get canceled"

This reverts commit 9cfb896.

* Revert "ignore warnings in test for invalid attribute"

This reverts commit 7006a76.

# Conflicts:
#	packages/react-aria-components/test/ComboBox.test.js
#	packages/react-aria-components/test/Select.test.js

* Use pointerEvents: none in popover during exit animation instead of inert

* Don't expose ResizableTableContainerContext publicly

It has a bunch of internal stuff on it. We don't need the exact height for the resizer, we just need a large enough value that it goes past the end of the table. 100vh should work.

* Use VisuallyHidden from react-aria monopackage

* Revert border style longhands

* lint

---------

Co-authored-by: danilu <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>
@rspbot
Copy link

rspbot commented Sep 25, 2024

@rspbot
Copy link

rspbot commented Sep 25, 2024

@reidbarber
Copy link
Member Author

@snowystinger Fixed a few story ones in 4831796.

In terms of bugs, the main one was #7085. There were also some violations that may need some more investigation/discussion:

  • Card: Document should not have more than one contentinfo landmark (for Footer inside Card)
    • Maybe we should pass in another role via FooterContext?
  • Card: Ensures landmarks are unique (for Footer inside Card)
    • Should go away if we add a different role for the previous item.
  • Card: various issues when in the loading/skeleton state that may need some investigation
  • Meter: Elements must only use allowed ARIA attributes (for aria-valuenow="80", aria-valuemin="0", aria-valuemax="100", aria-valuetext="80%")
    • May be a false positive?
    • Also exists in a Form story

snowystinger
snowystinger previously approved these changes Sep 25, 2024
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.