A library of reusable components, patterns, and examples that embrace modern product design practices. Additionally, a collection of in-house standards, guidelines, and principles for creating inclusive, user-friendly, and effective products and services.
One of our key stakeholders from the dev team, Matt Alexander, has provided the following feedback address.
I have listed all of his comments here, and where we have already addressed an issue I will check it off. Otherwise consider it an item to-do.
Matt is available to provide more guidance or answer questions about any of these if needed.
[x] The header appears to have a vertical scroll bar for some reason (tested in Chrome & Edge).
[x] It would be nice to fix the footer to the bottom of the page when the page depth won’t naturally force it to the bottom.
[x] The site should incorporate the EST favicon so that the browser tabs are branded.
[x] On the typography page, it would be good to link to the Google Fonts/Adobe resources for downloading Poppins.
[x] The 3rd page of the test has an example of a model which doesn’t take focus when it is opened so we need to check the accessibility of that. It would also be worth checking to see if opened modals are announced to the screen reader to let the user know that something has appeared and now has focus.
[x] Not all blocked buttons render correctly on mobile
[x] Back buttons don’t render correctly on mobile at the top, and at the bottom on some pages
[x] After completing the ALS pages and click Next, the Next Task button doesn’t work.
[x] Look like we need some left and right padding on the hover over style for group headers (e.g. Category):
[x] Clicking Next on the filter demo doesn’t go anywhere.
[x] There are various example of HTML elements with inline styles applied, such as the width set on the anchor. All CSS rules should be in the SASS and compiled to the CSS sheet. See also the progress bar component.
[x] The Table component doesn’t demonstrate a footer row.
[x] Where componnts rely on icons, these are often added as raw SVG/path data. We’d ideally need icons to be managed using a standard method using a font library (e.g. FontAwesome etc)
[x] Date pickers are currently a standard textbox with a placeholder. These should be an input with a type of “date” to ensure they are identified as such by the browser (especially on mobile). It also appears a custom element has been developed to provide a calendar popup, which won’t work all that well on mobile.
One of our key stakeholders from the dev team, Matt Alexander, has provided the following feedback address. I have listed all of his comments here, and where we have already addressed an issue I will check it off. Otherwise consider it an item to-do.
Matt is available to provide more guidance or answer questions about any of these if needed.
[x] The header appears to have a vertical scroll bar for some reason (tested in Chrome & Edge).
[x] It would be nice to fix the footer to the bottom of the page when the page depth won’t naturally force it to the bottom.
[x] The site should incorporate the EST favicon so that the browser tabs are branded.
[x] On the typography page, it would be good to link to the Google Fonts/Adobe resources for downloading Poppins.
[x] The 3rd page of the test has an example of a model which doesn’t take focus when it is opened so we need to check the accessibility of that. It would also be worth checking to see if opened modals are announced to the screen reader to let the user know that something has appeared and now has focus.
[x] Not all blocked buttons render correctly on mobile
[x] Back buttons don’t render correctly on mobile at the top, and at the bottom on some pages
[x] After completing the ALS pages and click Next, the Next Task button doesn’t work.
[x] Look like we need some left and right padding on the hover over style for group headers (e.g. Category):
[x] Clicking Next on the filter demo doesn’t go anywhere.
[x] There are various example of HTML elements with inline styles applied, such as the width set on the anchor. All CSS rules should be in the SASS and compiled to the CSS sheet. See also the progress bar component.
[x] The Table component doesn’t demonstrate a footer row.
[x] Where componnts rely on icons, these are often added as raw SVG/path data. We’d ideally need icons to be managed using a standard method using a font library (e.g. FontAwesome etc)
[x] Date pickers are currently a standard textbox with a placeholder. These should be an input with a type of “date” to ensure they are identified as such by the browser (especially on mobile). It also appears a custom element has been developed to provide a calendar popup, which won’t work all that well on mobile.
- HTML: HyperText Markup Language | MDN (mozilla.org)
[x] Under Patterns > Filter, the remove filter “x” icon doesn’t work.
[x] Footer – the Design System should probably use the same footer that it demonstrates here: https://design-system-test-preview.pages.dev/patterns/footer
[x] Login example doesn’t include a “Forgotten password?” link