Skip to content

Commit

Permalink
Add accessible name to "Export formats" dropdown
Browse files Browse the repository at this point in the history
The space for the export format select is limited so we rely on a combination of
the value and the descriptions in the dropdown content to indicate what it is
for. axe-core doesn't understand this though, so add an accessible label as
well.

In the process remove an accessibility violation suppression for the user
dropdown, as that violation is no longer reported.
  • Loading branch information
robertknight committed Oct 22, 2024
1 parent 25c1421 commit dec4f24
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 18 deletions.
1 change: 1 addition & 0 deletions src/sidebar/components/ShareDialog/ExportAnnotations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,7 @@ function ExportAnnotations({
/>
<div className="grow-0 ml-2 min-w-[5rem]">
<Select
aria-label="Export format"
value={exportFormat}
onChange={setExportFormat}
buttonContent={exportFormat.shortTitle ?? exportFormat.title}
Expand Down
18 changes: 0 additions & 18 deletions src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -594,26 +594,8 @@ describe('ExportAnnotations', () => {

it('should pass a11y checks', async () => {
const wrapper = createComponent();
const select = await waitForSelect(wrapper, 'user-select');

await checkAccessibility({
content: () => wrapper,
shouldIgnoreViolation: ({ id, nodes }) => {
if (id !== 'button-name') {
return false;
}

// axe-core can report a violation on any button[role="combobox"] linked
// to a label if it does not have aria-label or aria-labelledby, because
// the Dragon NaturallySpeaking screen reader does not play well with
// that combination.
// Since its use is marginal, we want to ignore the "button-name"
// violation if reported on SelectNext.
// See https://github.com/dequelabs/axe-core/issues/4235 for context

const targets = nodes.flatMap(node => node.target);
return targets.includes(`#${select.prop('buttonId')}`);
},
})();
});
});

0 comments on commit dec4f24

Please sign in to comment.