Accessibility issues

[elisa-est]

Will keep adding to this list until Sept 3rd

Components

• [x] Breadcrumbs: We need to increase the font size of breadcrumbs to 16px
• [x] Buttons: Increase button text for small buttons: Button size text is 13.94 needs to be 16px or around there.
• [x] Cards: Some horizontal scrolling on mobile for the card page and the cards overlap the menu when clicked..
• [x] Simple article link card - Not sure on mobile whether it's obvious where the link is - if I click on the rest of the card, the underline disappears, so could be missed.
• [x] Checkboxes and radios: The examples of grouped checkboxes/radios should be in a fieldset or aria group.
• [x] Links: include body-content links and separate into two groups. Links for CTAS, cards, headers etc. vs in-text links (the blue underline)
• [x] Metrics: Smallest font is 13.94 for the metric label, which is quite hard to read. This should be 16px. This may require us to revisit the design.
• [x] Modal: Increase button text for small buttons: Button size text is 13.94 needs to be 16px or around there.
• [x] Progress indicators: When selecting menu there are progress bars layering over menu options 

Patterns

• [x] Date picker: On mobile preview in chrome is fine, but when I view it on my phone it displays like this (I have an android device)
• [ x] Date picker: Colour contrast issue with arrows, one is dark on a dark background. Created a new ticket for this sub item.
• [x] Date picker: Buttons resize when selected.
• [x] Date picker: Incorrect button text. Should say 'Select' not 'OK'
• [x] Filters: The blue needs extra space beyond the text and the arrow. There is a separate ticket for this as well https://github.com/Energy-Saving-Trust/Design-System/issues/54
• [x] Filters: Can't open categories using only a keyboard. It skips past them. If the category is open it skips past to the checkboxes underneath
• [x] Filters: As part of typography update need to change font size for tags to 16px. This should be resolved by Karol's edits but still adding it to the list.
• [x] Footer: Again related to us updating our smallest font size to 16px. Font size for terms and conditions is too small, we need to increase it to 16px.
• [x] Hero: Right now the Hero doesn't appear to resize on Mobile. It needs to resize gracefully similar to what we have on the current corporate site.
• [x] Log in / Signup: Unsure if the "log in" text has a large enough click able area. What are some ways we could address this outside of making the CTA text longer?
• [x] Pagination: Doesn't gracefully wrap on mobile
• [x] Pagination: We need the example of how pagination looks with more numbers to double check it follows this pattern.
• [x] Search: Mobile view, the small search input resizes to be too small. It should just not resize beyond a certain point, instead at a mobile breakpoint the position should change and it would ideally go full width.
• [x] Search: On mobile the search boxes need to resize gracefully. We need to find a way to address this. See how Scot Gov't handle this problem (https://designsystem.gov.scot/components/site-search)

Other issues (not specifically accessibility related):

• [x] Hover state for the black button still looks washed out to me and not as obvious as the white button's hover state. But focus state is good. 
• [x] Filters: We are use the blue or black elsewhere but here we have grey, that is inconsistent.
• [x] Filters: Tags place the "x" under the text

[elisa-est]

Apologies for the massive screenshots, I'm not sure how to resize them, but I'll try to fix that for future issues.

[elisa-est]

We have decided to make the entire card clickable for this to improve usability. Before just the title was clickable.

[elisa-est]

Closing this as all except one of the date picker issues were resolved. I moved the oustanding date picker item to a new issue so we can close this issue.