otacke/h5p-info-wall

Simple information wall (e.g. for staff pages), weekend project for a friend

H5P Info Wall

Please note that you'll need some familiarity with git and npm.

Please also note that you'll still need some familiarity with how H5P works. If you have not yet had a look at our developer guide: Now is the right time :-)

Getting started

Clone this repository with git and check out the branch that you are interested in (or choose the branch first and then download the archive, but learning how to use git really makes sense).

Change to the repository directory and run

npm install

to install required modules. Afterwards, you can build the project using

npm run build

or, if you want to let everything be built continuously while you are making changes to the code, run

npm run watch

Before putting the code in production, you should always run npm run build.

The build process will transpile ES6 to earlier versions in order to improve compatibility to older browsers. If you want to use particular functions that some browsers don't support, you'll have to add a polyfill.

The build process will also move the source files into one distribution file and minify the code.

h5p-info-wall's Issues

Feature request: Invisible fields

It would be useful to be able to add fields that isn't shown to the user (but still is searchable). In this way, you could add a "search index", which typically isn't something you'd like to display to the user.

Suggestion: Change search from "or" to "and"

The search filter seems to do a "or" search when adding several words. When trying to use this content type for "real content", it would be natural that adding more words would narrow the search, instead of broadening it.

Accessibility

I have performed a quick a11y review of information wall by looking at the example here: https://h5p.org/content-types/information-wall.

• When searching/filtering, a visually impaired user will have to navigate away from the search input to figure out whether there are results or not. I believe we should communicate this somehow while doing the filtering.
• The main header is using h1. Since H5P most often is embedded on other pages, this means there will be two H1. That's not ideal for screenreaders. An H5P should start with h2 (or even better have it configurable, with h2 as default).
• For each "panel" of information, there are visual headings missing semantics. I.e, if the main title is h2, then:
  • "Strawberries" should be h3
  • "Colors" and "Top 3 vitamins" should be h4