Skip to content

LG-7817 Ensure that screen reader follows search page hierarchy #7459

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.

Sign up for GitHub

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

Closed
eileen-nava wants to merge 8 commits into from
Closed

LG-7817 Ensure that screen reader follows search page hierarchy #7459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2e1d735
Voiceover reads search results but not location step info text
eileen-nava Dec 8, 2022
5c17ab6
screenreader follows hierarchy of page but reads back twice
eileen-nava Dec 8, 2022
de5c2f5
refactor to use aria role
eileen-nava Dec 8, 2022
4a53fc8
Merge branch 'main' into em/7817-screen-reader-order
allthesignals Dec 9, 2022
4f7fe44
Remove conditional render; add aria information
allthesignals Dec 9, 2022
2fb5558
changelog: Upcoming Features, In-Person Proofing, Add in aria configu…
allthesignals Dec 9, 2022
98fdf24
Fix lint
allthesignals Dec 9, 2022
9c2d88f
prevent screenreader from reading back 2x on backbutton
eileen-nava Dec 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/javascript/packages/document-capture/components/back-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ interface BackLinkProps extends ComponentProps<typeof Button> {
function BackButton({ includeBorder = false, ...props }: BackLinkProps) {
const button = (
<Button isUnstyled {...props}>
&#x2039; {t('forms.buttons.back')}
<span aria-hidden="true">&#x2039; </span>
Copy link
Copy Markdown
Contributor Author

@eileen-nava eileen-nava Dec 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I said in slack, the screenreader read "back" twice because it read "back" for both the arrow "<" and the word "back"

I fixed this glitch by adding aria-hidden="true" to the arrow "<". Documentation notes that aria-hidden is a way to fix duplicated content.

<span>{t('forms.buttons.back')}</span>
</Button>
);
if (includeBorder) {
Expand Down
14 changes: 7 additions & 7 deletions ...cript/packages/document-capture/components/in-person-location-post-office-search-step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import LocationCollection from './location-collection';
import LocationCollectionItem from './location-collection-item';
import AnalyticsContext from '../context/analytics';
import AddressSearch from './address-search';
import InPersonContext from '../context/in-person';

interface PostOffice {
address: string;
Expand Down Expand Up @@ -88,7 +87,6 @@ function InPersonLocationPostOfficeSearchStep({ onChange, toPreviousStep, regist
const [autoSubmit, setAutoSubmit] = useState(false);
const [isLoadingComplete, setIsLoadingComplete] = useState(false);
const { setSubmitEventMetadata } = useContext(AnalyticsContext);
const { arcgisSearchEnabled } = useContext(InPersonContext);

// ref allows us to avoid a memory leak
const mountedRef = useRef(false);
Expand Down Expand Up @@ -201,12 +199,14 @@ function InPersonLocationPostOfficeSearchStep({ onChange, toPreviousStep, regist
return (
<>
<PageHeading>{t('in_person_proofing.headings.location')}</PageHeading>
{arcgisSearchEnabled && (
<div aria-live="polite">
<AddressSearch onAddressFound={handleFoundAddress} registerField={registerField} />
Copy link
Copy Markdown
Contributor

@svalexander svalexander Dec 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is really a thought for design - but wondering if the search field should clear the user's input after clicking the search button. And if the "no matches found" text has enough prominence on the page. Right a user see's the address they input 2x on the page and it's hard to notice the "no match" text.

Copy link
Copy Markdown
Contributor

@svalexander svalexander Dec 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh wait, is the 2nd address shown on the page the one that was actually used by the search function?/ the closest match to the input? that's unclear. I'll add these thoughts in slack so design can comment.

Copy link
Copy Markdown
Contributor

@svalexander svalexander Dec 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

crossing out the portions that are likely not applicable since the 2nd address is for debugging

)}
<p>{t('in_person_proofing.body.location.location_step_about')}</p>
{locationsContent}
<BackButton onClick={toPreviousStep} />
</div>
<div role="status">
<p>{t('in_person_proofing.body.location.location_step_about')}</p>
{locationsContent}
<BackButton onClick={toPreviousStep} />
Copy link
Copy Markdown
Contributor

@svalexander svalexander Dec 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

another thing happening with the screen reader...it's currently reading the text that appears alongside the search button after it reads out "back"

Copy link
Copy Markdown
Contributor

@svalexander svalexander Dec 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if that address is removed then this screen reader issue should be ignored.

Copy link
Copy Markdown
Contributor

@svalexander svalexander Dec 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i've been trying to test this page but voiceover +chrome are acting up (constantly freezing and not auto reading the page) So I'm not 100% sure if it's just a chrome issue or if removing the "<" would fix the double reading of back (since the 2 pieces of text are separate).

</div>
</>
);
}
Expand Down