Skip to content

Commit

Permalink
a11y: Use group role
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-hamano
t-hamano committed Oct 20, 2024
1 parent b82f350 commit ae6ed67
Show file tree
Hide file tree
Showing 11 changed files with 47 additions and 42 deletions.
2 changes: 1 addition & 1 deletion src/controls/border-color-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default function BorderColorControl( {

return (
<BaseControl className="ftb-border-color-control" help={ help } __nextHasNoMarginBottom>
<VStack aria-labelledby={ headingId } role="region">
<VStack aria-labelledby={ headingId } role="group">
<Flex>
<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
{ label }
Expand Down
2 changes: 1 addition & 1 deletion src/controls/border-radius-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default function BorderRadiusControl( {

return (
<BaseControl className="ftb-border-radius-control" help={ help } __nextHasNoMarginBottom>
<VStack aria-labelledby={ headingId } role="region">
<VStack aria-labelledby={ headingId } role="group">
<Flex>
<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
{ label }
Expand Down
2 changes: 1 addition & 1 deletion src/controls/border-spacing-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default function BorderSpacingControl( {

return (
<BaseControl className="ftb-border-spacing-control" help={ help } __nextHasNoMarginBottom>
<VStack aria-labelledby={ headingId } role="region">
<VStack aria-labelledby={ headingId } role="group">
<Flex>
<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
{ label }
Expand Down
2 changes: 1 addition & 1 deletion src/controls/border-style-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export default function BorderStyleControl( {

return (
<BaseControl className="ftb-border-style-control" help={ help } __nextHasNoMarginBottom>
<VStack aria-labelledby={ headingId } role="region">
<VStack aria-labelledby={ headingId } role="group">
<Flex>
<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
{ isMixed && isLinked
Expand Down
2 changes: 1 addition & 1 deletion src/controls/border-width-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default function BorderWidthControl( {

return (
<BaseControl className="ftb-border-width-control" help={ help } __nextHasNoMarginBottom>
<VStack aria-labelledby={ headingId } role="region">
<VStack aria-labelledby={ headingId } role="group">
<Flex>
<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
{ label }
Expand Down
2 changes: 1 addition & 1 deletion src/controls/color-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default function ColorControl( {

return (
<BaseControl className="ftb-color-control" help={ help } __nextHasNoMarginBottom>
<VStack aria-labelledby={ headingId } role="region">
<VStack aria-labelledby={ headingId } role="group">
<Flex>
<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
{ label }
Expand Down
2 changes: 1 addition & 1 deletion src/controls/padding-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export default function PaddingControl( {

return (
<BaseControl className="ftb-padding-control" help={ help } __nextHasNoMarginBottom>
<VStack aria-labelledby={ headingId } role="region">
<VStack aria-labelledby={ headingId } role="group">
<Flex>
<Text id={ headingId } upperCase size="11" weight="500" as={ FlexBlock }>
{ label }
Expand Down
4 changes: 2 additions & 2 deletions src/settings/table-cell-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell
/>
<hr />
<BaseControl id="flexible-table-block-cell-text-align" __nextHasNoMarginBottom>
<div aria-labelledby="flexible-table-block-cell-text-align-heading" role="region">
<div aria-labelledby="flexible-table-block-cell-text-align-heading" role="group">
<span
id="flexible-table-block-cell-text-align-heading"
className="ftb-base-control-label"
Expand Down Expand Up @@ -417,7 +417,7 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell
/>
{ selectedCellTags.includes( 'th' ) && (
<BaseControl id="flexible-table-block-cell-scope" __nextHasNoMarginBottom>
<div aria-labelledby="flexible-table-block-cell-scope-heading" role="region">
<div aria-labelledby="flexible-table-block-cell-scope-heading" role="group">
<span
id="flexible-table-block-cell-scope-heading"
className="ftb-base-control-label"
Expand Down
12 changes: 6 additions & 6 deletions test/e2e/specs/global-setting.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,25 @@ test.describe( 'Global Setting', () => {
await expect( page.locator( '.ftb-global-setting-modal__notice' ) ).toContainText(
'Global setting restored.'
);
await page.locator( '.ftb-global-setting-modal__notice ' ).getByRole( 'button' ).click();
await page.locator( '.ftb-global-setting-modal__notice' ).getByRole( 'button' ).click();
// Change table width.
await page.getByRole( 'spinbutton', { name: 'Table width' } ).fill( '90' );
// Change table max width.
await page.getByRole( 'spinbutton', { name: 'Table max width' } ).fill( '110' );
await page.getByRole( 'button', { name: 'Separate' } ).click();
// Change striped colors.
const tableColors = [
{ color: '111111', selector: 'odd' },
{ color: '222222', selector: 'even' },
{ color: '111111', label: 'Striped style background color ( odd rows )' },
{ color: '222222', label: 'Striped style background color ( even rows )' },
];
for ( let i = 0; i < tableColors.length; i++ ) {
const { color, label } = tableColors[ i ];
await page
.getByRole( 'dialog', { name: 'Flexible Table Block Global setting' } )
.getByRole( 'group', { name: label } )
.getByRole( 'button', { name: 'Color' } )
.nth( i )
.click();
await pageUtils.pressKeys( 'Enter' );
await page.getByRole( 'textbox', { name: 'Hex color' } ).fill( tableColors[ i ].color );
await page.getByRole( 'textbox', { name: 'Hex color' } ).fill( color );
await pageUtils.pressKeys( 'Escape', { times: 2 } );
}
// Apply cell styles.
Expand Down
44 changes: 20 additions & 24 deletions test/e2e/specs/table-style.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,15 @@ async function applyCellStyles( page, pageUtils ) {
await page.getByRole( 'spinbutton', { name: 'Cell width' } ).fill( '100' );

// Text Color, Background Color styles.
const cellTextColorId = await page.getByText( 'Cell text color' ).getAttribute( 'id' );
await page
.locator( `[aria-labelledby="${ cellTextColorId }"]` )
.getByRole( 'group', { name: 'Cell text color' } )
.getByRole( 'button', { name: 'Color' } )
.click();
await pageUtils.pressKeys( 'Enter' );
await page.getByRole( 'textbox', { name: 'Hex color' } ).fill( '111111' );
await pageUtils.pressKeys( 'Escape', { times: 2 } );
const cellBackgroundColorId = await page
.getByText( 'Cell background color' )
.getAttribute( 'id' );
await page
.locator( `[aria-labelledby="${ cellBackgroundColorId }"]` )
.getByRole( 'group', { name: 'Cell background color' } )
.getByRole( 'button', { name: 'Color' } )
.click();
await pageUtils.pressKeys( 'Enter' );
Expand All @@ -42,35 +38,35 @@ async function applyCellStyles( page, pageUtils ) {
// Padding, Border Radius, Border Width styles.
const styles = [
{
selector: 'padding',
group: 'Cell padding',
labels: [ 'Top', 'Right', 'Bottom', 'Left' ],
},
{
selector: 'border-radius',
group: 'Cell border radius',
labels: [ 'Top left', 'Top right', 'Bottom right', 'Bottom left' ],
},
{
selector: 'border-width',
group: 'Cell border width',
labels: [ 'Top', 'Right', 'Bottom', 'Left' ],
},
];
for ( let i = 0; i < styles.length; i++ ) {
const { selector, labels } = styles[ i ];
const { group, labels } = styles[ i ];
await page
.locator( `.ftb-${ selector }-control__header-control` )
.getByRole( 'group', { name: group } )
.getByRole( 'button', { name: 'Unlink sides' } )
.click();
for ( let j = 0; j < labels.length; j++ ) {
await page
.locator( `.ftb-${ selector }-control__input-controls` )
.getByRole( 'group', { name: group } )
.getByRole( 'spinbutton', { name: labels[ j ] } )
.fill( ( j + 1 ).toString() );
}
}

// Boder Style styles.
await page
.locator( '.ftb-border-style-control__button-controls' )
.getByRole( 'group', { name: 'Cell border style' } )
.getByRole( 'button', { name: 'Unlink sides' } )
.click();
await page.getByRole( 'button', { name: 'Solid' } ).nth( 0 ).click();
Expand All @@ -80,7 +76,7 @@ async function applyCellStyles( page, pageUtils ) {

// Border Color styles.
await page
.locator( '.ftb-border-color-control__controls' )
.getByRole( 'group', { name: 'Cell border color' } )
.getByRole( 'button', { name: 'Unlink sides' } )
.click();
const colors = [
Expand All @@ -91,7 +87,7 @@ async function applyCellStyles( page, pageUtils ) {
];
for ( let i = 0; i < colors.length; i++ ) {
await page
.locator( '.ftb-border-color-control__controls' )
.getByRole( 'group', { name: 'Cell border color' } )
.getByRole( 'button', { name: colors[ i ].label } )
.click();
await pageUtils.pressKeys( 'Enter' );
Expand Down Expand Up @@ -143,35 +139,35 @@ test.describe( 'Styles', () => {
// Padding, Border Radius, Border Width styles.
const styles = [
{
selector: 'padding',
group: 'Table padding',
labels: [ 'Top', 'Right', 'Bottom', 'Left' ],
},
{
selector: 'border-radius',
group: 'Table border radius',
labels: [ 'Top left', 'Top right', 'Bottom right', 'Bottom left' ],
},
{
selector: 'border-width',
group: 'Table border width',
labels: [ 'Top', 'Right', 'Bottom', 'Left' ],
},
];
for ( let i = 0; i < styles.length; i++ ) {
const { selector, labels } = styles[ i ];
const { group, labels } = styles[ i ];
await page
.locator( `.ftb-${ selector }-control__header-control` )
.getByRole( 'group', { name: group } )
.getByRole( 'button', { name: 'Unlink sides' } )
.click();
for ( let j = 0; j < labels.length; j++ ) {
await page
.locator( `.ftb-${ selector }-control__input-controls` )
.getByRole( 'group', { name: group } )
.getByRole( 'spinbutton', { name: labels[ j ] } )
.fill( ( j + 1 ).toString() );
}
}

// Boder Style styles.
await page
.locator( '.ftb-border-style-control__button-controls' )
.getByRole( 'group', { name: 'Table border style' } )
.getByRole( 'button', { name: 'Unlink sides' } )
.click();
await page.getByRole( 'button', { name: 'Solid' } ).nth( 0 ).click();
Expand All @@ -181,7 +177,7 @@ test.describe( 'Styles', () => {

// Border Color styles.
await page
.locator( '.ftb-border-color-control__controls' )
.getByRole( 'group', { name: 'Table border color' } )
.getByRole( 'button', { name: 'Unlink sides' } )
.click();
const colors = [
Expand All @@ -192,7 +188,7 @@ test.describe( 'Styles', () => {
];
for ( let i = 0; i < colors.length; i++ ) {
await page
.locator( '.ftb-border-color-control__controls' )
.getByRole( 'group', { name: 'Table border color' } )
.getByRole( 'button', { name: colors[ i ].label } )
.click();
await pageUtils.pressKeys( 'Enter' );
Expand Down
15 changes: 12 additions & 3 deletions test/e2e/specs/transform.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,10 @@ test.describe( 'Transform from flexible table block', () => {
await page.getByRole( 'button', { name: 'Table settings' } ).click();
await page.getByRole( 'checkbox', { name: 'Scroll on desktop view' } ).uncheck();
await page.getByRole( 'spinbutton', { name: 'Table width' } ).fill( '500' );
await page.fill( '.ftb-padding-control__header-control input', '1' );
await page
.getByRole( 'group', { name: 'Table padding' } )
.getByRole( 'spinbutton', { name: 'All' } )
.fill( '1' );
await page.getByRole( 'button', { name: 'Solid' } ).click();
await page.getByRole( 'button', { name: 'Separate' } ).click();
await editor.transformBlockTo( 'core/table' );
Expand Down Expand Up @@ -224,7 +227,10 @@ test.describe( 'Transform from flexible table block', () => {
.click();
await page.getByRole( 'button', { name: 'Cell settings' } ).click();
await page.getByRole( 'spinbutton', { name: 'Cell font size' } ).fill( '20' );
await page.fill( '.ftb-padding-control__header-control input', '1' );
await page
.getByRole( 'group', { name: 'Cell padding' } )
.getByRole( 'spinbutton', { name: 'All' } )
.fill( '1' );
await page.getByRole( 'button', { name: 'Solid' } ).click();
await page.getByRole( 'radio', { name: 'TH' } ).click();
await editor.transformBlockTo( 'core/table' );
Expand Down Expand Up @@ -359,7 +365,10 @@ test.describe( 'Transform from flexible table block', () => {
.click();
await page.getByRole( 'button', { name: 'Caption settings', exact: true } ).click();
await page.getByRole( 'spinbutton', { name: 'Caption font size' } ).fill( '20' );
await page.fill( '.ftb-padding-control__header-control input', '20' );
await page
.getByRole( 'group', { name: 'Caption padding' } )
.getByRole( 'spinbutton', { name: 'All' } )
.fill( '1' );
await page.getByRole( 'radio', { name: 'Top' } ).click();
await editor.transformBlockTo( 'core/table' );

Expand Down

0 comments on commit ae6ed67

Please sign in to comment.