https://padlet.com/charlottedowns1/5apruycsoww8cmth Purpose of the session: To determine a set of guidelines for focus state styling • Things we'll learn: Where we can update the Design System en-us 2021-06-04 08:47:23 UTC 2026-01-24 08:02:30 UTC hello@padlet.com charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595461522 Things to prompt discussion:
- should all links be left-aligned?
- some examples use padding, can we provide guidance for this?
- do details and accordions still feel right to take this style?]]> 2021-06-09 11:24:56 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595461522 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595484378 Things to prompt discussion:
- does this focus style work when a button seems to sit within an input. For example, search box or password field?]]> 2021-06-09 11:41:36 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595484378 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595503072 https://docs.google.com/presentation/d/1kXxnh47Jqw6ZcNzyyTewR_JPwCHyreTMdBGNvE1huWo/edit#slide=id.gde688896da_0_79]]> 2021-06-09 11:54:39 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595503072 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595656792 Things to prompt discussion:
- How can we highlight focus on buttons/ links with a mixture of headings and paragraph text?
- Do code boxes in the Design System fit into this category?]]> 2021-06-09 13:07:15 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595656792 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595673270 Individually check whether you agree with the groups of focus state style below. Are there any missing? Are there any that can be combined?]]> 2021-06-09 13:12:43 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595673270 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595681925 Start to discuss what principles/ pieces of guidance/ rules you think as a group would make a focus for this group clearer?]]> 2021-06-09 13:15:27 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1595681925 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1598168113 Things to prompt discussion:
- Does the focus state work for all input types including, checkboxes, radios, selects/dropdowns?]]> 2021-06-10 09:45:00 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1598168113 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1599124416 Things to prompt discussion:
- Images tend to be part of wider focusable shapes that include text]]> 2021-06-10 17:00:53 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1599124416 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1600628927 Things to prompt discussion:
- Do components in this category need a focus style?]]> 2021-06-11 08:17:16 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1600628927 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1600630121 Things to prompt discussion:
- Could a style work across different backgrounds?]]> 2021-06-11 08:18:14 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1600630121 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1609689771 Could a focus style tell the difference between a visited or non visited link?]]> 2021-06-16 10:39:46 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1609689771 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1609690491 Start writing away here...]]> 2021-06-16 10:40:33 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1609690491 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610241556 - We don't have a button inside an input yet in the Design System
- Is it ok to have different padding around the button and a larger underline
- Does a focus state still need to show distinction between the primary and secondary?]]> 2021-06-16 15:25:11 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610241556 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610241963 Q: Does the focus state need to contrast sufficiently with the non-focus state, or just with its surrounding context?]]> 2021-06-16 15:25:22 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610241963 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610245243 - Web Content Accessibility Guidelines (WCAG) new focus state draft
-]]> 2021-06-16 15:26:51 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610245243 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610246949 2021-06-16 15:27:38 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610246949 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610249354 2021-06-16 15:28:43 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1610249354 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617465503 - It's ok for the clickable area to be different from the piece that indicates focus.
- Primary indicator /affordance - this thing is interactive.
- Principle: design should show relationship between the two controls when there is one control
- Document reasons why we don't ask users to make the whole thing focusable
- Radios and checkboxes highlight box but not label, could we create a relationship like this?
- Code boxes are focusable so you can scroll them, this probably a different use case.]]> 2021-06-21 11:13:05 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617465503 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617465727 Avoid excessive amounts of yellow. Use border rather than background styling if necessary]]> 2021-06-21 11:13:21 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617465727 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617466035 Start writing away here...]]> 2021-06-21 11:13:38 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617466035 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617466890 Start writing away here...]]> 2021-06-21 11:14:37 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617466890 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617467508 Start writing away here...]]> 2021-06-21 11:15:23 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617467508 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617467828 Start writing away here...]]> 2021-06-21 11:15:43 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617467828 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617563576 - Images and code block could share some principles. For example, if they were used with links.
- Some images considered decorative, some aren't
- Just highlight the text bit if you have an image and text link
- Images that open to bigger images
- Focus style just tells you were the focus state is. 
- How do you make a focus style robust enough for screen magnification]]> 2021-06-21 12:41:27 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617563576 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617563896 Large objects like images are not always fully visible on screen - make sure the focus state is perceivable from both the top and bottom of the image.]]> 2021-06-21 12:41:41 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617563896 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617564179 Start writing away here...]]> 2021-06-21 12:41:53 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617564179 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617564929 Use a combination of yellow and black, to ensure contrast with both light and dark backgrounds

Don't try to style the borders of complex shapes like logos.]]> 2021-06-21 12:42:17 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617564929 laurencedebruxelles https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617814135 2021-06-21 14:55:40 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617814135 laurencedebruxelles https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617815133 Focus states shouldn't make other elements on the page move.

Focus states always appear over other elements on the page.

Focus states always use the same shade of yellow.

Focus states should incorporate a black border to ensure they have sufficient colour contrast

If the element already has a black border, make it thicker - don't add another one?

]]> 2021-06-21 14:56:15 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617815133 laurencedebruxelles https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617815448 2021-06-21 14:56:27 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617815448 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617844940 Start writing away here...]]> 2021-06-21 15:12:30 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/1617844940 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/2656107726 Form controls, which already have a black border, visually expand the black border and add the yellow on the outside. If the field has an error, the red border is changed to black on focus.]]> 2023-08-04 13:21:31 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/2656107726 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/2656107993 Buttons, links and 'link-like' components change the background of the focused element to yellow and apply a black border to the bottom of the element. (In my mind, this is equivalent to putting the black border on the outside.)]]> 2023-08-04 13:22:09 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/2656107993 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/2656108471 The notification banner and error summary components forego having a black border completely, only using yellow to indicate the element is focused. However, we already know this does not meet the requirements for non-text contrast and seem unsure whether WCAG's intent is that this should be higher contrast (#1936).]]> 2023-08-04 13:23:12 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/2656108471 charlottedowns1 https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/2656109149 To me, the above implies that we have three distinct categories of focus style, each the master of their own little realms:

1. Interactive elements that already have a border (black inside, yellow outside).
2. Interactive elements that do not have a border (yellow inside, black outside).
3. Non-interactive elements that conditionally accept focus (yellow outside only).

]]> 2023-08-04 13:24:48 UTC https://padlet.com/charlottedowns1/5apruycsoww8cmth/wish/2656109149