(HDS-1913) update focus colour documentation and uptate changelog

CHANGELOG.md

@@ -56,6 +56,7 @@ Changes that are not related to specific components
 
 - [Hero] Note about scaling to diagonal koros examples
 - [ErrorSummary] Add documentation for Error Summary component
+- [Focus colour] Use of Focus style widths
 
 #### Changed
 

site/src/docs/foundation/design-tokens/colour/accessibility.mdx

@@ -76,7 +76,7 @@ When using grayscale tokens, be mindful of the contrast. Black tokens below `--c
 [Table 3:Grayscale contrast]|
 
 #### Focus colour
-HDS components use a custom focus colour styling instead of the default browser provided style. The default HDS focus style is accessible on light backgrounds. Since HDS does not offer dark mode, the focus style colour may require customising when using HDS components on darker backgrounds. The white focus colour is recommended if the default colour does not meet the contrast requirement. The WCAG requirement for user interface element contrast is `3 : 1`.
+HDS components use a custom focus colour styling instead of the default browser provided style. The default HDS focus style is 3px wide and accessible on light backgrounds. Since HDS does not offer dark mode, the focus style colour may require customising when using HDS components on darker backgrounds. The white focus colour is recommended if the default colour does not meet the contrast requirement. The WCAG requirement for user interface element contrast is `3 : 1`. Additionally, a lighter 2px wide focus style can be used for sub-components where space is limited and a thicker focus might take up too much room.
 
 | Colour name (en) | Background colour token | Colour contrast (WCAG) | Example |
 | ---------------- | ----------------------  | ---------------------- | ------- |