Skip to content

Commit

Permalink
(Accessibility) Viz type selection button should read more clearly in…
Browse files Browse the repository at this point in the history 
… screenreader elastic#29475 (elastic#33434)

* popover announces itself, button gives predictable behavior; menutitems
* drops incorrect button aria label
* replace aria-describedby with translated label
  • Loading branch information
@PhilippBaranovskiy
PhilippBaranovskiy authored and Filipp Baranovskii committed Mar 28, 2019
1 parent 79ad3a1 commit 798926b
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 1 deletion.
40 changes: 40 additions & 0 deletions ...acy/core_plugins/kibana/public/visualize/wizard/__snapshots__/new_vis_modal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,9 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
data-focus-lock-disabled="false"
>
<div
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
class="euiModal euiModal--maxWidth-default visNewVisDialog"
role="menu"
tabindex="0"
>
<button
Expand Down Expand Up @@ -275,6 +277,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-visWithSearch"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -310,6 +313,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
data-test-subj="visType-vis"
data-vis-stage="production"
disabled=""
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -376,9 +380,11 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
}
>
<EuiModal
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
className="visNewVisDialog"
maxWidth={true}
onClose={[Function]}
role="menu"
>
<EuiFocusTrap
clickOutsideDisables={false}
Expand Down Expand Up @@ -439,7 +445,9 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
data-focus-lock-disabled="false"
>
<div
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
class="euiModal euiModal--maxWidth-default visNewVisDialog"
role="menu"
tabindex="0"
>
<button
Expand Down Expand Up @@ -552,6 +560,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-visWithSearch"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -587,6 +596,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
data-test-subj="visType-vis"
data-vis-stage="production"
disabled=""
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -657,7 +667,9 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
data-focus-lock-disabled="false"
>
<div
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
class="euiModal euiModal--maxWidth-default visNewVisDialog"
role="menu"
tabindex="0"
>
<button
Expand Down Expand Up @@ -770,6 +782,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-visWithSearch"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -805,6 +818,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
data-test-subj="visType-vis"
data-vis-stage="production"
disabled=""
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -869,8 +883,10 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
/>
</SideEffect(FocusWatcher)>
<div
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
className="euiModal euiModal--maxWidth-default visNewVisDialog"
onKeyDown={[Function]}
role="menu"
tabIndex={0}
>
<EuiI18n
Expand Down Expand Up @@ -1165,6 +1181,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="menuitem"
>
<button
aria-describedby="visTypeDescription-visWithSearch"
Expand All @@ -1177,6 +1194,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -1261,6 +1279,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="menuitem"
>
<button
aria-describedby="visTypeDescription-vis"
Expand All @@ -1273,6 +1292,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -1590,7 +1610,9 @@ exports[`NewVisModal should render as expected 1`] = `
data-focus-lock-disabled="false"
>
<div
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
class="euiModal euiModal--maxWidth-default visNewVisDialog"
role="menu"
tabindex="0"
>
<button
Expand Down Expand Up @@ -1701,6 +1723,7 @@ exports[`NewVisModal should render as expected 1`] = `
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-vis"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -1735,6 +1758,7 @@ exports[`NewVisModal should render as expected 1`] = `
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-visWithSearch"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -1801,9 +1825,11 @@ exports[`NewVisModal should render as expected 1`] = `
}
>
<EuiModal
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
className="visNewVisDialog"
maxWidth={true}
onClose={[Function]}
role="menu"
>
<EuiFocusTrap
clickOutsideDisables={false}
Expand Down Expand Up @@ -1864,7 +1890,9 @@ exports[`NewVisModal should render as expected 1`] = `
data-focus-lock-disabled="false"
>
<div
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
class="euiModal euiModal--maxWidth-default visNewVisDialog"
role="menu"
tabindex="0"
>
<button
Expand Down Expand Up @@ -1975,6 +2003,7 @@ exports[`NewVisModal should render as expected 1`] = `
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-vis"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -2009,6 +2038,7 @@ exports[`NewVisModal should render as expected 1`] = `
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-visWithSearch"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -2079,7 +2109,9 @@ exports[`NewVisModal should render as expected 1`] = `
data-focus-lock-disabled="false"
>
<div
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
class="euiModal euiModal--maxWidth-default visNewVisDialog"
role="menu"
tabindex="0"
>
<button
Expand Down Expand Up @@ -2190,6 +2222,7 @@ exports[`NewVisModal should render as expected 1`] = `
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-vis"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -2224,6 +2257,7 @@ exports[`NewVisModal should render as expected 1`] = `
class="euiKeyPadMenuItem visNewVisDialog__type"
data-test-subj="visType-visWithSearch"
data-vis-stage="production"
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -2288,8 +2322,10 @@ exports[`NewVisModal should render as expected 1`] = `
/>
</SideEffect(FocusWatcher)>
<div
aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
className="euiModal euiModal--maxWidth-default visNewVisDialog"
onKeyDown={[Function]}
role="menu"
tabIndex={0}
>
<EuiI18n
Expand Down Expand Up @@ -2572,6 +2608,7 @@ exports[`NewVisModal should render as expected 1`] = `
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="menuitem"
>
<button
aria-describedby="visTypeDescription-vis"
Expand All @@ -2584,6 +2621,7 @@ exports[`NewVisModal should render as expected 1`] = `
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="menuitem"
type="button"
>
<div
Expand Down Expand Up @@ -2668,6 +2706,7 @@ exports[`NewVisModal should render as expected 1`] = `
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="menuitem"
>
<button
aria-describedby="visTypeDescription-visWithSearch"
Expand All @@ -2680,6 +2719,7 @@ exports[`NewVisModal should render as expected 1`] = `
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
role="menuitem"
type="button"
>
<div
Expand Down
16 changes: 15 additions & 1 deletion src/legacy/core_plugins/kibana/public/visualize/wizard/new_vis_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
import React from 'react';

import { EuiModal, EuiOverlayMask } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { VisualizeConstants } from '../visualize_constants';

Expand Down Expand Up @@ -64,13 +65,26 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
return null;
}

const visNewVisDialogAriaLabel = i18n.translate(
'kbn.visualize.newVisWizard.helpTextAriaLabel',
{
defaultMessage:
'Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further.',
}
);

const selectionModal =
this.state.showSearchVisModal && this.state.visType ? (
<EuiModal onClose={this.onCloseModal} className="visNewVisSearchDialog">
<SearchSelection onSearchSelected={this.onSearchSelected} visType={this.state.visType} />
</EuiModal>
) : (
<EuiModal onClose={this.onCloseModal} className="visNewVisDialog">
<EuiModal
onClose={this.onCloseModal}
className="visNewVisDialog"
aria-label={visNewVisDialogAriaLabel}
role="menu"
>
<TypeSelection
showExperimental={this.isLabsEnabled}
onVisTypeSelected={this.onVisTypeSelected}
Expand Down
1 change: 1 addition & 0 deletions src/legacy/core_plugins/kibana/public/visualize/wizard/type_selection/type_selection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@ class TypeSelection extends React.Component<TypeSelectionProps, TypeSelectionSta
data-vis-stage={visType.stage}
disabled={isDisabled}
aria-describedby={`visTypeDescription-${visType.name}`}
role="menuitem"
{...stage}
>
<VisTypeIcon visType={visType} />
Expand Down

0 comments on commit 798926b

Please sign in to comment.