Welcome to the proof-of-concept HTML for the new Drupal Olivero theme! The intention of this webpage is to validate the user interactions, design, architecture, accessibility, and technology that will be used to create the theme.
About this proof-of-concept
This proof of concept was created in static HTML. The repository is hosted on GitHub, and the webpage is hosted on Netlify.
We created this proof-of-concept to validate the look and feel of the scrolling interactions, and moved on to work to make the nav-bar accessible. This includes ensuring that the menu items are exposed to the accessibility tree, and activating the nav-bar when it gains focus (this is done through the focusin event listener).
Commitment to accessibility
To add this theme to Drupal core, we must meet Drupal’s stringent accessibility standards which stipulate compliance with Web Content Accessibility Guidelines (WCAG) 2.0 AA.
Throughout the design process, we have been designing with accessibility in mind. We have been continuously testing the design against contrast requirements, and adjusting the design based on this.
Expanding / collapsing HTML elements within the theme will be either properly removed / added from the accessibility tree, or will become visible when they gain focus. Elements will be styled against the appropriate ARIA attributes to ensure that it becomes immediately apparent when the toggling of attributes is not working correctly.
Browser support
Because this theme is intended to go into Drupal core, we need to support all browsers that core does.
Currently this browser is tested and working on the following:
- Chrome
- Firefox
- Safari
- Mobile Safari
- Internet Explorer 11 (some bugs present!)
We have not yet tested this on the following:
- Edge
- UC browser
- Opera
- Opera Mini
- Samsung
Progressive enhancement
We make use of several modern front-end web development technologies including CSS Grid, and Intersection Observer.
Internet Explorer does have CSS Grid support, but the syntax is old and invalid. Fortunately, the Autoprefixer plugin will automatically add this support. We can do this because Drupal core can now use PostCSS (huge thanks to the Claro team for getting this in)!
Internet Explorer also does not support the new Intersection Observer API. To work around this, we check to ensure that the API exists before invoking it. This ensures that the menus are fully accessible, and do not generate console errors — but the fancy scroll interactions will not be available to IE11 users.
You get a table, and You get a table
If you need to show off some columnar stuff with rows, Drupal 9’s core theme is ready to help. Your data will be beautifully represented for all your readers.
| Column Header 1 | Column Header 2 | Column Header 3 |
|---|---|---|
| Shiver me timbers holystone | No prey, no pay hulk weigh | Spike grog blossom |
| Killick lad code of conduct swing the lead fire. Shiver me timbers holystone. | Shiver me timbers holystone | No prey, no pay hulk weigh |
| Killick lad code of conduct swing the lead fire. | Shiver me timbers holystone | No prey, no pay hulk weigh |
You want more tables? We have more for you!
If you need to show off some columnar stuff with rows, Drupal 9’s core theme is ready to help. Your data will be beautifully represented for all your readers.
| Column Header 1 | Column Header 2 | Column Header 3 | Column Header 4 | Column Header 5 | Column Header 6 | Column Header 7 |
|---|---|---|---|---|---|---|
| Delectus, doloremque deserunt saepe incidunt, molestias excepturi neque distinctio quos deleniti cum maxime doloribus in dolor exercitationem autem voluptatem quo vero aliquid quia. | Dicta dolores nisi tenetur eos non. Hic recusandae repellendus provident sequi vel necessitatibus, quidem autem unde consectetur quas illo possimus cupiditate veniam commodi. Quo ut amet, nisi reprehenderit asperiores vel! | Incidunt sint eos perferendis rerum officiis reiciendis veritatis deleniti nisi et reprehenderit. Expedita, exercitationem! Animi temporibus laudantium sed dolorem. | Delectus, doloremque deserunt saepe incidunt, molestias excepturi neque distinctio quos deleniti cum maxime doloribus in dolor exercitationem autem voluptatem quo vero aliquid quia. | Dicta dolores nisi tenetur eos non. Hic recusandae repellendus provident sequi vel necessitatibus, quidem autem unde consectetur quas illo possimus cupiditate veniam commodi. Quo ut amet, nisi reprehenderit asperiores vel! | Incidunt sint eos perferendis rerum officiis reiciendis veritatis deleniti nisi et reprehenderit. Expedita, exercitationem! Animi temporibus laudantium sed dolorem. | Killick lad code of conduct swing the lead fire. |
| Delectus, doloremque deserunt saepe incidunt, molestias excepturi neque distinctio quos deleniti cum maxime doloribus in dolor exercitationem autem voluptatem quo vero aliquid quia. | Dicta dolores nisi tenetur eos non. Hic recusandae repellendus provident sequi vel necessitatibus, quidem autem unde consectetur quas illo possimus cupiditate veniam commodi. Quo ut amet, nisi reprehenderit asperiores vel! | Incidunt sint eos perferendis rerum officiis reiciendis veritatis deleniti nisi et reprehenderit. Expedita, exercitationem! Animi temporibus laudantium sed dolorem. | Killick lad code of conduct swing the lead fire. | Delectus, doloremque deserunt saepe incidunt, molestias excepturi neque distinctio quos deleniti cum maxime doloribus in dolor exercitationem autem voluptatem quo vero aliquid quia. | Dicta dolores nisi tenetur eos non. Hic recusandae repellendus provident sequi vel necessitatibus, quidem autem unde consectetur quas illo possimus cupiditate veniam commodi. Quo ut amet, nisi reprehenderit asperiores vel! | Incidunt sint eos perferendis rerum officiis reiciendis veritatis deleniti nisi et reprehenderit. Expedita, exercitationem! Animi temporibus laudantium sed dolorem. |
Subheadings are the best!
Delectus, doloremque deserunt saepe incidunt, molestias excepturi neque distinctio quos deleniti cum maxime doloribus in dolor exercitationem autem voluptatem quo vero aliquid quia. Enim quidem earum consectetur at, sed placeat?
Nostrum magni ipsa illo quae! Dolores laborum vel sapiente doloremque perspiciatis ab provident voluptas obcaecati ullam, fuga exercitationem laboriosam ad dolor animi totam nesciunt explicabo est natus iure. Aliquid, qui?
Incidunt sint eos perferendis rerum officiis reiciendis veritatis deleniti nisi et reprehenderit. Expedita, exercitationem! Animi temporibus laudantium sed dolorem. Itaque dignissimos animi natus. Praesentium dolor culpa corporis, qui blanditiis impedit!
Dicta dolores nisi tenetur eos non. Hic recusandae repellendus provident sequi vel necessitatibus, quidem autem unde consectetur quas illo possimus cupiditate veniam commodi. Quo ut amet, nisi reprehenderit asperiores vel!
Deleniti dignissimos tempore vero doloribus laboriosam itaque sint nam, eveniet veritatis non, illo fuga ipsam quaerat dolore. Quidem consectetur expedita iste aliquam laboriosam maxime laborum sunt. Ullam veritatis accusamus quidem?
Oh, and if you thought people pay attention to subheadings, just wait till you try leveraging some sweet pull quotes!
Cum veritatis autem deserunt at ad dicta pariatur eum. Sed magni distinctio temporibus similique sapiente molestias accusamus quidem odit, consequuntur sint laborum esse suscipit! Itaque quasi distinctio eligendi nisi. Eligendi.
Nobis voluptates dolorum explicabo nihil culpa veniam. Accusantium, fugiat possimus? Quaerat, totam? Nobis in sed minus odio, corrupti nihil quisquam veniam pariatur veritatis illum, explicabo sunt vel rerum soluta dolore.
Doloribus adipisci repellat eius soluta numquam iusto aut corrupti earum impedit error maiores quis vel, rem dignissimos dolorum sapiente nostrum optio ducimus eveniet vitae, eligendi exercitationem. Cumque ullam optio ipsum!
Sint provident, accusamus iure ut inventore numquam id fugit placeat ad ratione quae repellat obcaecati animi voluptatibus necessitatibus maxime fuga commodi dicta aperiam, sunt culpa veniam corporis alias sed. Praesentium.
Eaque dolorum ratione commodi in ipsum dolore nihil odio iste itaque. Recusandae dolorem ipsum, libero facere dolorum autem quam esse labore laboriosam atque facilis. Similique aspernatur beatae iste aut vitae.
Ducimus adipisci placeat excepturi, doloremque praesentium aspernatur laudantium nostrum minima deserunt, ab blanditiis provident? Mollitia minima sapiente eaque voluptatibus rerum dolores aut natus, labore assumenda esse cupiditate eveniet quam nulla.
Neque inventore illum illo voluptatum ipsum iste beatae nulla nemo consequatur? Accusantium aperiam fugit repellendus, blanditiis vitae earum nam eligendi ipsa labore culpa quisquam ratione, iure voluptate eius sunt veniam?
Voluptates maiores reiciendis, incidunt aut quaerat labore voluptas iure illo delectus ullam, quis assumenda dolor laudantium necessitatibus ut. Neque eum sit deleniti impedit natus dolorem quaerat, eaque veniam libero quod?
Fuga numquam laudantium sunt dolorum obcaecati cumque porro quo maiores ab. Adipisci atque modi nobis quaerat quisquam laboriosam doloremque illo consequatur impedit veniam! Accusantium, porro quod quasi vitae amet facere.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat esse libero perspiciatis, rerum quia deleniti cupiditate fuga ipsam molestiae. Quos qui officiis modi quae laborum saepe harum commodi sit?
Ipsa, perferendis, commodi repellendus libero, deleniti corrupti expedita eveniet iure fugit ducimus doloribus ipsam amet unde dolores porro ut. Dolorem enim id nulla maiores vel, hic animi ipsum! Molestias, maiores!
Perspiciatis ea molestiae minima hic veritatis ad in dignissimos harum. Odio praesentium nihil, officiis ad nulla cum iusto, et temporibus illum at sint ipsam dolorum quam autem quidem harum quis.
Consequatur fuga consectetur eveniet recusandae sequi possimus maiores. Possimus eveniet nemo excepturi fugit quam reprehenderit pariatur consequuntur, ipsum ipsam quis, dolor aut, necessitatibus praesentium blanditiis veniam ex exercitationem. Commodi, fuga?
Corrupti nobis ratione distinctio dignissimos itaque pariatur aspernatur saepe modi deleniti, voluptatem illo animi quisquam architecto? A animi tempore qui facere, nemo esse voluptate ipsum ipsa, nam quia voluptatem fugit.
Dignissimos ex porro omnis officia eius nobis rerum harum architecto ducimus quam quo sit nihil, soluta amet dolorum reiciendis nemo praesentium voluptatem placeat perspiciatis voluptatum. Nihil illo vitae sint nam!
Delectus animi maiores repellendus illo rem, eum exercitationem est ipsum dignissimos fuga, et voluptate rerum ratione eos eveniet repudiandae. Harum quos, maxime quasi consectetur eveniet sapiente officia aut corrupti commodi.
Est dolorum tenetur ratione illo incidunt culpa nesciunt earum, deleniti accusamus veritatis ut asperiores blanditiis accusantium nulla impedit, labore laborum voluptate ipsam facere dolorem quis eligendi? Veniam atque voluptate qui.
Cupiditate in, at iure veniam nemo explicabo blanditiis omnis a temporibus, dicta rem culpa? Consequatur tempora dolorem perferendis aliquid fugiat, reprehenderit, veniam assumenda quasi magnam quo labore repudiandae nobis explicabo!
Culpa iste excepturi iure, unde quibusdam, modi animi nesciunt natus repellat, cum beatae maiores earum dolor placeat tempore impedit obcaecati fugit perspiciatis dolorum. Non rerum error tempora necessitatibus dolore voluptate.