# data[].attributes.body
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).

# data[].attributes.body
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).

# data[].attributes.body
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.)

# data[].attributes.body
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.

# data[].attributes.body
Start writing away here...

# data[].attributes.headline
Scrollable code boxes, are these similar to maps?

# data[].attributes.subject
Scrollable code boxes, are these similar to maps?

# data[].attributes.body
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?

# data[].attributes.body
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.

# data[].attributes.body
Start writing away here...

# data[].attributes.body
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.

# data[].attributes.body
- 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

# data[].attributes.body
Start writing away here...

# data[].attributes.body
Start writing away here...

# data[].attributes.body
Start writing away here...

# data[].attributes.body
Start writing away here...

# data[].attributes.body
Avoid excessive amounts of yellow. Use border rather than background styling if necessary

# data[].attributes.body
- 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.

# data[].attributes.headline
Group 1: Charlotte, Ollie, Sara, Calvin, Trang

# data[].attributes.subject
Group 1: Charlotte, Ollie, Sara, Calvin, Trang

# data[].attributes.body
- Web Content Accessibility Guidelines (WCAG) new focus state draft
-

# data[].attributes.body
Q: Does the focus state need to contrast sufficiently with the non-focus state, or just with its surrounding context?

# data[].attributes.body
- 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?

# data[].attributes.body
Start writing away here...

# data[].attributes.body
Could a focus style tell the difference between a visited or non visited link?

# data[].attributes.body
Things to prompt discussion:
- Could a style work across different backgrounds?

# data[].attributes.body
Things to prompt discussion:
- Do components in this category need a focus style?

# data[].attributes.body
Things to prompt discussion:
- Images tend to be part of wider focusable shapes that include text

# data[].attributes.headline
Form focus styles (we have guidance on this)

# data[].attributes.subject
Form focus styles (we have guidance on this)

# data[].attributes.body
Things to prompt discussion:
- Does the focus state work for all input types including, checkboxes, radios, selects/dropdowns?

# data[].attributes.headline
2nd Exercise (35 mins, roughly 5 mins per grouping)

# data[].attributes.subject
2nd Exercise (35 mins, roughly 5 mins per grouping)

# data[].attributes.body
Start to discuss what principles/ pieces of guidance/ rules you think as a group would make a focus for this group clearer?

# data[].attributes.body
Individually check whether you agree with the groups of focus state style below. Are there any missing? Are there any that can be combined?

# data[].attributes.body
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?

# data[].attributes.headline
Presentation on how focus states are currently being styled

# data[].attributes.subject
Presentation on how focus states are currently being styled

# data[].attributes.body
https://docs.google.com/presentation/d/1kXxnh47Jqw6ZcNzyyTewR_JPwCHyreTMdBGNvE1huWo/edit#slide=id.gde688896da_0_79

# data[].attributes.body
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?

# data[].attributes.headline
Link focus styles (we have guidance on this)

# data[].attributes.subject
Link focus styles (we have guidance on this)

# data[].attributes.body
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?