Skip to content

Focus Management within Shadow DOM #1

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

Draft
wants to merge 975 commits into
base: shadow-dom-base-branch
Choose a base branch
from

Conversation

MahmoudElsayad
Copy link
Collaborator

@MahmoudElsayad MahmoudElsayad commented Mar 11, 2024

Closes adobe#1472

✅ 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 added a commit that referenced this pull request Aug 5, 2024
yihuiliao and others added 29 commits October 11, 2024 23:08
* Update resizer svg to newest one from icons team

* Bump tokens package

* update Badge colors

* update to use the same token names instead of their underlying color

* replacing accent with informative
* Add expanded boolean attribute to tailwind plugin

After testing out the new `Disclosure` components, I see that the tailwind plugin does not support styling the `expanded` state, leaving me to style using `data-[expanded]`. This PR adds `expanded` top the list of boolean states.

* Update tests

* fix tests

* fix test

* Add selector for native variant

* lint fix
* Decrease chance of hitting timeouts on table tests

* move throw outside of act

* fix TS
* initialize github actions

* update linting code

* update comment

* update wip regex

* add link to pr naming guide

* cache yarn?

* update frozen-lockfile to immutable for yarn 4

* try caching node modules

* remove hardened mode, testing to see yarn install time

* remove action, use workflow only
cant use transparent for the default quiet row state, need a opaque color to hide scrolled text
* docs: add contributing Q & A section

* Update CONTRIBUTING.md

Try without specifying language

* Apply suggestions from code review

Co-authored-by: Robert Snow <snowystinger@gmail.com>

---------

Co-authored-by: Reid Barber <reid@reidbarber.com>
Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>
* Ensure `Dialog` has the `data-rac` attribute

* cleanup
Co-authored-by: Reid Barber <reid@reidbarber.com>
…e header (adobe#7179)

* update s2 accordion api

* fix lint

* rename to disclosure title, context for action button

* fix lint

* remove console log

* fix typscript

* allow disclosure title to wrap header

* add chromatic stories

* make code more concise

* fix lint

* fix chromatic stories

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
* docs: disclosure hooks

* docs types

* move DisclosureGroup to useDisclosureGroupState docs page

* add anatomy diagram from adobe#7165 to useDisclosure docs

* expand on hidden="until-found"

* fix interface tables

* Revert "move DisclosureGroup to useDisclosureGroupState docs page"

This reverts commit 8216354.
…dobe#7166)

* add tailwind starter for Disclosure and DisclosureGroup

* fix focus ring border radius

* update disabled chevron style

* fix focus ring in group

* cleanup variants and styles

* fix text color

* fix padding

* move DisclosureGroup to it's own story

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Daniel Lu <dl1644@gmail.com>
* initial accordion docs

* more v3 disclosure docs

* add rac disclosure and disclosure group docs

* add anatomy diagrams and example cards

* remove disclosure children to be required

* edits

* update wording

* edits

* add inline styles

* use heading, couple edits

* use title instead of label, add to advance customization section

* add example to disclosure group
* Update linting

* Update jest.config.js
* support hidden="until-found" in DisclosureGroup

* typescript

* cleanup

* useLayoutEffect and RAF

* add RAF/flushSync

* lint

* add comments

* remove extra changes from merge

* revert newlines

* typescript

* more typescript

* use DisclosureTitle
* RAC Disclosure SSR tests

* tests for nested disclosures and interactive adjacent elements

* DisclosurePanel: add DOMProps and render props type/table

* update v3 stories and chromatic

* update v3 Accordion deps

* add v3 Accordion SSR test

* update DisclosureGroupProps type to remove collection in jsdoc

* more v3 accordion tests

* yarn.lock

* lint

* add isQuiet to v3 Accordion/Disclosure

* add focus ring style

* update stories/chromatic

* lint

* remove active outline

* lint

* add isQuiet to v3 docs
* fix: eslint speed up

* use the kindly published fixed version
* TS Strict aria C and D

* Propagate input type from textfield to focusable props

* Check input key for null in useDateSegment before calling onInput

* review followup

* fix types

* review comments

* fix remaining ts error

* sort descriptor is required

* keep value required

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>
LFDanLu and others added 30 commits January 22, 2025 19:07
…Autocomplete SearchField (adobe#7625)

* add isFocusVisible support to useMenuItem

* Adding tests and style in storybook

* fix: (WIP) Fix autocomplete searchfield focus ring (adobe#7626)

* for discussion

* fix searchfield focus ring appearing on keypress when wrapped in a autocomplete

* add test

* remove extranous controls
* feat: add overflowMode to S2 Badge

* fix spelling

* fix spelling in api diff
* feat: GridList autoFocus

* Update packages/@react-aria/gridlist/src/useGridList.ts

Co-authored-by: Reid Barber <reid@reidbarber.com>

---------

Co-authored-by: Reid Barber <reid@reidbarber.com>
* Fix tabs auto selection

* fix lint

* see if it passes on CI

* remove forced selection in controlled

* add a little more to the test
* fix: dayperiod segment no longer reset

* undo prettier

* add test

---------

Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
* Fix iOS delay for click event

* Fix focusing radio, checkbox, and switch on label press
* bdo on timefield, reverse segments on timefield in datefield

* fix lint

* make things inline

* use unicode character to wrap segments

* fix test

* append unicode to text in hooks, update rac

* add comment

* skip failing test for now

* update keyboard nav

* update logic of how unicode is applied

* fix spacing

* add comments

* update tests

* undo some previous changes

* wrap time segments in lri, wrap fields in unicode isolate

* fix ssr test

* fix spacing

* fix css logic

* fix lint

* fix keyboard nav in rac datepicker popover

* fix lint

* prevent overflow in date range picker

* move overflow hidden to separate new div to fix weird focus ring around the button

* this time actually fix the overflow and focus ring issue

* update var names to be nicer

* fix japanese placeholder for extra space

* fix css positioning

* fix custom width

* small css changes so that rtl will format properly

* memo ordering of segments for keyboard navigation

* add chromatic tests

* fix lint

* add tests to rsp date components

* add tests to rac

* fix tests

* remove comment

* fix chromatic stories

* add chromatic story

* remove style tests

* fix lint

* update to uselayouteffect and update keyboard nav test

* make date input more consistent with using display inline

* update timefield docs css to use display inline

* fix showFormatHelpText

* small change

* fix lint

* add divs to keyboard navigation so it works with older versions

* fix lint + fix tests
* initial upgrade

* Update plugin, homepage, and examples

* fix jest resolver

* Update tailwind starter

* Update rac-tailwind example app

* Update rac-spectrum-tailwind example

* enable verdaccio build

* update tailwind-variants

* patch

* update lockfile

* missing dependency

* copy patches when building website

* dedupe lightningcss

* Update styling page

* Fix TextField focus state

* revert verdaccio

* fix typo
* address autofill issue

* lint

* remove unnecessary change

* Update packages/@react-aria/select/src/HiddenSelect.tsx

Co-authored-by: Robert Snow <snowystinger@gmail.com>

* remove unnecessary variable declaration

---------

Co-authored-by: Robert Snow <snowystinger@gmail.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>
* Render a TreeView

* Correct styles

* update styles to better fix s2

* fix install

* fix lint, add preliminary test

* fix lint

* Add tests and test util

* save point

* Add emptyState

* fix lint

* detached styles

* detached styling with actions

* fix disabled, icon placement, and add examples

* fix lint

* update snapshots

* fix lint and tests

* fix imports

* Match row selection to table

* fix lint, again

* feat: S2 treeview virtualized (adobe#7465)

* feature: s2 treeview virtualization

* support both detached and non in the layout

* fix lint

* fix height for docs

* default tree disabled behavior to all to match our other components

* fix tests

* update snapshots

* fix lint

* fix alignment and remove minwidth

* increase gap between detached items

* remove restriction for isDetached and isEmphasized

* fix border radius

* review comments

* fix lint
* fix: top/left align icon in s2 badge

* center icon only badge
* wip: Refactor S2 tabs to fix accessibility issues

* yarn

* review comments

* fix lint

* fix orientation case

* Fix orientation case not updating overflow

* Add required labelling and other review comments

* fix a few more announcements

* fix lint

* fix chromatic

* remove translations

* fix announcements

* fix lint

---------

Co-authored-by: GitHub <snowystinger@gmail.com>
Co-authored-by: Robert Snow <rsnow@adobe.com>
* [5574] - add moveBefore and moveAfter to useTreeData

* add docs

* remove onlys

* remove console logs
* add comments to explain unicode stuff

* add blurb about the css changes in rac docs

* add spacing to showFormatHelpText
* Allow ReactNode as LabeledValue value

* Add useEffect

* Fix linter errors

* Fix error case tests

* fix story

* Remove todo

* Fix error test

* Add docs

* Fix linter

* Remove console.error check

* Fix docs

* Fix lint errors

* Fix lint errors

* Update to use ReactElement

* Update packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx

* Fix errorMessage test

---------

Co-authored-by: Sana Malik <sanmalik@adobe.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>
* allow for initializing slot with a false state

* save slot render in checkboxgroup

* save slot render in radiogroup

* save slot render in meter

* save render in select

* save render in timefield

* save render in datefield

* save render in hexcolorfield

* save render in colorchannelfield

* save render in progressbar

* saver render in combobox

* save render in searchfield

* save render in numberfield

* save render in taggroup

* save render in textfield

* save render in colorslider

* save render in slider

* save render in datepicker

* Update packages/react-aria-components/src/utils.tsx

---------

Co-authored-by: Robert Snow <snowystinger@gmail.com>
Co-authored-by: Robert Snow <rsnow@adobe.com>
* fix: infinite re-render on reoccuring ids

* fix: useId effect cleanup

* fix: react 19 compatibility

* fix: typo

* fix: jest anything matcher

* fix: match optional anything

* fix: react 16 fc & assertion

* chore: remove nvmrc upgrade

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
* updating the code of conduct to newer version

* Update CONTRIBUTING.md

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Danni <darobins@adobe.com>
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.