New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Robust, customisable borders with labels #158

merged 23 commits into from May 8, 2018


1 participant

matatk commented May 8, 2018

  • Draw borders as elements on their own, including a label that gives landmark info (closes #1, fixes #47).
  • Customisable border colour.
  • Customisable border label font size.
  • The label’s font colour is automatically selected to be black or white depending on the colour of the border.

matatk added some commits Apr 27, 2018

* Forgot to bump version in package-lock.json; oops.
* npm 6 tweaks.
Borders made out of <div>s
* Make border elements so that they can be positioned on top of all
  other elements.
* Factor out landmarkName() to a separate file as it is used to provide
  a label for the border effect.
* Update the manifest and injector script in line with this new file.
* Make the functions that returned elements now return the role and
  label too (so that they can be used in the label for the border).
* Try to ignore changes to the DOM due to adding our border elements.
Sort out borders and mutations and stuff
* Take out code that ignored border mutations, as they should be ignored by the new ignoring mechanism.
* Provide a mechanism for ignoring border related mutations (ask the ElementFocuser if it just made changes).
* Rename variables for clarity.
* Reinstate the line that allowed the currently-selected landmark to be tracked across landmark updates.
* Fix moving to the main landmark.
Minor tidying
* Improve function name.
* Improve variable names and spacing.
Border removal robustness; Settings
* Cancel the timeout that removes the border if another element is
* A dictionary was not necessary for storing element borders as there is
  only one!  (There may well be more than one later, when all are added at
  once, but that is getting ahead of oneself.)
* Add an option for border colour.
* Add a 'defaults.js' file to store options.

The injection and number of support scripts is a bit big now - time to
consider rollup or similar?
* Add a setting for border label font size.
* Simplify the handling of defaults.
Label font colour option; Styling
* Add a label font colour option.
* Apply the "browser-style" class as per MDN advice
  —was missing the class on parents of <input>s).
Neaten up options layout using CSS grid
The "(pixels)" bit wraps in Chrome, but not Firefox.
Options changes handling; Build speed-up
* Add a build:all:quick script (no cleaning or testing done first).
* Fix a bug in how options changes for the logger were not handled correctly.
* Handle options changes in the focuser in the same way as in the logger.
Add test for contrast ratio
These will be used to determine the appropriate label font colour.
Contrast test; TODO
* Add tests for contrast checking.
* Add a function to work out whether the label should be black or white for a given border colour (not yet wired up).
* Add a TODO for tidying up function definition in focuser.
Remove manual border label font colour option
Instead it works it out (black or white, at least) :-).

@matatk matatk merged commit 4b2e487 into master May 8, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
continuous-integration/travis-ci/push The Travis CI build passed

@matatk matatk deleted the robust-borders branch May 8, 2018

matatk added a commit that referenced this pull request May 10, 2018

Specify unused relevant CSS; Remove data attribute
This resets various CSS properties that are not explicitly used by the
border and label elements, in case the page does set them. It also
removes a redundant data attribute that was used early on in #158 but a
better way was found to ignore the borders so it's no longer needed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment