Audit items for release #6248

LFDanLu · 2024-04-23T00:00:18Z

Closes

✅ 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:

RSP

allows us to support additional props being passed down via context

rspbot · 2024-04-23T00:29:44Z

Build successful! 🎉

rspbot · 2024-04-23T17:37:27Z

Build successful! 🎉

LFDanLu · 2024-04-23T18:30:22Z

packages/@react-aria/tree/src/useTreeGridListItem.ts

todos in these files are carried over from moving the code around, to be handled later

LFDanLu · 2024-04-23T18:32:50Z

packages/react-aria-components/docs/ListBox.mdx

Note some of these docs don't actually document onAction's usage hence why I didn't add the information detailing the inline onAction. Happy to add those sections if we want

LFDanLu · 2024-04-23T18:34:05Z

packages/react-aria-components/src/DropZone.tsx

+const focusableElements = [
+  'input:not([disabled]):not([type=hidden])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'button:not([disabled])',
+  'a[href]',
+  'area[href]',
+  'summary',
+  'iframe',
+  'object',
+  'embed',
+  'audio[controls]',
+  'video[controls]',
+  '[contenteditable]'
+];
+
+const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';


Grabbed from FocusScope, happy to export it from that package instead but wasn't sure if we want to expose that + the Tabbable selector equivalent

maybe not export the list, but we could have export util function like isFocusable in that package that just takes a dom element and returns a boolean.

sounds good, will add

LFDanLu · 2024-04-23T18:34:25Z

packages/react-aria-components/src/DropZone.tsx

 function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
  let {isDisabled} = props;
  [props, ref] = useContextProps(props, ref, DropZoneContext);
+  let dropzoneRef = useObjectRef(ref);


ref change for Typescript complaining that .current didn't exist

LFDanLu · 2024-04-23T18:35:07Z

packages/react-aria-components/src/Form.tsx

@@ -25,17 +25,17 @@ export interface FormProps extends SharedFormProps, DOMProps {
  validationBehavior?: 'aria' | 'native'
 }

-export const FormValidationBehaviorContext = createContext<FormProps['validationBehavior'] | null>(null);
+export const FormContext = createContext<{validationBehavior: FormProps['validationBehavior']} | null>(null);


for now not adding the rest of the FormProps, not sure if they would be used?

i think there was an issue or discussion about this within the last week, but I haven't managed to dig it back up

rspbot · 2024-04-23T18:40:51Z

Build successful! 🎉

rspbot · 2024-04-23T21:52:34Z

Build successful! 🎉

snowystinger · 2024-04-24T01:47:28Z

packages/@react-aria/tree/src/useTreeGridListItem.ts

+      }
+    },
+    'aria-label': isExpanded ? stringFormatter.format('collapse') : stringFormatter.format('expand'),
+    // TODO: the below actually isn't enough to have keyboard navigation skip over it, we need it to be a span type button but


can we use the data-rsp-prevent-focus?

oh yeah, good point, now that we have that attribute I can hide the above from the tree walker I believe. Will add in followup

went ahead and added it to the PR actually, got rid of the element.getAttribute('aria-hidden') === 'true' from the logic in isAttributeVisible since IMO our data attribute alone should be sufficient

snowystinger · 2024-04-24T02:28:31Z

packages/react-aria-components/src/Form.tsx

@@ -25,17 +25,17 @@ export interface FormProps extends SharedFormProps, DOMProps {
  validationBehavior?: 'aria' | 'native'
 }

-export const FormValidationBehaviorContext = createContext<FormProps['validationBehavior'] | null>(null);
+export const FormContext = createContext<{validationBehavior: FormProps['validationBehavior']} | null>(null);


i think there was an issue or discussion about this within the last week, but I haven't managed to dig it back up

snowystinger · 2024-04-24T02:37:10Z

packages/react-aria-components/src/index.ts

@@ -59,7 +59,7 @@ export {TextField, TextFieldContext} from './TextField';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {Toolbar, ToolbarContext} from './Toolbar';
 export {TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext} from './Tooltip';
-export {Tree, TreeItem, TreeContext, TreeItemContent, TreeStateContext} from './Tree';
+export {UNSTABLE_Tree, UNSTABLE_TreeItem, UNSTABLE_TreeContext, UNSTABLE_TreeItemContent, UNSTABLE_TreeStateContext} from './Tree';


lol, just in case you didn't know, Tree is unstable right now

rspbot · 2024-04-24T20:35:08Z

Build successful! 🎉

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

rspbot · 2024-04-25T00:19:29Z

Build successful! 🎉

rspbot · 2024-04-25T00:30:35Z

Build successful! 🎉

LFDanLu · 2024-04-26T17:25:29Z

packages/@react-aria/gridlist/intl/bg-BG.json

+{
+  "hasActionAnnouncement": "row has action",
+  "hasLinkAnnouncement": "row has link: {link}"
+}


I know we discussed just add the english intl files for tree's expand/collapse strings, but are we fine doing that here for gridlist's action/link announcements (concerned since this is a full released package vs tree being alpha still)?

Decision is we will leave the translations in here for now so we can get them translated by the globalization team and remove the row announcements for now. This means gridlist row's announcements still have parity with what is on prod right now so should be fine

rspbot · 2024-04-26T17:39:07Z

Build successful! 🎉

rspbot · 2024-04-26T17:42:35Z

Build successful! 🎉

rspbot · 2024-04-26T21:13:15Z

Build successful! 🎉

devongovett · 2024-04-26T22:04:20Z

packages/@react-aria/tree/src/useTreeGridListItem.ts

+    },
+    'aria-label': isExpanded ? stringFormatter.format('collapse') : stringFormatter.format('expand'),
+    tabIndex: isAndroid() ? -1 : null,
+    'data-react-aria-prevent-focus': true


Oh, we already found another use case for this huh?? 😄

yup, will help simplify the table's expandable row chevron when we add that to RAC as well. I can probably combine it with preventFocusOnPress to make the chevron in RAC tree completely unfocusable outside of mobile screen readers but will dig into that more after release haha

devongovett · 2024-04-26T22:06:58Z

packages/@react-aria/tree/src/useTreeGridListItem.ts

+  let {node} = props;
+  let gridListAria = useGridListItem(props, state, ref);
+  let isExpanded = gridListAria.rowProps['aria-expanded'] === true;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');


wrong package?

Suggested change

let stringFormatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');

let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/tree');

ah derp, copy paste strikes again, thanks

rspbot · 2024-04-26T22:28:23Z

Build successful! 🎉

rspbot · 2024-04-26T22:33:13Z

Build successful! 🎉

…ic collections And collection-level props for dynamic collections

devongovett · 2024-04-26T23:01:04Z

FYI I added a slight change to the docs for onAction/isDisabled. I'd like to generally recommend the item-level props for static collections, and the collection-level ones for dynamic collections so I updated the examples to follow that pattern.

rspbot · 2024-04-26T23:09:19Z

Build successful! 🎉

rspbot · 2024-04-26T23:57:27Z

Build successful! 🎉

rspbot · 2024-04-26T23:57:28Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@react-aria/combobox

AriaComboBoxProps

 AriaComboBoxProps<T> {
   allowsCustomValue?: boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   inputValue?: string
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   onInputChange?: (string) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
-  onSelectionChange?: (Key | null) => any
+  onSelectionChange?: (Key | null) => void
   shouldFocusWrap?: boolean
 }

@react-aria/focus

isFocusable

-
+isFocusable {
+  element: HTMLElement
+  returnVal: undefined
+}

@react-aria/tree

TreeGridListItemAria

 TreeGridListItemAria {
   descriptionProps: DOMAttributes
+  expandButtonProps: AriaButtonProps
   gridCellProps: DOMAttributes
   rowProps: DOMAttributes
 }

it changed:

useTreeGridListItem

@react-spectrum/combobox

Section

 SpectrumComboBoxProps<T> {
   align?: 'start' | 'end' = 'end'
   allowsCustomValue?: boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   direction?: 'bottom' | 'top' = 'bottom'
   formValue?: 'text' | 'key' = 'text'
   inputValue?: string
   isQuiet?: boolean
   items?: Iterable<T>
   loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: DimensionValue
   onInputChange?: (string) => void
   onOpenChange?: (boolean, MenuTriggerAction) => void
-  onSelectionChange?: (Key | null) => any
+  onSelectionChange?: (Key | null) => void
   shouldFlip?: boolean = true
   shouldFocusWrap?: boolean
 }

LFDanLu added 6 commits April 22, 2024 15:52

Update docs for inline onAction and isDisabled for collection items

6715857

remove example since it represents a uncommon use case

37d88e5

fix return type of onSelectionChange

b1ce2a9

Move tree translations to hooks

8e2824d

make form validation context an object

98e4a81

allows us to support additional props being passed down via context

Merge branch 'main' into audit_items

b324345

LFDanLu added 2 commits April 23, 2024 10:13

rename data attribute for hiding things from tree walker

9a42a57

Prefix Tree components with UNSTABLE

a08d62d

expand dropzone click check for any focusable element

d9ddbc9

LFDanLu changed the title ~~(WIP) Audit items for release~~ Audit items for release Apr 23, 2024

LFDanLu marked this pull request as ready for review April 23, 2024 18:28

LFDanLu commented Apr 23, 2024

View reviewed changes

couple of small fixes

787b2a4

snowystinger previously approved these changes Apr 24, 2024

View reviewed changes

ktabors previously approved these changes Apr 24, 2024

View reviewed changes

LFDanLu added 2 commits April 24, 2024 13:19

add data attribute to tree chevron button so keyboard skips over it

4f86225

Merge branch 'main' of github.com:adobe/react-spectrum into audit_items

d6c7540

LFDanLu dismissed stale reviews from ktabors and snowystinger via d6c7540 April 24, 2024 20:23

LFDanLu added needs testing release labels Apr 24, 2024

devongovett reviewed Apr 24, 2024

View reviewed changes

packages/@react-aria/select/src/HiddenSelect.tsx Outdated Show resolved Hide resolved

rename data attribute

1e08fad

LFDanLu dismissed ktabors’s stale review via 1e08fad April 25, 2024 00:08

add isFocusable util

4f57a90

LFDanLu added 2 commits April 26, 2024 10:13

Merge branch 'main' of github.com:adobe/react-spectrum into audit_items

fbd7459

add placeholder translation files for tree and grid list translations

dae24b9

LFDanLu commented Apr 26, 2024

View reviewed changes

Merge branch 'main' into audit_items

4c2cb2e

move macros to dev dep in treeview

dc8beb3

devongovett reviewed Apr 26, 2024

View reviewed changes

LFDanLu added 2 commits April 26, 2024 15:17

remove gridlist row action announcement until we get translations

5f0e4e4

fix copy pasta

d820eb3

Prioritize onAction and isDisabled directly on items in docs for stat…

43b86f3

…ic collections And collection-level props for dynamic collections

devongovett approved these changes Apr 26, 2024

View reviewed changes

dannify approved these changes Apr 26, 2024

View reviewed changes

Merge branch 'main' into audit_items

8e0e03e

dannify merged commit 9ade486 into main Apr 26, 2024
25 checks passed

dannify deleted the audit_items branch April 26, 2024 23:59

	let stringFormatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');
	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/tree');

Audit items for release #6248

Audit items for release #6248

Conversation

LFDanLu commented Apr 23, 2024

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Apr 23, 2024

rspbot commented Apr 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 23, 2024

rspbot commented Apr 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 24, 2024

rspbot commented Apr 25, 2024

rspbot commented Apr 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 26, 2024

rspbot commented Apr 26, 2024

rspbot commented Apr 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 26, 2024

rspbot commented Apr 26, 2024

devongovett commented Apr 26, 2024

rspbot commented Apr 26, 2024

rspbot commented Apr 26, 2024

rspbot commented Apr 26, 2024

@react-aria/combobox

AriaComboBoxProps

@react-aria/focus

isFocusable

@react-aria/tree

TreeGridListItemAria

@react-spectrum/combobox

Section