Added clipped text and button polyfill issues #66
Conversation
Marat-Faizov
requested review from
adamliptrot-oc,
danielelder and
shabana-ali
Marat-Faizov
added
documentation
There was a problem hiding this comment.
Related to docs/common-issues/button-polyfill.md
I'm thinking this would be better called "Link styled as a button".
Typo interprite = interpret
Not 100% sure data-module="govuk-button" needs adding anymore if they initialise the JS script as part of GOV.UK frontend https://github.com/alphagov/govuk-frontend/blob/28ca6d5f61df309c00490f22d809bb6d7aaec7ab/src/components/button/button.js
Recently content reviewed YAML snippet for this issue:
- accessibilityProblems: On the xxx page, the xxx link has been styled as a button but does not work with the spacebar key press
- milestones: For a link styled as a button, the role="button" and the JavaScript polyfill is missing to ensure it acts like a button. This fails WCAG 2.1 success criterion 4.1.2: Name, Role, Value
|
Thank you @shabana-ali. I updated the link as a button issue per your feedback. |
docs/common-issues/clipped-text.md
Outdated
| @@ -0,0 +1,49 @@ | |||
| # Issue: Text is clipped [Draft] | |||
|
|
|||
| Long string of text not breaking to accommodate the width of the parent container. The text gets clipped. | |||
There was a problem hiding this comment.
I'd suggest this more conversational and describe other possible issues / causes
eg "Text is present which does not wrap to stay within the bounds of its parent container. This is causing the text to either extend beyond the container, causing the layout to break or scrollbars to appear, or the text is clipped by the parent container and content is lost."
There was a problem hiding this comment.
Might be worth making the distinction between this happening because of text-resize and because of poorly implemented responsive design (Reflow).
docs/common-issues/clipped-text.md
Outdated
| Most recent govuk-frontend should containe fix for this issue panel heading | ||
| https://github.com/alphagov/govuk-frontend/pull/2347. | ||
| Or apply `.text-overflow` class on element | ||
| This is create difficulties for people who rely on text to be resized without loss of the content. |
There was a problem hiding this comment.
Move this line to the issue description above. At the moment it is suggesting the fix is causing them problems.
docs/common-issues/clipped-text.md
Outdated
|
|
||
| ### Accessibility problems | ||
| ``` | ||
| - description: When entering a long string of text it does not break to fit the container it is being added to, so it will overflow. Users will have to scroll horizontally to read it. This will also be a problem if the text size is increased. Additionally, seeing it will be difficult as it imight blend in with background colour. |
There was a problem hiding this comment.
Too technical.
"When text is resized [named] text is cut off and so may not display the entire information intended."
docs/common-issues/clipped-text.md
Outdated
| ### Milestones | ||
|
|
||
| ``` | ||
| - description: Copy missing text wrapping CSS properties, what causes issues when the text font size increased. This fails WCAG 2.1 success criterion 1.4.4 Resize text |
There was a problem hiding this comment.
Not necessarily a css problem (could be design or content).
"When text is resized, content is lost."
docs/common-issues/link-as-button.md
Outdated
| @@ -0,0 +1,39 @@ | |||
| # Issue: Link styled as a button [Draft] | |||
|
|
|||
| For link styled as a button add role="button" and initialise the JavaScript polyfill to ensure it acts as a button. | |||
There was a problem hiding this comment.
What about revising it to...
For a link styled as a button, add role="button" and initialise the JavaScript polyfill to ensure it acts as a button.
- Adding ARIA
role="button"will identify the link as a button to assistive technologies. - The JavaScript polyfill makes sure that the link responds to the enter and spacebar keypress.
docs/common-issues/link-as-button.md
Outdated
| Assistive technology will interpret anchor as `button` with the ARIA role "button" and makes it clear that this is a button control and not a link. User would expect to activate element using `Enter` or `Space` key. | ||
|
|
||
| ## To resolve | ||
| Make sure element uitilising [button.js](https://github.com/alphagov/govuk-frontend/blob/28ca6d5f61df309c00490f22d809bb6d7aaec7ab/src/components/button/button.js) allowing users to activate it using `space` key. |
There was a problem hiding this comment.
Remove this as it's linked to in the guidance below
There was a problem hiding this comment.
Removed link to Using links as buttons guidance. Button js is not referenced below
|
|
||
| - wcag | ||
| - wcag 4.1.2 (A) | ||
|
|
There was a problem hiding this comment.
- button
- not sure if label should be code quality / usability / keyboard-only
docs/common-issues/link-as-button.md
Outdated
|
|
||
| ### Accessibility problems | ||
| ``` | ||
| - description: On the xxx page, the xxx link has been styled as a button but does not work with the spacebar key press |
There was a problem hiding this comment.
remove "description: "
Change to include role issue and as this was not covered in the example I gave "on the [page title] page, the [link text] link has been styled as a button, but is not seen as one with assistive technologies and does not work with the spacebar keypress"
Will need to be content reviewed at some point again.
docs/common-issues/link-as-button.md
Outdated
| ### Milestones | ||
|
|
||
| ``` | ||
| - description: For a link styled as a button, the role="button" and the JavaScript polyfill is missing to ensure it acts like a button. This fails WCAG 2.1 success criterion 4.1.2: Name, Role, Value |
There was a problem hiding this comment.
remove "description: "
3 participants
Added two issues