Merge pull request #2 from myasonik/a11y-fixes-for-tags

a11y fixes

Author: pgayvallet

x-pack/plugins/saved_objects_tagging/public/components/edition_modal/create_or_edit_modal.tsx

@@ -22,6 +22,7 @@ import {
   EuiTextArea,
   EuiSpacer,
   EuiText,
+  htmlIdGenerator,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -52,6 +53,7 @@ export const CreateOrEditModal: FC<CreateOrEditModalProps> = ({
   tag,
   mode,
 }) => {
+  const optionalMessageId = htmlIdGenerator()();
   const ifMounted = useIfMounted();
   const [submitting, setSubmitting] = useState<boolean>(false);
 
@@ -139,6 +141,12 @@ export const CreateOrEditModal: FC<CreateOrEditModalProps> = ({
                     onClick={() => setColor(getRandomColor())}
                     size="xs"
                     style={{ height: '18px', fontSize: '0.75rem' }}
+                    aria-label={i18n.translate(
+                      'xpack.savedObjectsTagging.management.createModal.color.randomizeAriaLabel',
+                      {
+                        defaultMessage: 'Randomize tag color',
+                      }
+                    )}
                   >
                     <FormattedMessage
                       id="xpack.savedObjectsTagging.management.createModal.color.randomize"
@@ -165,7 +173,7 @@ export const CreateOrEditModal: FC<CreateOrEditModalProps> = ({
               defaultMessage: 'Description',
             })}
             labelAppend={
-              <EuiText size="xs" color="subdued">
+              <EuiText size="xs" color="subdued" id={optionalMessageId}>
                 <FormattedMessage
                   id="xpack.savedObjectsTagging.management.optionalFieldText"
                   defaultMessage="Optional"
@@ -184,6 +192,7 @@ export const CreateOrEditModal: FC<CreateOrEditModalProps> = ({
               resize="none"
               fullWidth={true}
               compressed={true}
+              aria-describedby={optionalMessageId}
             />
           </EuiFormRow>
         </EuiForm>

x-pack/plugins/saved_objects_tagging/public/management/components/table.tsx

@@ -69,9 +69,11 @@ export const TagTable: FC<TagTableProps> = ({
   const actions: Array<EuiTableAction<TagWithRelations>> = [];
   if (capabilities.edit) {
     actions.push({
-      name: i18n.translate('xpack.savedObjectsTagging.management.table.actions.edit.title', {
-        defaultMessage: 'Edit',
-      }),
+      name: ({ name }) =>
+        i18n.translate('xpack.savedObjectsTagging.management.table.actions.edit.title', {
+          defaultMessage: 'Edit {name} tag',
+          values: { name },
+        }),
       description: i18n.translate(
         'xpack.savedObjectsTagging.management.table.actions.edit.description',
         {
@@ -86,9 +88,11 @@ export const TagTable: FC<TagTableProps> = ({
   }
   if (capabilities.delete) {
     actions.push({
-      name: i18n.translate('xpack.savedObjectsTagging.management.table.actions.delete.title', {
-        defaultMessage: 'Delete',
-      }),
+      name: ({ name }) =>
+        i18n.translate('xpack.savedObjectsTagging.management.table.actions.delete.title', {
+          defaultMessage: 'Delete {name} tag',
+          values: { name },
+        }),
       description: i18n.translate(
         'xpack.savedObjectsTagging.management.table.actions.delete.description',
         {
@@ -187,6 +191,10 @@ export const TagTable: FC<TagTableProps> = ({
       items={tags}
       pagination={tablePagination}
       sorting={sorting}
+      tableCaption={i18n.translate('xpack.savedObjectsTagging.management.table.columns.caption', {
+        defaultMessage: 'Tags',
+      })}
+      rowHeader="name"
       selection={
         allowSelection
           ? {

x-pack/plugins/saved_objects_tagging/public/management/types.ts

@@ -18,6 +18,10 @@ export interface TagBulkAction {
    * The label displayed in the bulk action context menu.
    */
   label: string;
+  /**
+   * Optional aria-label if the visual label isn't descriptive enough.
+   */
+  'aria-label'?: string;
   /**
    * An optional icon to display before the label in the context menu.
    */