UNPKG

@postenbring/hedwig-react

Version:

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

1 lines 3.08 kB
{"version":3,"sources":["../src/form/error-summary/focus.ts"],"sourcesContent":["/**\n * Focus a form field while showing the associated legend or label in the viewport.\n *\n * Gives the user a better context of what field they are focusing on.\n *\n * Copied from https://github.com/alphagov/govuk-frontend/blob/cbf4ef1e329711be5b78a92bda6ba84a7db9ca40/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs#L60-L108\n */\nexport function focusWithLegendOrLabelInViewport(id: string) {\n const input = document.getElementById(id);\n if (!input) {\n return false;\n }\n\n const legendOrLabel = maybeLegendForInput(input) ?? labelForInput(input);\n if (!legendOrLabel) {\n return false;\n }\n\n legendOrLabel.scrollIntoView();\n input.focus({ preventScroll: true });\n\n return true;\n}\n\nfunction maybeLegendForInput(input: HTMLElement) {\n const fieldset = input.closest(\"fieldset\");\n if (!fieldset) {\n return null;\n }\n\n const legend = fieldset.querySelector(\"legend\");\n if (!legend) {\n return null;\n }\n\n // If the input type is radio or checkbox, always use the legend if\n // there is one.\n if (input instanceof HTMLInputElement && (input.type === \"checkbox\" || input.type === \"radio\")) {\n return legend;\n }\n\n // For other input types, only scroll to the fieldset’s legend (instead\n // of the label associated with the input) if the input would end up in\n // the top half of the screen.\n //\n // This should avoid situations where the input either ends up off the\n // screen, or obscured by a software keyboard.\n const legendTop = legend.getBoundingClientRect().top;\n const inputRect = input.getBoundingClientRect();\n\n // If the browser doesn't support Element.getBoundingClientRect().height\n // or window.innerHeight (like IE8), bail and just link to the label.\n if (inputRect.height && window.innerHeight) {\n const inputBottom = inputRect.top + inputRect.height;\n\n if (inputBottom - legendTop < window.innerHeight / 2) {\n return legend;\n }\n }\n}\n\nfunction labelForInput(input: HTMLElement) {\n return (\n document.querySelector(`label[for='${input.getAttribute(\"id\")}']`) ?? input.closest(\"label\")\n );\n}\n"],"mappings":";AAOO,SAAS,iCAAiC,IAAY;AAP7D;AAQE,QAAM,QAAQ,SAAS,eAAe,EAAE;AACxC,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,iBAAgB,yBAAoB,KAAK,MAAzB,YAA8B,cAAc,KAAK;AACvE,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,gBAAc,eAAe;AAC7B,QAAM,MAAM,EAAE,eAAe,KAAK,CAAC;AAEnC,SAAO;AACT;AAEA,SAAS,oBAAoB,OAAoB;AAC/C,QAAM,WAAW,MAAM,QAAQ,UAAU;AACzC,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AAIA,MAAI,iBAAiB,qBAAqB,MAAM,SAAS,cAAc,MAAM,SAAS,UAAU;AAC9F,WAAO;AAAA,EACT;AAQA,QAAM,YAAY,OAAO,sBAAsB,EAAE;AACjD,QAAM,YAAY,MAAM,sBAAsB;AAI9C,MAAI,UAAU,UAAU,OAAO,aAAa;AAC1C,UAAM,cAAc,UAAU,MAAM,UAAU;AAE9C,QAAI,cAAc,YAAY,OAAO,cAAc,GAAG;AACpD,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,SAAS,cAAc,OAAoB;AA7D3C;AA8DE,UACE,cAAS,cAAc,cAAc,MAAM,aAAa,IAAI,CAAC,IAAI,MAAjE,YAAsE,MAAM,QAAQ,OAAO;AAE/F;","names":[]}