Book DAC test and create prototype for new features added since last audit for census

[yatesn]

Features needing an accessibility audit include:

Foundations

• Links - DS and eQ
  • New hover style added so state didn't rely on colour change alone – thicker underline – is the change in thickness significant enough?
  • External link missing screen reader hidden notice (that opens in a new tab)
• Highlighting - DS only
  • Any issues with focus colour clashing with similar colour used for highlighting important information?
  • Is <em> semantically the correct tag for highlighting piped answers etc?
  • Should the font-weight of an <em> be bold or left to style as italics?

Components

• Accordions (check issues found with GDS's previous version don't also apply to our component) - DS only
  • Are the 'show/hide' buttons for each accordion item necessary?
  • Should the title and button be combined and focusable?
  • Does title link style cause issues with expectation of behaviour (are they mistaken for links to a new page)? Is the link style required to indicate it needs to be interacted with and it not a heading?
  • Should we use <details>/<summary> elements instead? Any issue with multiples on same page?
  • See and compare versions:
    • current implementation (link style + separate button)
    • refactored implementation in Collapsible - use details element and update functionality design-system#2013 (<details> used, underline and button removed)
    • simple accordion (new variant, needs auditing)
• Buttons - DS and eQ
  • Do links (<a>) styled as buttons with role="button" cause issues?
  • New print and download buttons - eQ only
• Card – DS
  • Are aria attributes required on the wrapping div (it's not an interactive element)?
• Checkboxes/radios - DS and eQ
  • Conditionally revealed inputs (known issues with GDS component)
    • Issues caused by aria-expanded not always announcing when input shown/hidden
    • Confusion over use of component if the revealed content is too complex
    • with conditionally revealed text input
    • with conditionally revealed select
    • with conditionally revealed checkboxes
    • with conditionally revealed radios
  • "Select all" button
• Collapsible - DS and eQ
  • (See issues raised in 'Accordions')
• Document list (new component, needs auditing) - DS only
• Input - DS
  • Character limit checker (new variant, needs auditing)
• Header - *DS
  • Multi-level navigation
• Mutually exclusive - DS and eQ
  • When the mutually exclusive checkbox is selected, on focus of one of the options above, should we announce that selecting it will uncheck the mutually exclusive checkbox?
  • Or are all the "unselected" announcements overkill, considering the label for the mutually exclusive checkbox implies that any previously selected option won't apply?
• Panel - DS and eQ
  • New visually-hidden prefix
  • Warning panel with timeout (new variant, needs auditing)
• Search - DS only
  • with placeholder
  • with character check
• Section navigation - DS only
  • Vertical (new variant, needs auditing)
• Select - DS only
  • with inline label (new variant, needs auditing)
• Share page - DS only
  • new component, needs auditing
• Table of contents - DS only
  • skip over table of contents link (new enhancement, needs validating)
  • In-page navigation](https://ons-design-system.netlify.app/components/table-of-contents/examples/table-of-contents-sticky/) (new variant, needs auditing)
    • Does this variant also need a skip link? The assumption is not, due to it not persisting on other pages.
• Tabs - DS only
  • Any issues with use of the ARIA tablist role (as mentioned here)?
  • Should the tabpanel be part of the tab order?
  • Should each tab be tabble?
• Table - DS only
  • Sortable table header cells are s <button> styled as a link – does this cause issues?
• Textarea - DS and eQ
  • with character counter
    • The aria-describedby references the character limit instead of the hint text (like other inputs) – how should this be handled?
    • Voiceover for iOS interrupts the character counter after entering characters

Patterns

• Dates and Durations - DS only
  • Fieldset of inputs with suffixed labels - the autofill "candidate list" announcement interrupts the reading of the suffix labels on iOS Voiceover
• Numeric values - DS only
  • Inputs with prefixed/suffixed units and hint text
    • On Voiceover for iOS, the hint text appears to interrupt the announcement of units provided by the title attribute as it reads the aria-describedby by instead.
• Errors - eQ
  • When you select a link in the error summary panel at the top of the page, we didn't put focus on the first option in a radio/checkbox fieldset – would be good to clarify if this is acceptable.
  • Is it an issue that the error summary header is an <h2> yet placed above the page heading <h1>?
  • When page loads with an error, should the error summary panel focus state be visible? Should tabindex=-1 be removed after focus is lost?
  • Check prototype
• Download resources - DS only
  • new pattern, needs auditing
• Extend a session - eQ
  • new pattern, needs auditing
• Send and reply to messages - RASRM
  • new pattern, needs auditing
• News - DS only
  • new pattern, needs auditing
• Question - DS and eQ
  • Legend as question title (wraps page heading in a <legend>when question and fieldset answer is the only thing on the page)
• DS site search - DS
  • 'Search the design system' persistent across the website

[yatesn]

Gather updated requirements from Sarah Brooks (eQ) and contact craig.dunn@digitalaccessibilitycentre.org and/or cam.nicholl@digitalaccessibilitycentre.org

[jrbarnes9]

@yatesn This is now an exhaustive list of what we need testing on

[jrbarnes9]

Building prototype for DS feature testing