Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make short mission info non-clickable and add button #535

Closed
pmarsh-scottlogic opened this issue Nov 8, 2023 · 4 comments · Fixed by #841
Closed

Make short mission info non-clickable and add button #535

pmarsh-scottlogic opened this issue Nov 8, 2023 · 4 comments · Fixed by #841
Assignees
Labels
accessibility Addresses accessibility concerns frontend Requires work on the frontend should have ui design Requires UI design input

Comments

@pmarsh-scottlogic
Copy link
Contributor

pmarsh-scottlogic commented Nov 8, 2023

Currently the Short Mission Info banner is a clickable button. This is not super clear to visual users and gives a super long text for screen readers.

The plan:

  • Turn the banner into a non-clickable element.
  • Add a button on the right that lets users bring up the full mission info again.
  • Turn the "Level 1" heading into an h2
  • Ensure the icon on the button is aria-hidden

image

Acceptance Criteria:
GIVEN a visual user is going through the Level mode
WHEN they look at the banner
THEN they see a short mission info on the banner and a button which brings up the full mission info

GIVEN a screen reader user is going through the Level mode
WHEN they interact with the banner
THEN the "Level 1" on the banner is an h2 heading, the short mission info is a text paragraph, and there is a clickable button which announces the button text but not the icon.

@pmarsh-scottlogic pmarsh-scottlogic added this to the Accessibility milestone Nov 8, 2023
@pmarsh-scottlogic
Copy link
Contributor Author

As a side note, can we make it more clear that this is a button for clear-sighted users?

@gsproston-scottlogic gsproston-scottlogic added the accessibility Addresses accessibility concerns label Nov 8, 2023
@gsproston-scottlogic gsproston-scottlogic removed this from the Accessibility milestone Nov 8, 2023
@chriswilty
Copy link
Member

@pmarsh-scottlogic Let's ask @m4rkwallace-SL 😉

@pmarsh-scottlogic pmarsh-scottlogic added the ui design Requires UI design input label Nov 9, 2023
@gsproston-scottlogic gsproston-scottlogic added the frontend Requires work on the frontend label Nov 10, 2023
@pmarsh-scottlogic
Copy link
Contributor Author

pmarsh-scottlogic commented Nov 16, 2023

this will get invalidated by the new UI work. #570 #576

@gsproston-scottlogic
Copy link
Contributor

@m4rkwallace-SL to confirm is this is still needed.

@dhinrichs-scottlogic dhinrichs-scottlogic changed the title Short mission info button has unclear screen reader text Make short mission info non-clickable and add button Feb 15, 2024
@AAloshine-scottlogic AAloshine-scottlogic self-assigned this Feb 22, 2024
AAloshine-scottlogic added a commit that referenced this issue Mar 4, 2024
* changed button to themed button and aria-hid the info button

* lint importing fix

* fixed testing

* got rid of extra padding by getting rid of invisible border

* pr request fixes (css)

* fixed testing and formatting

* test now works!

* lint

* added defaultnormalising before text match on testing

* got rid of console.log

* rid of min width
chriswilty pushed a commit that referenced this issue Apr 8, 2024
* changed button to themed button and aria-hid the info button

* lint importing fix

* fixed testing

* got rid of extra padding by getting rid of invisible border

* pr request fixes (css)

* fixed testing and formatting

* test now works!

* lint

* added defaultnormalising before text match on testing

* got rid of console.log

* rid of min width
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Addresses accessibility concerns frontend Requires work on the frontend should have ui design Requires UI design input
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants