diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 07c632e1170b..16aeb87407cd 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -6395,7 +6395,6 @@ $text-02: if( - [modal [mixin]](#modal-mixin) - [overflow-menu [mixin]](#overflow-menu-mixin) - [pagination [mixin]](#pagination-mixin) - - [search [mixin]](#search-mixin) - [tabs [mixin]](#tabs-mixin) - [toggle [mixin]](#toggle-mixin) - [toolbar [mixin]](#toolbar-mixin) @@ -6568,6 +6567,7 @@ $icon-02: if( - [file-uploader [mixin]](#file-uploader-mixin) - [listbox [mixin]](#listbox-mixin) - [overflow-menu [mixin]](#overflow-menu-mixin) + - [search [mixin]](#search-mixin) - [text-input [mixin]](#text-input-mixin) - [tile [mixin]](#tile-mixin) - [tooltip--icon--legacy [mixin]](#tooltip--icon--legacy-mixin) @@ -20934,8 +20934,7 @@ Search styles width: rem(16px); top: 50%; transform: translateY(-50%); - // Ensure clear icon is rendered in Firefox (#1127) - fill: $text-02; + fill: $icon-02; pointer-events: none; } @@ -21083,7 +21082,7 @@ Search styles - [ui-04 [variable]](#ui-04-variable) - [text-05 [variable]](#text-05-variable) - [field-02 [variable]](#field-02-variable) - - [text-02 [variable]](#text-02-variable) + - [icon-02 [variable]](#icon-02-variable) - [carbon--spacing-01 [variable]](#carbon--spacing-01-variable) - [icon-01 [variable]](#icon-01-variable) - [hover-field [variable]](#hover-field-variable) diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss index 1fe5a6bdfc05..2a95ec8d5431 100644 --- a/packages/components/src/components/search/_search.scss +++ b/packages/components/src/components/search/_search.scss @@ -104,8 +104,7 @@ width: rem(16px); top: 50%; transform: translateY(-50%); - // Ensure clear icon is rendered in Firefox (#1127) - fill: $text-02; + fill: $icon-02; pointer-events: none; } diff --git a/packages/react/src/components/Tab/Tab-test.js b/packages/react/src/components/Tab/Tab-test.js index b7d526f8b9c1..11db72768bb9 100644 --- a/packages/react/src/components/Tab/Tab-test.js +++ b/packages/react/src/components/Tab/Tab-test.js @@ -27,12 +27,8 @@ describe('Tab', () => { ); }); - it('renders
  • with [role="presentation"]', () => { - expect(wrapper.props().role).toEqual('presentation'); - }); - - it('renders with [role="tab"]', () => { - expect(wrapper.find('a').props().role).toEqual('tab'); + it('renders
  • with [role="tab"]', () => { + expect(wrapper.props().role).toEqual('tab'); }); it('renders with tabindex set to 0', () => { diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js index ead5751e62c3..43ef38b5c72c 100644 --- a/packages/react/src/components/Tab/Tab.js +++ b/packages/react/src/components/Tab/Tab.js @@ -135,11 +135,7 @@ export default class Tab extends React.Component { id, className: `${prefix}--tabs__nav-link`, href, - role: 'tab', tabIndex: !disabled ? tabIndex : -1, - ['aria-selected']: selected, - ['aria-disabled']: disabled, - ['aria-controls']: id && `${id}__panel`, ref: e => { this.tabAnchor = e; }, @@ -164,8 +160,10 @@ export default class Tab extends React.Component { handleTabKeyDown(index, evt); onKeyDown(evt); }} - role="presentation" - selected={selected}> + role="tab" + aria-selected={selected} + aria-disabled={disabled} + aria-controls={`${id}__panel`}> {renderAnchor ? ( renderAnchor(anchorProps) ) : (