ryanflorence

function createAriaLink(element) {
  const href = element.getAttribute("data-aria-href")

  element.setAttribute("role", "link")
  element.setAttribute("tabindex", 0)
  element.addEventListener("click", triggerAction)
  element.addEventListener("keydown", keydownHandler)
  onRemove(element, destroy)

  function keydownHandler(event) {

ryanflorence

const callbacks = []
const deps = []
let callCount = 0

function useCallback(callback, deps) {
  // figure out which useCallback we're rendering
  // (each render starts at -1)
  const id = ++callCount

  // second render

ryanflorence

function handleKeyDown(event) {
  if (event.key === "Tab" && event.shiftKey) {
    if (shiftTabbedFromElementAfterTrigger(event)) {
      focusLastTabbableInPopover(event);
    } else if (shiftTabbedOutOfPopover(event)) {
      focusTriggerRef(event);
    } else if (shiftTabbedToBrowserChrome(event)) {
      disableTabbablesInPopover(event);
    }
  } else if (event.key === "Tab") {

ryanflorence

function ModalExampleFocusManagement({ label="Hamburger" }) {
  const [isOpen, setIsOpen] = useState(false)
  const triggerRef = useRef()
  const headingRef = useRef()
  const justOpenedRef = useRef(false)

  useEffect(() => {
    if (justOpenedRef.current) {
      justOpenedRef.current = false
      headingRef.current.focus()

ryanflorence

function RadioGroup({ onChange, name, children }) {
  const [state, inputProps] = useRadioGroup(name)
  return (
    <Context.Provider value={inputProps}>
      {children}
    </Context.Provider>
  )
}

function RadioInput(props) {

ryanflorence

import "app/index.css"
import "app/App.css"
import "./styles.css"
import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"

function App() {
  const [appTime] = useState(Date.now())

  return (

ryanflorence

import React, { useState, useEffect } from "react"
import FeedPost from "app/FeedPost"
import {
  loadFeedPosts,
  subscribeToNewFeedPosts
} from "app/utils"
// import FeedFinal from './Feed.final'
// export default FeedFinal
export default Feed

ryanflorence

import React, { useState, useEffect } from "react";
import "./packages/combobox/styles.css";
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption,
  ComboboxPopup
} from "./packages/combobox/index";

ryanflorence

import React, { useState, useEffect } from "react";
import "./packages/combobox/styles.css";
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption,
  ComboboxPopup
} from "./packages/combobox/index";

ryanflorence

When it comes to inputs, there are two types of them, "uncontrolled" and "controlled" inputs.

The inputs on the Login/Signup components were uncontrolled, that means that they owned their own state, or more specifically they own their own value.

In practical terms, an uncontrolled component is one whose value is changed exclusively by the user interacting with it.

You can still set the initial state of an uncontrolled component with defaultValue (and defaultChecked).

A controlled component is one that does not own its state, but rather its state is controlled by the component that rendered it.