* Removed all govuk css
* Updated reference files
* Removing govuk js
* Fixed casing for modules, removed unused page
* Got more reference images
* Updated template page
* Removed govuk padding util
* Updated hint to uswds hint
* More govuk cleanup
* Commiting backstopjs ref files
* Fixed all unit tests that broke due to brittleness around govuk styling
* Added new ref images
* Final removal of govuk
* Officially removed all govuk references
* Updated reference file
* Updated link to button
* UI modernization
* Cleanup
* removed govuk escaping tests since they are no longer needed
* Fix CodeQL security issue in escapeElementName function
- Escape backslashes first before other special characters
- Prevents potential double-escaping vulnerability
- Addresses CodeQL alert about improper string escaping
* Found more govuk removal. Fixed unit tests
* Add missing pipeline check to pre-commit
* updated test
* Updated e2e test
* More update to e2e test
* Fixed another e2e test
* Simple PR comments addressed
* More updates
* Updated backstop ref files
* Refactored folder selection for non-admins
* Updated redundant line
* Updated tests to include correct mocks
* Added more ref files
* Addressing carlos comments
* Addressing Carlo comments, cleanup of window initing
* More cleanup and addressing carlo comments
* Fixing a11 scan
* Fixed a few issues with javascript
* Fixed for pr
* Fixing e2e tests
* Tweaking e2e test
* Added more ref files and cleaned up urls.js
* Fixed bug with creating new template
* Removed brittle test - addressed code ql comment
* e2e race condition fix
* More e2e test fixes
* Updated e2e tests to not wait for text sent
* Updated test to not wait for button click response
* Made tear down more resilent if staging is down
* reverted e2e test to what was working before main merge
* Updated backstopRef images
* Updated gulp to include job-polling differently
The fullscreenTable component has 2 layers to the
table you see onscreen:
1. the actual data table
2. a clone, with only the first column showing,
that sits on top so the row numbers stay in
place while you scroll
Table 1. has an id attribute on its caption. The
region wrapping it has an aria-describedby
attribute with the id as its value. This makes the
caption the description for the region.
This isn't needed for the clone and
makes the HTML invalid because ids should be
unique.
This removes the id from the cloned table.
The current method reports `0` in Safari, whatever
the scroll position.
Some testing across our browser matrix shows:
1. this is also the case on IOS
2. browsers in the matrix all support
`$(window).scrollTop()`
https://scroll-position-test-page.glitch.me/#results
This changes the method to use
`$(window).scrollTop()` instead.
This module creates a clone of the existing table
as an extra layer which sits on top of it.
This allows the row headers to sit above the table
content when it scrolls.
We were setting `role=presentation` on the extra
table to hide it from assistive technologies.
It seems that this wasn't working. From the spec'
`role-presentation` should remove the semantics of
the table but leave the content.
Testing in Safari, with the OSX Accessibility
Inspector, this isn't happening and the table is
still being reported as a table by the
accessibility API.
This changes to the `aria-hidden` attribute, to
make sure the extra table is ignored.
This replicates how we let large spreadsheets scroll horizontally.
Pro: this looks nicer and is more usable
Con: the code for this feels a bit fragile, especially the calling of
`.maintainWidth` twice, ie as many times as a it takes to get stuff to
render properly.
It’s noticeable when clicking from row to row in the spreadsheet that
the page jumps around a fair bit on load because there are a couple of
Javascript-powered components.
This commit makes sure:
- the radio select component doesn’t change height when rendering for
the first time
- the scrollable table doesn’t show parts of the table that should be
hidden by overflow for a fraction of second before all the JS has
run
- the right-hand shadow on horizontally scrollable tables doesn’t fade
in on initial page load but shows at 100% opacity immediately
We weren’t calculating the height quite right; we were trying to
compensate for something that should have been compensated for in the
`stick-at-top-when-scrolling` code.
Add the 5px to the shim there is required because we’re adding it to the
element that the shim in replacing.
There were three problems with showing tables fullscreen:
- it was over-optimised for very big spreadsheets, whereas most users
will only have a few columns in their files
- it was jarring to go from full screen and back to the normal layout
- it was a bit change for existing users, where we prefer incremental
changes that make things better without disrupting people’s work
(where possible)
So this commit changes the big table to scroll horizontally in the page,
not take up the full width of the page.
From the fullscreen table it keeps:
- the shimming method to keep the horizontal scrollbar at the bottom of
the screen at all times
It introduces some more refinements to make it nicer to use:
- fixing the first column, so you always know what row you’re on
- adding shadows indicate where there is content that’s scrolled outside
the edges of the container
Two bits of context:
1. As we start dealing with letters, which have more columns, it’s more
likely that people’s spreadsheets won’t fit in our current layout.
2. We already removed the view of the template from the page that shows
row-level errors (eg bad phone number or missing personalisation) in
spreadsheets because you don’t need to know about the content of the
message in order to fix the errors.
This commit goes further by removing anything that isn’t to do with
the errors, including the normal GOV.UK header and the service’s
navigation.
This means the content can go the width of the page, which means it can
be allowed to scroll horizontally without being a usability car
crash. Which means that the layout doesn’t break with a spreadsheet that
has lots of columns.
