nrkno / core-components Goto Github PK

View Code? Open in Web Editor NEW

115.0 85.0 10.0 3.35 MB

Accessible and lightweight Javascript components

Home Page: https://static.nrk.no/core-components/latest/

License: MIT License

JavaScript 41.18% HTML 3.29% TypeScript 55.53%

accessibility javascript lightweight tabs dialog scroll dropdown accordion vanilla-js react

core-components's Introduction

@nrk/core-components

Arkivert

NRK har stoppet aktiv forvaltning og videreutvikling av Core-components. Eventuelle issues og pull-requests vil ikke bli besvart.

Vi anbefaler å undersøke om for eksempel u-elements kan benyttes som erstatning.

Archived

NRK is no longer actively maintaining and developing Core-components. New issues or pull-requests will not be considered.

We recommend looking into u-elements as a possible replacement.

A kit of lightweight, unstyled and accessible Javascript and React / Preact components. It provides effortless and flexible usage, while under the hood enhancing markup and functionality for best best user experience across all major browsers and screen readers.

Documentation

https://static.nrk.no/core-components/latest/

Local development

First clone @nrk/core-components and install its dependencies:

git clone [email protected]:nrkno/core-components.git
cd core-components
npm install # Installs dependencies for all packages
npm start # Your browser will open documentation with hot reloading

Testing with Playwright

Tests in this project are written using Playwright and are executed against major browser engines including Chromium, WebKit, and Firefox.

Local Testing

To run tests from the command line, use the following npm command:

npm run test

You can enhance your testing experience in VSCode by using the Playwright Test for VSCode plugin.

Testing in GitHub Actions

The GitHub Actions workflow has been configured to automatically execute Playwright tests in response to changes being pushed to the master branch, as well as when code is pushed upstream to pull requests.

Additionally, it generates test reports and summaries, which are made available as artifacts for the purpose of reviewing and analyzing the test results. Artifacts have a retention period of 30 days.

Building and committing

After having applied changes, remember to build before pushing the changes upstream.

git checkout -b feature/my-changes
# update the source code
npm run build
git commit -am "<prefix>: Add my changes"
git push --set-upstream origin feature/my-changes
# then make PR to the master branch,
# and assign a developer to review your code

Publishing

npm run publish:minor -- --core-input --core-toggle # Specify packages to publish

NOTE! Please also make sure to keep commits small and clean (that the commit message actually refers to the updated files). Stylistically, make sure the commit message is Capitalized and starts with a verb in the present tense (for example Add minification support).

core-components's People

Contributors

Stargazers

Watchers

Forkers

realmunk piofinn alexanbj gitthaisen bogdancerovac smolandian sindrebilden tolu celsiusss aliasimkazmi

core-components's Issues

core:Tabs e.preventDefault() not working in IE

e.preventDefault is not working in IE on Windows to prevent tabToggle. Works in Opera and Chrome on Mac and Windows.

Also tried variants of the following code without any luck (From this thread https://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie):
e.preventDefault ? e.preventDefault() : (event.returnValue = false)

Is this missing functionality in core:tabs, or is this a general issue?

core-input: rename "advanced examples" to clarify ajax feature

By now the documentation for core-input only states "Advanced examples", but in here lies a lot of nice examples; for lazy, ajax and dynamic results. These should be added as menu items in the sidebar

Core Tabs: nullpointer exception

https://github.com/nrkno/core-components/blob/master/packages/core-tabs/core-tabs.js#L53

nextElementSibling can be undefined when using it with the aria-controls feature

Component Request: core-maps?

core-tabs: use tabindex on active tabpanels

WAI-ARIA 1.1 specifies that we should use tabindex=0 on active tabpanels

core-scroll enhancements

instantly trigger onChange on startup to ensure correct state is set in JSX
Also potentially make first element child the scrollable area?
scrollbars
resize-event
friction prop

core-toggle.jsx sets hidden on all siblings

core-toggle.jsx sets the hidden property on all siblings of button and not just next element sibling. core-toggle.js behaves as intended (/ described on the documentation page).

core-dialog: click on backdrop should not close

Depending on the needs of the user, the click on backdrop should not necessarily close the dialog. I think there should be an option passed to the dialog determining whether clicks on backdrop should trigger close or not. The default behavior can be close.

core-tabs with core-scroll

På https://tv.nrk.no/serie/dyrevenn/sesong/5 bruker jeg begge i sesong-velgeren. Når jeg drar for scroll og slipper musa over en fane registreres ett klikk-event og jeg navigerer til den. Jeg burde ikke navigere hvis klikket var for å dra sesong-velgeren.

Eventen er event.defaultPrevented === true men jeg klarer ikke finne ut om det var prevented pga core-scroll eller core-tabs.

Fanene er lenker for å gjøre de crawlable for søkemotorer.
De blir alltid event.preventDefault():
https://github.com/nrkno/core-components/blob/master/packages/core-tabs/core-tabs.js#L28

Jeg tror også core-scroll gjør en event.preventDefault():
https://github.com/nrkno/core-components/blob/master/packages/core-scroll/core-scroll.js#L115

Hvordan kan jeg best bruke disse i kombinasjon?
Jeg tenker at event.preventDefault i core-tabs ikke burde skje. Om jeg kan konfig-styre det eller om oppførselen fjernes totalt har jeg ikke så mange meninger om :)

core-tabs: Simplify panel creation in React

Maybe provide a Tabs.Panel components where tabCount="6" takes care of creating sibling tabs, and children becomes children of active panel

core-toggle: should not toggle if event.preventDefault is called in click event

core-scroll: Document css-scroll-snap

https://developers.google.com/web/updates/2018/07/css-scroll-snap is supported by some browsers already, and we should documenting how to use it and considering it as part of #66

More info: https://css-tricks.com/practical-css-scroll-snapping/

Provide toggle.transitionEnd in coreToggle

Should run on transitionEnd event to ensure animations are complete and for instance .focus() can be run without issues

Add more tests

Make buttons type "button" by default to allow use inside forms

Add PropTypes on JSX components

core-tabs: tab order on tabs in tablist

We do not have consistent behavior when tabbing on tabs. Tabbing usually results into focus being placed to an element outside of the tabslist, however if focus is on a tab placed before a tab that is a selected, tabbing will result into focus being placed on the tab. This is not the issue when focus is on a tab placed after a selected tab.

Either tabbing on tabs should always result into tabbing to the selected tab, or (more preferably) tabbing should always cause focus to be placed outside of the tabslist.

Simplifications

Use Element.closest instead of for(let el...) (and polyfill if needed)
Make a attr() function to reduce setAttribute and removeAttribute
Concept: Keyboard-shortcut-center?
Concept: List looper?
Timeout-before-focus
Find controller from target (for instance; find input from list in core-input)
Find target from controller (for instance; find list from input in core-input)

core-scroll: Ability to hijack click on arrows for custom end position

Component Request: datepicker

Add CI

npm test on master is currently broken. Travis or similar is awesome to avoid this state. 😄

Only hijack home and end keys in core-input when in list

home and end is used in windows for jumping in text selection. core-input should only hijack these if focus is inside content and not in <input>

core-input: bug in ajax exmaple jsx

core-tabs: ability to specify target

If DOM structure can not allow direct children of next sibling to be tab-panels, allow a option {target: Selector|Element|Elements}

Component Request: tabs

core-scroll: prevent click after drag always

Build output for @nrk/core-component-x main & module points to wrong entrypoints

There is a bug when installing e.g. @nrk/core-dialog from the package.json we see they point to following files:

"main": "core-dialog.cjs.js",
"module": "core-dialog.esm.js",

From the installed node_modules/@nrk/core-dialog/package.json file.
But the files do not exist.

Component Request: core-scroll

core-dialog needs to prioritize autofocus

According to w3c when a dialog opens it should prioritize elements with the autofocus attribute first.

Component Request: dialog

document core-scroll & core-datepicker

core-input: set 'X-Requested-With: XMLHttpRequest'

Most major JS frameworks sets xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); to indicate that the request was sent by ajax. Let's do the same.
https://en.wikipedia.org/wiki/List_of_HTTP_header_fields#Requested-With

Should ESC on core-toggle close?

Expose commonjs without sourcemap not umd

...but also export as UMD when publishing to static.nrk.no

core-scroll: jumps back when dragging scrollbar (js+jsx)

Core Tabs: Unable to focus tabs (with tab key) in Safari 11 on High Sierra

Other safari versions also seem to be unable to focus tabs.

tested on example page with browserstack.

core-input: default to inject result after input.ajax event?

The input.ajax does only provide a hook today, but has no default action. Maybe injecting content should be a nice default? Kind of bad when thinking about security though..

core-scroll: hiding scrollbars osx with touchpad/magic mouse

Hvordan kan jeg skjule denne scroll baren her:

Hvis pekeren er over scroll baren når jeg scroller får jeg dette:

"Installation" on every component readme.md

Today "installation" is only displayed on core-components front page, making it hard to read readme.md from for example NPM :)

min/max date core-datepicker

Destroy method no longer works

Kaleido produces an error when trying running destroy (kaleido.editor(el, false))
Reported by @erlingj

core-input: option to not show all items on focus

Require a minimum amount of characters?

core-input: new option showAllWhenEmpty: true | false

When input is empty, core-input always shows all results now. Maybe there should be a "minLength" or showAllWhenEmtpy or similar option?

Potentially check out if Lerna is nice to have for multiple packages in one repo
See babel repo
Enables us to have different version of components simultaniously

Core:tabs - Prop open wont work

After upgrading to latest version of core:tabs, the open prop wont work.

Nothing happens when you change the prop, or when you change the default prop value from 0 to ex 1

core-dialog - getTopLevelDialog() needs to consider nested dialogs

getTopLevelDialog() needs to consider nested dialogs. E.g. if the parent dialog has a higher Z-index than the child and both are open, the child should still be considered on top.