-
Notifications
You must be signed in to change notification settings - Fork 320
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
Add cookie banner component and button groups #2131
Commits on Jan 26, 2021
-
Add a new button groups object which can be used to group buttons and links together. Within a button group: - links are styled to line up visually with the buttons, including being centre-aligned on mobile - spacing between the buttons and links is handled automatically, including when they wrap across multiple lines The button group object will then be used to group the 'Accept cookies', 'Reject cookies' and 'View and set cookie preferences' buttons and links in the cookie banner component. The button group object uses flexbox and align-items to align the buttons and links along the 'cross axis' – centre-aligning on mobile and aligning rows along the baseline on tablet and above. align-items is in theory supported in IE11 and above, but our use of autoprefixer means that IE10-compatible flexbox properties are also included, and in testing it works as well in IE10 as it does in IE11. In browsers that do not support flexbox [1] or align-items [2] the spacing between buttons and links is different (as whitespace between inline blocks is not handled) and they are not aligned along the cross-axis, but the general layout is still applied. [1]: https://caniuse.com/flexbox [2]: https://caniuse.com/mdn-css_properties_align-items_flex_context
Configuration menu - View commit details
-
Copy full SHA for 4c17b6d - Browse repository at this point
Copy the full SHA 4c17b6dView commit details -
Fix links overflowing their container in IE10/11
Set max-width to fix links overflowing in IE10/11 in the mobile viewport. https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container
Configuration menu - View commit details
-
Copy full SHA for e5f50d7 - Browse repository at this point
Copy the full SHA e5f50d7View commit details -
Configuration menu - View commit details
-
Copy full SHA for b650d2d - Browse repository at this point
Copy the full SHA b650d2dView commit details
Commits on Jan 27, 2021
-
Merge pull request #2114 from alphagov/cookie-banner-button-groups
Add button groups for use in cookie banner
Configuration menu - View commit details
-
Copy full SHA for fd2c60e - Browse repository at this point
Copy the full SHA fd2c60eView commit details -
Remove redundant align-button modifiers in example
The original intent was to use a modifier on links to align them with buttons, but we ended up finding another approach that used flexbox and didn’t require the modifier. However, the classes were never removed from the example page in the review app. Remove the redundant classes as they are not doing anything and will only cause confusion.
Configuration menu - View commit details
-
Copy full SHA for 6d53d09 - Browse repository at this point
Copy the full SHA 6d53d09View commit details -
Merge pull request #2124 from alphagov/remove-accidental-classes
Remove redundant align-button modifiers in example
Configuration menu - View commit details
-
Copy full SHA for 5fc8ee6 - Browse repository at this point
Copy the full SHA 5fc8ee6View commit details
Commits on Jan 28, 2021
-
Vanita Barrett committed
Jan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 8ffeb08 - Browse repository at this point
Copy the full SHA 8ffeb08View commit details -
Add HTML for cookie banner component macro
Vanita Barrett committedJan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 8f2fe2e - Browse repository at this point
Copy the full SHA 8f2fe2eView commit details -
Add YAML examples for cookie banner
Vanita Barrett committedJan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 857e9f7 - Browse repository at this point
Copy the full SHA 857e9f7View commit details -
Add skeleton CSS files for cookie banner
Vanita Barrett committedJan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for b26f2a9 - Browse repository at this point
Copy the full SHA b26f2a9View commit details -
Vanita Barrett committed
Jan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 834be0a - Browse repository at this point
Copy the full SHA 834be0aView commit details -
Use HTML
hidden
attribute for hiding bannersVanita Barrett committedJan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 9f2b146 - Browse repository at this point
Copy the full SHA 9f2b146View commit details -
Vanita Barrett committed
Jan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 29c62c5 - Browse repository at this point
Copy the full SHA 29c62c5View commit details -
Vanita Barrett committed
Jan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 8d2ea35 - Browse repository at this point
Copy the full SHA 8d2ea35View commit details -
Vanita Barrett committed
Jan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 4de49d9 - Browse repository at this point
Copy the full SHA 4de49d9View commit details -
Rename
container
class tomessage
classVanita Barrett committedJan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for f4c2304 - Browse repository at this point
Copy the full SHA f4c2304View commit details -
Vanita Barrett committed
Jan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for f624213 - Browse repository at this point
Copy the full SHA f624213View commit details -
To make it clear that role region cannot be overridden or removed Co-authored-by: Oliver Byford <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for edd1883 - Browse repository at this point
Copy the full SHA edd1883View commit details -
Merge pull request #2119 from alphagov/cookie-banner-macro
Add Nunjucks macro template, tests and examples for cookie banner
Vanita Barrett authoredJan 28, 2021 Configuration menu - View commit details
-
Copy full SHA for 649cfb8 - Browse repository at this point
Copy the full SHA 649cfb8View commit details -
Add an example of a server-side cookie banner
The cookie banner components needs to be flexible enough to work for both server-side and client-side implementations. Add an example of a typical server-side cookie banner, where a page navigation occurs when the user chooses to accept or reject the cookies, and the choice to render either the original ‘accept/reject’ banner or the confirmation banner is made on the server. We do include a small amount of client-side JavaScript to handle the ‘Hide’ button in the example, as I think this would typically be handled client-side as nothing needs to be recorded.
Configuration menu - View commit details
-
Copy full SHA for 2e57418 - Browse repository at this point
Copy the full SHA 2e57418View commit details -
Configuration menu - View commit details
-
Copy full SHA for 5acfef6 - Browse repository at this point
Copy the full SHA 5acfef6View commit details -
Configuration menu - View commit details
-
Copy full SHA for 0e549a5 - Browse repository at this point
Copy the full SHA 0e549a5View commit details -
Configuration menu - View commit details
-
Copy full SHA for 82e51e2 - Browse repository at this point
Copy the full SHA 82e51e2View commit details -
Merge pull request #2125 from alphagov/cookie-banner-full-page-examples
Add full page examples of cookie banners
Configuration menu - View commit details
-
Copy full SHA for ed86842 - Browse repository at this point
Copy the full SHA ed86842View commit details
Commits on Feb 1, 2021
-
Add additional hidden option for parent container
Vanita Barrett committedFeb 1, 2021 Configuration menu - View commit details
-
Copy full SHA for f76cc4a - Browse repository at this point
Copy the full SHA f76cc4aView commit details -
Allow classes and attributes to be passed to cookie banner
Vanita Barrett committedFeb 1, 2021 Configuration menu - View commit details
-
Copy full SHA for 6cef872 - Browse repository at this point
Copy the full SHA 6cef872View commit details -
Vanita Barrett committed
Feb 1, 2021 Configuration menu - View commit details
-
Copy full SHA for 46febc7 - Browse repository at this point
Copy the full SHA 46febc7View commit details -
Merge pull request #2130 from alphagov/add-parent-hidden
Allow the whole cookie banner component to be hidden
Vanita Barrett authoredFeb 1, 2021 Configuration menu - View commit details
-
Copy full SHA for 0136450 - Browse repository at this point
Copy the full SHA 0136450View commit details
Commits on Feb 2, 2021
-
Vanita Barrett committed
Feb 2, 2021 Configuration menu - View commit details
-
Copy full SHA for ca6f92d - Browse repository at this point
Copy the full SHA ca6f92dView commit details -
Vanita Barrett committed
Feb 2, 2021 Configuration menu - View commit details
-
Copy full SHA for 0657fae - Browse repository at this point
Copy the full SHA 0657faeView commit details -
Make use of cookie message, message and question message consistent
We refer to 'question message' as 'cookie message' in the guidance. This commit tweaks the macro options to reflect that.
Vanita Barrett committedFeb 2, 2021 Configuration menu - View commit details
-
Copy full SHA for f72a571 - Browse repository at this point
Copy the full SHA f72a571View commit details -
Move actions section to match approved macro docs
Vanita Barrett committedFeb 2, 2021 Configuration menu - View commit details
-
Copy full SHA for 44e5421 - Browse repository at this point
Copy the full SHA 44e5421View commit details -
Merge pull request #2129 from alphagov/rename-banners-messages
Rename banners to messages
Vanita Barrett authoredFeb 2, 2021 Configuration menu - View commit details
-
Copy full SHA for 497b594 - Browse repository at this point
Copy the full SHA 497b594View commit details -
The component does not set bottom spacing. The bottom spacing should be created by the items inside the component. We're going to use the `hidden` attribute to hide sections as this will hide the content even if CSS fails to load. `display: none;` will act as a fallback for legacy browsers (IE 8-10) that don't support the `hidden` attribute. Unfortunately it looks like Lynx doesn't support `hidden` but that's a vendor implementation issue. It also appears that Lynx hasn't been in active development for some time. Using the `hidden` attribute seems like the semantically correct thing to do here and it makes the component usable when CSS fails to load. (The alternative would be to insert text into the DOM at relevant points which could also be a suitable solution in some contexts. We decided against it as the Design System components need to be really flexible so we're trying to avoid patterns where HTML markup needs to be maintained inside JavaScript which will also simplify localisation etc. where relevant.) Visually separate the cookie banner from content underneath with a transparent bottom border when user changes colours in their browser.
Configuration menu - View commit details
-
Copy full SHA for 40a1b45 - Browse repository at this point
Copy the full SHA 40a1b45View commit details -
Configuration menu - View commit details
-
Copy full SHA for d1f8057 - Browse repository at this point
Copy the full SHA d1f8057View commit details -
Remove visible focus indicator from cookie banner
when the element is programmatically focused. The focused cookie banner is the first element on the page and the last thing the user interacted with prior to it gaining focus. We therefore assume that moving focus to it is not going to surprise users, and that giving it a visible focus indicator could be more confusing than helpful, especially as the element is not normally keyboard operable. We have flagged this in the research section of the guidance as something to monitor. A related discussion: w3c/wcag#1001 It's also worth noting that this is different to what we do with the notification banner which does have a visible focus indicator. However, the notification banner is further down the page and the user might not have interacted with it prior to it gaining focus so it is helpful to indicate to users that the focus has moved to it (even though the element, like the cookie banner, isn’t normally keyboard operable).
Configuration menu - View commit details
-
Copy full SHA for f77c2f6 - Browse repository at this point
Copy the full SHA f77c2f6View commit details -
Configuration menu - View commit details
-
Copy full SHA for a57f2b2 - Browse repository at this point
Copy the full SHA a57f2b2View commit details
Commits on Feb 5, 2021
-
Tweaks to macro option documentation
- Remove duplicated ‘required’ on `messages` and `actions.text` – ‘Required’ is automatically added as a prefix to the description in the Design System when `required` is `true`, so it does not need to be included in the description as well. - Mark `messages.text`, `messages.html` as required and remove ‘Required’ from their descriptions - Mark `false` as inline code in desecription for `hidden` and `messages.hidden`
Configuration menu - View commit details
-
Copy full SHA for 8607945 - Browse repository at this point
Copy the full SHA 8607945View commit details -
Tweak description for top-level hidden option
Co-authored-by: Eoin Shaughnessy <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for 8529a49 - Browse repository at this point
Copy the full SHA 8529a49View commit details -
Tweak description for hidden param after 2i
Co-authored-by: EoinShaughnessy <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for 153cec9 - Browse repository at this point
Copy the full SHA 153cec9View commit details -
Merge pull request #2136 from alphagov/tweaks-to-macro-options
Tweaks to macro option documentation
Vanita Barrett authoredFeb 5, 2021 Configuration menu - View commit details
-
Copy full SHA for 8ba3e2b - Browse repository at this point
Copy the full SHA 8ba3e2bView commit details